<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    
    <!--====== Title ======-->
    <title><?php echo $settings->title;?></title>
    
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">



    <!-- added ico place -->

    <link rel="shortcut icon" href="<?php echo $settings->favicon;?>"/>

    <link rel="bookmark" href="<?php echo $settings->favicon;?>"/>

    <!-- end added ico place -->

    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="<?php echo $settings->favicon;?>" type="image/png">
        
    <!--====== Animate CSS ======-->
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/animate.css">
        
    <!--====== Magnific Popup CSS ======-->
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/magnific-popup.css">
        
    <!--====== Slick CSS ======-->
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/slick.css">
        
    <!--====== Line Icons CSS ======-->
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/LineIcons.css">
        
    <!--====== Font Awesome CSS ======-->
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/font-awesome.min.css">
        
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css">
    
    <!--====== Default CSS ======-->
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/default.css">
    
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/style.css">
    
</head>

<body>
    <!--[if IE]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->    
   
    <!-- right side menu -->
    <style>

    #myBtn1:hover {
        background-color: #e08b5e;
    }


    #myBtn1 {
        display: block;
        position: fixed;
        top: 20%;
        right: 0px;
        z-index: 99;
        border: none;
        outline: none;
        background-color: #e08b5e;
        color: white;
        cursor: pointer;
        padding: 10px;
        border-radius: 10px 0 0 10px;
        font-size: 18px;
        box-shadow: 0px 0px 4px 2px rgba(0,0,0,.125);
    }

    #myBtn2:hover {
        background-color: #e08b5e;
    }


    #myBtn2 {
        display: block;
        position: fixed;
        top: 40%;
        right: 0px;
        z-index: 99;
        border: none;
        outline: none;
        background-color: #e08b5e;
        color: white;
        cursor: pointer;
        padding: 10px;
        border-radius: 10px 0 0 10px;
        font-size: 18px;
        box-shadow: 0px 0px 4px 2px rgba(0,0,0,.125);
    }
    </style>

    <a href="index.php?c=booking&amp;a=index">
      <button id="myBtn1">立<br>即<br>登<br>記</button>
    </a>


    <a href="index.php?c=booking&amp;a=index">
      <button id="myBtn2">網<br>店<br>限<br>定<br>優<br>惠</button>
    </a>

    <!-- end right side menu -->



   
    <!--====== PRELOADER PART START ======-->

    <div class="preloader">
        <div class="loader">
            <div class="ytp-spinner">
                <div class="ytp-spinner-container">
                    <div class="ytp-spinner-rotator">
                        <div class="ytp-spinner-left">
                            <div class="ytp-spinner-circle"></div>
                        </div>
                        <div class="ytp-spinner-right">
                            <div class="ytp-spinner-circle"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--====== PRELOADER PART ENDS ======-->
    
    
    <style>
      .bootmenu ::before {
            content: "";
    color: #ffffff!important;
    font-weight: bold;
    display: inline-block;
    /*width: 1em;*/
    /*margin-left: -1em;*/
    margin-top: 0px;
    margin-bottom: 0px;
    float: none;
      }
      .bootmenu .nav-item{
        margin-right: 20px;
      }
      .bootmenu{
        /*background-color: white;*/
      }
      .bootmenu .nav-link{
        color: #585858 !important;

      }
      .bootmenu .nav-link:hover{
        color: #ea6d11 !important;
        cursor:pointer;

      }
      .topmenuicon [class*="fa fa-"] {
        background-color: #ffffff;
        border-radius: 40px;
        color: #dabfae;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        margin: auto 3px;
        width: 40px;
        font-size: 24px;
        text-align: center;
    }
    </style>
    <header class="header-area" style="">
        <div class="navbar-area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">

                      <nav class="navbar navbar-expand-lg   rounded text-center text-lg-left">
                      <a class="navbar-brand" href="<?php echo base_url();?>">
                                <img src="<?php echo base_url();?>assets/images/logo.png" alt="Logo">
                            </a>

                     <a class=" collapsed ml-auto mr-3 " data-toggle="collapse" href="#searchbox1" role="" aria-expanded="false" aria-controls="searchbox1" style="">
                            <div class="navbar-toggler bg-transparent  ">
                                <i class="fa fa-search" style="color:#d6bcab"></i>
                            </div>
                            </a>


                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                       <span class="toggler-icon" style="background-color:#d6bcab"></span>
                                <span class="toggler-icon" style="background-color:#d6bcab"></span>
                                <span class="toggler-icon" style="background-color:#d6bcab"></span>
                    </button>     
                      <div class="collapse navbar-collapse  flex-column " id="navbarCollapse">
                            <div class="navbar-nav  ml-auto ">

                                <div class="topmenuicon d-lg-block d-none " style=" ">
                                  <a class="fa fa-whatsapp " title="" target="_blank" href="https://www.youtube.com/watch?v=UZNXohBtDbg" style=""></a>
                                </div>

                                <div class="topmenuicon d-lg-block d-none" style=" ">
                                  <a class="fa fa-facebook " title="" target="_blank" href="https://www.youtube.com/watch?v=UZNXohBtDbg" style=""></a>
                                </div>

                                <div class="topmenuicon d-lg-block d-none" style=" ">
                                  <a class="fa fa-instagram " title="" target="_blank" href="https://www.youtube.com/watch?v=UZNXohBtDbg" style=""></a>
                                </div>
                                 
                                  <div class="topmenuicon d-lg-block d-none" style=" ">
                                  <a class="fa fa-youtube-play " title="" target="_blank" href="https://www.youtube.com/watch?v=UZNXohBtDbg" style=""></a>
                                </div>

                                <div class="topmenuicon d-lg-block d-none" style=" ">
                                  <a class="fa fa-weixin" title="" target="_blank" href="https://www.youtube.com/watch?v=UZNXohBtDbg" style=""></a>
                                </div>

                                <a class=" collapsed d-lg-block d-none" data-toggle="collapse" href="#searchbox1" role="" aria-expanded="false" aria-controls="searchbox1" style="">
                                <div class="topmenuicon" style=" ">
                                  <i class="fa fa-search" title="" style=""></i>
                                </div>
                              </a>
                                
                             
                                <!-- <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a> -->
                            </div>
                            
                            <div class="navbar-nav bootmenu ml-auto">
                                

                                <a href="#" class="nav-item nav-link active">關於我們</a>
                                <a href="#" class="nav-item nav-link">療程服務</a>
                                <a href="#" class="nav-item nav-link">輕 &middot; 美容</a>
                                <a href="#" class="nav-item nav-link">免費諮詢</a>
                                <a href="#" class="nav-item nav-link">美容專欄</a>
                                <a href="#" class="nav-item nav-link">網上商店</a>
                                <a href="#" class="nav-item nav-link">聯絡我們</a>
                                <!-- <a href="#" class="nav-item nav-link disabled" tabindex="-1">Reports</a> -->
                            </div>

                            <!-- bottom menu -->
                            <div class="d-lg-none d-block">
                                    <div class="topmenuicon  " style=" ">
                                      <a class="fa fa-whatsapp topmenuicon " title="" target="_blank" href="https://www.youtube.com/watch?v=UZNXohBtDbg" style=""></a>
                                      <a class="fa fa-facebook topmenuicon " title="" target="_blank" href="https://www.youtube.com/watch?v=UZNXohBtDbg" style=""></a>


                                        <a class="fa fa-instagram " title="" target="_blank" href="https://www.youtube.com/watch?v=UZNXohBtDbg" style=""></a>

                                        <a class="fa fa-youtube-play " title="" target="_blank" href="https://www.youtube.com/watch?v=UZNXohBtDbg" style=""></a>

                                        <a class="fa fa-weixin" title="" target="_blank" href="https://www.youtube.com/watch?v=UZNXohBtDbg" style=""></a>


                                      <a class=" " data-toggle="collapse" href="#searchbox1" role="" aria-expanded="false" aria-controls="searchbox1" style="">
                                      <div class="topmenuicon" style=" ">
                                        <i class="fa fa-search" title="" style=""></i>
                                      </div>
                                    </a>
                                    </div>
                            </div>

                            <!-- end bottom menu -->

                        </div>
                    <!--   <ul class="navbar-nav ml-auto list-unstyled bootmenu" style="list-style-type: none;">
                        <li class="nav-item" s>
                          <a class="nav-link">關於我們</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link">療程服務</a>
                        </li>
                        <li class="nav-item ">
                          <a class="nav-link">輕 &middot; 美容</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link">免費諮詢</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link">美容專欄</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link">網上商店</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link">聯絡我們</a>
                        </li>
                        <li class="nav-item dropdown">
                          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">            Dropdown on Right</a>
                          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action with a lot of text inside of an item</a>
                          </div>
                        </li>
                      </ul> -->
                     
                    </nav>
                  </div>
                </div>
              </div>
            </div>
          </header>
    <!-- //end added nav-bar -->
    
    <!--====== HEADER PART ENDS ======-->
    <script type="text/javascript">
     


        function myFunction() {
              var x = document.getElementById("rightsidemenu");
              if (x.style.display === "none") {
                x.style.display = "block";
              } else {
                x.style.display = "none";
              }

        }


    </script>

    <style type="text/css">
     
    </style>



<style>
    div#hint{

z-index: 11;position:absolute;top: 10;right: 0;

  background: gold;
  color: orangered;
  /*padding: .5em;*/
  box-sizing: border-box;
  /*overflow: hidden;*/
  /*height:0px;
  width: 100px;*/
  font-weight: bold;
  transition: height 1s, width 1s, padding 1s, visibility 1s, opacity 0.5s ease-out;

}
    

    /*inside menu*/
   .collapsible2 {
  background-color: #fdefe6;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  overflow: hidden;
}

.active2, .collapsible2:hover {
  background-color: #ffddc7;
}

.collapsible2:after {
  content: '\25bc';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  overflow: hidden;
}

.active2:after {
  content: "\25b2";
}

.content1 {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

.menu1button{
    background-color: #fdefe6;
}
.menu1button:hover{
    background-color: #ffd7be;
}

[data-toggle="collapse"] .famenu:before {  
  color: #d9bfb0;
  content: "\25b2";
   float: right;
  margin-left: 5px;
}

.collapsed[data-toggle="collapse"] .famenu:before {
  color: #d9bfb0;
  content: "\25bc";
   float: right;
  margin-left: 5px;
}


.menu2button{
  background-color: #fef7f1;
}

.menu2button:hover{
    background-color: #efece9;
}
.menu2button[data-toggle="collapse"] .famenu:before {  
  color: #d9bfb0;
  content: "\25b2";
   float: right;
  margin-left: 5px;
}

.menu2button[data-toggle="collapse"].collapsed .famenu:before {
  color: #d9bfb0;
  content: "\25bc";
   float: right;
  margin-left: 5px;
}

.menucontent:before {  


    color: #d9bfb0;
  content: "\00a0\00a0\00a0\00a0";
   float: right;
  margin-left: 5px;
}

.menucontent {
  cursor: pointer;
}
.menucontent span{
  color:#5b595a;
}
.menucontent:hover span{
  color:#ec6100;

}

.greyborder {
  /*border:1px grey solid;*/
  /*border-top:    1px grey solid;*/
  border-right:  1px grey solid;
  border-bottom: 1px grey solid;
  border-left:   1px grey solid;
}
    /*end inside menu*/


</style>
<div class="container" style="position:relative;">

<!-- search box -->
<div class="searchbox1 collapse col-12" id="searchbox1" style="background-color: white;position:absolute;top: 0; ">     

      
        <div class="row text-center " >
            <div class="col-12  py-3  px-5">
            <!-- <span class="famenu col-12" style="color:#b47f5f;">Search</span> -->
            <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
            

                <div class="input-group">
                    <input type="text" class="form-control" placeholder="">
                    <div class="input-group-append">
                      <button class="btn btn-secondary" type="button" style="background-color: #dabeb0;border-color: #dabeb0;">
                        <i class="fa fa-search"></i>
                      </button>
                    </div>
                </div>
            </div>
                
        </div>
   
</div>
<!-- end search box -->
<style>

.rightmarginpx {
    right: 0px;
    /*right:-300px;*/
  }

@media (min-width: 576px) { 
  .rightmarginpx {
    right: 0px;
    /*right:-300px;*/
  }

 }


@media (min-width: 768px) { 
    .rightmarginpx {
    right:0px;
    /*right:-300px;*/
  }
 }


@media (min-width: 992px) { 
    .rightmarginpx {
    right:-15%;
    /*right:-300px;*/
  }
 }

@media (min-width: 1200px) { 
  .rightmarginpx {
    /*left: calc(100vw-300px);*/
    /*right:-300px;*/
    right:-15%;
  }

 }

</style>

<div class="panel-body collapse rightmarginpx" id="body1" style="background-color: yellow;z-index: 11;position:absolute;top: 0; width:300px;"> 
      <?php
        //create clickable menu
        $countMainmenu=1;
        foreach ($landingmain as $landingmainrow) {
      ?>    
        <a class="menu1button collapsed greyborder" data-toggle="collapse" href="#multiCollapseMain<?php echo $countMainmenu;?>" role="" aria-expanded="false" aria-controls="multiCollapseMain<?php echo $countMainmenu;?>" style="width:100%;">
      
        <div class="row text-center " >
            <div class="col-12  py-3 ">
            <span class="famenu col-12" style="color:#b47f5f;"><?php echo $landingmainrow->title;?></span>
            <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
            </div>
        </div>

      </a>  

          <!-- echo submenu -->
          <div class="row">
          <div class="col-12">


            <div class="collapse multi-collapse" id="multiCollapseMain<?php echo $countMainmenu;?>">
              <?php
              //echo submenu item
                $countSubmenu=1;
                foreach ($landingsubmenu as $landingsubrow) {
                  if( $landingsubrow->main_id==$landingmainrow->id){


              ?>  
                  <!-- submenu1 -->
                    <a class="menu2button collapsed greyborder" data-toggle="collapse" href="#multiNewSubMenu<?php echo $countSubmenu;?>" role="" aria-expanded="false" aria-controls="multiNewSubMenu<?php echo $countSubmenu;?>" style="width:100%;">
                      <div class="row text-center" >
                          <div class="col-12  py-3 " style="margin-left: 0px;margin-right: 0px;">
                          <span class="famenu col-12" style="color:#5b595a;"><?php echo $landingsubrow->title?></span>
                          <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                          </div>
                      </div>
                      </a>   

                      <div class="col " style="background-color: #ffffff;">
                       <div class="collapse multi-collapse" id="multiNewSubMenu<?php echo $countSubmenu;?>">
                          <!-- content1 -->
                       
                          <div class="row text-center" >
                              <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                              <span class=" " style="">Juvederm 喬雅登</span>
                              <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                              </div>
                          </div>    
                          <!-- end content1 -->

                          <!-- content2 -->
                       
                          <div class="row text-center" >
                              <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                              <span class=" " style="">Restylane 瑞然美</span>
                              <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                              </div>
                          </div>    
                          <!-- end content2 -->

                          <!-- content2 -->
                       
                          <div class="row text-center" >
                              <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                              <span class=" " style="">Redensity 2 熊貓針</span>
                              <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                              </div>
                          </div>    
                          <!-- end content2 -->
                            

                       </div>
                      </div>

                    <!-- end submenu1 -->
              <?php
                    $countSubmenu=$countSubmenu+1;
                  }//if( $landingsubrow->main_id==$landingmainrow->id){
                }//foreach ($landingsubmenu as $landingsubrow) {
              //end echo submenu item
              ?>
            </div>
          </div>
          </div>
          <!-- end echo submenu -->
      <?
          $countMainmenu=$countMainmenu+1;
        }//foreach ($landingmain as $landingmainrow) {

        //end　create clickable menu
      ?>
      <!-- new menu button -->
      <a class="menu1button collapsed greyborder" data-toggle="collapse" href="#multiCollapseExample1" role="" aria-expanded="false" aria-controls="multiCollapseExample1" style="width:100%;">
      
        <div class="row text-center " >
            <div class="col-12  py-3 ">
            <span class="famenu col-12" style="color:#b47f5f;">療程服務</span>
            <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
            </div>
        </div>

      </a>  
      <div class="row">
          <div class="col-12">


            <div class="collapse multi-collapse" id="multiCollapseExample1">
              <!-- submenu1 -->
              <a class="menu2button collapsed greyborder" data-toggle="collapse" href="#multiSubMenu1" role="" aria-expanded="false" aria-controls="multiSubMenu1" style="width:100%;">
                <div class="row text-center" >
                    <div class="col-12  py-3 " style="margin-left: 0px;margin-right: 0px;">
                    <span class="famenu col-12" style="color:#5b595a;">透明質酸</span>
                    <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                    </div>
                </div>
                </a>   

                <div class="col">
                 <div class="collapse multi-collapse" id="multiSubMenu1">
                    <!-- content1 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Juvederm 喬雅登</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content1 -->

                    <!-- content2 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Restylane 瑞然美</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content2 -->

                    <!-- content2 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Redensity 2 熊貓針</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content2 -->
                      

                 </div>
                </div>

              
              <!-- end submenu1 -->

              <!-- submenu2 -->
              <a class="menu2button collapsed greyborder" data-toggle="collapse" href="#multiSubMenu2" role="" aria-expanded="false" aria-controls="multiSubMenu2" style="width:100%;">
                <div class="row text-center" >
                    <div class="col-12  py-3 " style="margin-left: 0px;margin-right: 0px;">
                    <span class="famenu col-12" style="color:#5b595a;">輪廓塑型</span>
                    <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                    </div>
                </div>
                </a>   

                <div class="col">
                 <div class="collapse multi-collapse" id="multiSubMenu2">
                    <!-- content1 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Juvederm 喬雅登</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content1 -->

                    <!-- content2 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Restylane 瑞然美</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content2 -->

                    <!-- content2 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Redensity 2 熊貓針</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content2 -->
                      

                 </div>
                </div>

              
              <!-- end submenu2 -->

              <!-- submenu3 -->
              <a class="menu2button collapsed greyborder" data-toggle="collapse" href="#multiSubMenu3" role="" aria-expanded="false" aria-controls="multiSubMenu3" style="width:100%;">
                <div class="row text-center" >
                    <div class="col-12  py-3 " style="margin-left: 0px;margin-right: 0px;">
                    <span class="famenu col-12" style="color:#5b595a;">緊緻提升</span>
                    <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                    </div>
                </div>
                </a>   

                <div class="col">
                 <div class="collapse multi-collapse" id="multiSubMenu3">
                    <!-- content1 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Juvederm 喬雅登</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content1 -->

                    <!-- content2 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Restylane 瑞然美</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content2 -->

                    <!-- content2 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Redensity 2 熊貓針</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content2 -->
                      

                 </div>
                </div>

              
              <!-- end submenu3 -->
            </div>
          </div>

     </div>  
      <!-- end new menu button -->


      <!-- menu button 2 -->
      <a class="menu1button collapsed greyborder" data-toggle="collapse" href="#multiCollapseExample2" role="" aria-expanded="false" aria-controls="multiCollapseExample2" style="width:100%;">
      
        <div class="row text-center " >
            <div class="col-12  py-3 ">
            <span class="famenu col-12" style="color:#b47f5f;">輕美容</span>
            <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
            </div>
        </div>

      </a>  
      <div class="row">
          <div class="col-12">


            <div class="collapse multi-collapse" id="multiCollapseExample2">
              <!-- submenu1 -->
              <a class="menu2button collapsed greyborder" data-toggle="collapse" href="#multiSubMenu21" role="" aria-expanded="false" aria-controls="multiSubMenu21" style="width:100%;">
                <div class="row text-center" >
                    <div class="col-12  py-3 " style="margin-left: 0px;margin-right: 0px;">
                    <span class="famenu col-12" style="color:#5b595a;">Hifu 緊肌系列</span>
                    <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                    </div>
                </div>
                </a>   

                <div class="col">
                 <div class="collapse multi-collapse" id="multiSubMenu21">
                    <!-- content1 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Juvederm 喬雅登</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content1 -->

                    <!-- content2 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Restylane 瑞然美</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content2 -->

                    <!-- content2 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Redensity 2 熊貓針</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content2 -->
                      

                 </div>
                </div>

              
              <!-- end submenu1 -->

              <!-- submenu2 -->
              <a class="menu2button collapsed greyborder" data-toggle="collapse" href="#multiSubMenu22" role="" aria-expanded="false" aria-controls="multiSubMenu22" style="width:100%;">
                <div class="row text-center" >
                    <div class="col-12  py-3 " style="margin-left: 0px;margin-right: 0px;">
                    <span class="famenu col-12" style="color:#5b595a;">激光Laser 嫩膚袪班 系列</span>
                    <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                    </div>
                </div>
                </a>   

                <div class="col">
                 <div class="collapse multi-collapse" id="multiSubMenu22">
                    <!-- content1 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Juvederm 喬雅登</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content1 -->

                    <!-- content2 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Restylane 瑞然美</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content2 -->

                    <!-- content2 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Redensity 2 熊貓針</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content2 -->
                      

                 </div>
                </div>

              
              <!-- end submenu2 -->

              <!-- submenu3 -->
              <a class="menu2button collapsed greyborder" data-toggle="collapse" href="#multiSubMenu23" role="" aria-expanded="false" aria-controls="multiSubMenu23" style="width:100%;">
                <div class="row text-center" >
                    <div class="col-12  py-3 " style="margin-left: 0px;margin-right: 0px;">
                    <span class="famenu col-12" style="color:#5b595a;">皮膚護理系列</span>
                    <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                    </div>
                </div>
                </a>   

                <div class="col">
                 <div class="collapse multi-collapse" id="multiSubMenu23">
                    <!-- content1 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Juvederm 喬雅登</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content1 -->

                    <!-- content2 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Restylane 瑞然美</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content2 -->

                    <!-- content2 -->
                 
                    <div class="row text-center" >
                        <div class="col-12  py-3 menucontent greyborder" style="background-color: #ffffff;">
                        <span class=" " style="">Redensity 2 熊貓針</span>
                        <!-- <i class="famenu float-right  my-auto" aria-hidden="true" style="z-index: 10;"></i> -->
                        </div>
                    </div>    
                    <!-- end content2 -->
                      

                 </div>
                </div>

              
              <!-- end submenu3 -->
            </div>
          </div>

     </div>    

      <!-- end menu button2  -->

      

    </div>
</div>


<div class="navbar-collapse collapse" id="navbarsExample01" style="">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="collapse" data-target="#dd" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu collapse position-relative" aria-labelledby="dropdown01" id="dd">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
<div id='hint' style="visibility:hidden;">
  
 <!--  <p>This is some hint on how to be safe in this community </p>
  <p>This is another hint on how to be safe in this community </p> -->
  
<button type="button" class="collapsible2 text-center"><span style="color:#b47f5f;">療程服務</span></button>
<div class="content1">
  <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
 <button type="button" class="collapsible2 text-center"><span style="color:#b47f5f;">輕美容</span></button>
<div class="content1">
  <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
  <ul class="navbar-nav mr-auto">

      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>

    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="#">首頁<span class="sr-only">(current)</span></a>
        </li>
    </ul>
  <ul class="nav flex-column flex-nowrap overflow-hidden">
                <li class="nav-item" style="background-color: #fdefe6">
                    <a class="nav-link text-truncate" href="#"><span class="d-none d-sm-inline">療程服務</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link collapsed text-truncate" href="#submenu1" data-toggle="collapse" data-target="#submenu1"><i class="fa fa-table"></i> <span class="d-none d-sm-inline">Reports</span></a>
                    <div class="collapse" id="submenu1" aria-expanded="false">
                        <ul class="flex-column pl-2 nav">
                            <li class="nav-item"><a class="nav-link py-0" href="#"><span>Orders</span></a></li>
                            <li class="nav-item">
                                <a class="nav-link collapsed py-1" href="#submenu1sub1" data-toggle="collapse" data-target="#submenu1sub1"><span>Customers</span></a>
                                <div class="collapse" id="submenu1sub1" aria-expanded="false">
                                    <ul class="flex-column nav pl-4">
                                        <li class="nav-item">
                                            <a class="nav-link p-1" href="#">
                                                <i class="fa fa-fw fa-clock-o"></i> Daily </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link p-1" href="#">
                                                <i class="fa fa-fw fa-dashboard"></i> Dashboard </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link p-1" href="#">
                                                <i class="fa fa-fw fa-bar-chart"></i> Charts </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link p-1" href="#">
                                                <i class="fa fa-fw fa-compass"></i> Areas </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link text-truncate" href="#"><i class="fa fa-bar-chart"></i> <span class="d-none d-sm-inline">Analytics</span></a></li>
                <li class="nav-item"><a class="nav-link text-truncate" href="#"><i class="fa fa-download"></i> <span class="d-none d-sm-inline">Export</span></a></li>
            </ul>
</div>


<script type="text/javascript">
    
    var btn = document.getElementById('menubutton');
var hint = document.getElementById('hint');
// var height = hint.clientHeight;
// var width = hint.clientWidth;
var height = 600;
var width = 520;


console.log(width + 'x' + height);
// initialize them (within hint.style)
hint.style.height = 0 + 'px';
hint.style.width = 520 + 'px';

btn.addEventListener('click', function(){
  if(hint.style.visibility == 'hidden'){
    hint.style.visibility = 'visible';
    //hint.style.opacity = '1';
   
 hint.style.height = height + 'px';
    hint.style.width = width + 'px';
  
  }
  else{
    hint.style.visibility = 'hidden';
    //hint.style.opacity = '0';
    

    hint.style.height = '0';
    hint.style.width = width + 'px';
    hint.style.padding = '0';
   // hint.style.padding = '.5em';
  }

});


</script>
<script>
    // inside menu
var coll = document.getElementsByClassName("collapsible2");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active2");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

// end inside menu
</script>
    <!-- right side menu -->
    <div class="container-fluid" id="rightsidemenu" style="display: none;z-index: 10;position:absolute;top: 10;left: 0;">
    <div class="row">
        <div class="col-2 collapse show d-md-flex bg-light pt-2 pl-0 min-vh-100" id="sidebar">
            <ul class="nav flex-column flex-nowrap overflow-hidden">
                <li class="nav-item">
                    <a class="nav-link text-truncate" href="#"><i class="fa fa-home"></i> <span class="d-none d-sm-inline">Overview</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link collapsed text-truncate" href="#submenu1" data-toggle="collapse" data-target="#submenu1"><i class="fa fa-table"></i> <span class="d-none d-sm-inline">Reports</span></a>
                    <div class="collapse" id="submenu1" aria-expanded="false">
                        <ul class="flex-column pl-2 nav">
                            <li class="nav-item"><a class="nav-link py-0" href="#"><span>Orders</span></a></li>
                            <li class="nav-item">
                                <a class="nav-link collapsed py-1" href="#submenu1sub1" data-toggle="collapse" data-target="#submenu1sub1"><span>Customers</span></a>
                                <div class="collapse" id="submenu1sub1" aria-expanded="false">
                                    <ul class="flex-column nav pl-4">
                                        <li class="nav-item">
                                            <a class="nav-link p-1" href="#">
                                                <i class="fa fa-fw fa-clock-o"></i> Daily </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link p-1" href="#">
                                                <i class="fa fa-fw fa-dashboard"></i> Dashboard </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link p-1" href="#">
                                                <i class="fa fa-fw fa-bar-chart"></i> Charts </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link p-1" href="#">
                                                <i class="fa fa-fw fa-compass"></i> Areas </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link text-truncate" href="#"><i class="fa fa-bar-chart"></i> <span class="d-none d-sm-inline">Analytics</span></a></li>
                <li class="nav-item"><a class="nav-link text-truncate" href="#"><i class="fa fa-download"></i> <span class="d-none d-sm-inline">Export</span></a></li>
            </ul>
        </div>
        <div class="col pt-2">
            <h2>
                <a href="" data-target="#sidebar" data-toggle="collapse" class="d-md-none"><i class="fa fa-bars"></i></a> Content </h2>
            <h6 class="hidden-sm-down">Shrink page width to see sidebar collapse</h6>
            <p>Codeply editor wolf moon retro jean shorts chambray sustainable roof party. Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings flannel Brooklyn literally small batch, mumblecore PBR try-hard kale chips. Brooklyn vinyl lumbersexual bicycle rights, viral fap cronut leggings squid chillwave pickled gentrify mustache. 3 wolf moon hashtag church-key Odd Future. Austin messenger bag normcore, Helvetica Williamsburg sartorial tote bag distillery Portland before they sold out gastropub taxidermy Vice.</p>
        </div>
    </div>
</div>


    <!-- end right side menu -->