/************
ALL
************/
*, ::after, ::before {box-sizing: border-box;}
body,button,a{font-family: oswald,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica Neue,Helvetica,Arial,"LiHei Pro","黑體-繁","微軟正黑體","Microsoft YaHei",sans-serif; font-weight: 300; color: #999; text-size-adjust: 100%;}
body {scroll-behavior: smooth;}
img{width: 100%;}
img:not([src]) {opacity: 0; background: no-repeat left top / cover;background-image: linear-gradient(to right, rgb(255, 255, 255), rgb(168, 168, 168));}
input[type="file"]{display: none;}
[draggable="true"] {user-select: none;-moz-user-select: none;-webkit-user-select: none;   -ms-user-select: none;}
.sidenav-overlay{z-index: 59;}


#socialShare{position: fixed; bottom: 0; right: 1.5%; width: 96px; text-align: center; z-index: 9;}
#socialShare li{margin-bottom: 15px;}
#socialShare img{max-width: 52px;}
#socialShare li .title{ font-size: 75%;} 
footer{padding-bottom: 0;}

@media (min-width:320px) and (max-width:1024px) {
   footer{padding-bottom: 96px;}
   #socialShare{background: #efefef; width: 100%; right:0;}
   #socialShare ul{ display: -webkit-flex; display: flex; margin-block-end: 0;}
   #socialShare li{ -webkit-flex: 1; flex: 1;  text-align: center; }  
   #socialShare img{max-width: 96px; width: 50%;}
 }

 @media (min-width:768px) and (max-width:1024px) {
   #socialShare li .title{ font-size: 100%;} 
 }


/************
Fix materializecss 
************/
nav .brand-logo{
   width: 100%;   height:100%;   max-width: 150px;   min-width: 100px;   
   max-height: 50px;   min-height: 35px;   border: 1px dashed transparent;   position: relative  ;
}
nav #logout a{color: #666; font-size: 1.1rem; height: 1.5rem; }
nav #logout a i{line-height:40px;}
nav, nav a.sidenav-trigger{line-height:40px;}

.page-footer{background: #fff; color: #888; padding-top:0; }
.page-footer .footer-copyright{color: #888;}
.flex{display: flex; display: -webkit-box; display: -webkit-flex;}
.flex .flex_item{ -webkit-box-flex: 1; -webkit-flex: 1;  flex: 1;}
.clearfix{clear: both; display: block; width: 100%; border: 0; height: 1px; padding: 0; margin: 0; line-height: 1px;}
.btn-roundcorner{border-radius:50px;}

.card .card-content{height: 13rem; overflow: hidden; font-family:oswald,-apple-system,BlinkMacSystemFont,segoe ui,"Roboto","Helvetica Neue",Helvetica,Arial,"LiHei Pro","黑體-繁","微軟正黑體","Microsoft YaHei",sans-serif;}
.card .card-content .card-title{font-size: 18px; height: 3rem; line-height: 1.5rem; overflow: hidden;}
.card .card-content .card-title b{margin: 0 5px;}
.card .card-content .card-desc{font-size: 14px; height: 1.4rem; line-height: 1.3rem; overflow: hidden; padding-bottom: 8px;}
.card .card-content .price{font-size: 1.5rem; padding-top:.3rem;}
.card .card-content .card-btnbox{margin-top: 8px;}
.card .card-image {width: 100%;  -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; }
.card .card-image img{width: 100%; height:250px; object-fit:cover;}
.card .card-action{padding:12px 0 ; margin-top: 8px;}
.card.horizontal .card-stacked .card-content{overflow: hidden; padding:16px;}	
.meunlist .card .card-image img{width: 100%; min-height:200px; object-fit:cover;}	
.table-of-contents a.active{color:#000; }

.modal .modal-footer .btn-flat{margin: 6px;}
.modal .modal-close{border: 1px solid #999; border-radius: 20px; margin: 6px;}
.modal h4{padding:20px 0 60px 0;}

@media screen and (max-width: 1280px) {
   .modalbox .modal{width: 80%; }
   .modalbox .container{max-width: 100%;}
   .modal h4{padding:10px 0 30px 0;}  

   .card.horizontal{display:block;}
   .card.horizontal .card-image{max-width: 100%;}
   .card.horizontal .card-stacked .card-content{padding:8px 16px;}
   /* .card .card-content{height:13rem;} */
}


/************
customize 
************/
.colour {width: 8rem; height: 3rem; border:none; border-bottom:  1px solid #4CAF50; background: transparent; }
.desc {line-height: 1.8em; padding-top:50px;}
.mainbtn {margin: 2rem auto; border-radius: 50px; padding: 13px 70px; height:auto; font-size: 1.1rem;}
#scrollspy{ line-height:2rem; position: fixed;  right: 1.5%;  top: 15%;  border:none; padding: 10px;}


/************
header
************/
header{width: 100%; padding: 10px 0; min-height: 30px;background-color: #fff; border-bottom: 2px solid #27d0ca; position: fixed; top: 0; left: 0; z-index: 100;}
header nav{background-color:#fff; box-shadow: none; -webkit-box-shadow:none; color: #000;}
header nav ul a{color: #fff;}
header.backendheader nav{height: 40px;}
header.backendheader nav a.brand-logo {
   width: 120px;
   height: 40px;
   display: block;
   background: url("/assets/img/blogo.png") center center no-repeat;
   background-size: contain;
}
nav ul a {
   padding: 0 10px;
}


/************
main
************/
main{width: 100%; min-height: 100%; padding-top: 0; overflow: hidden; position: relative;}
main .sidenavbtn{
    cursor: pointer;
    border-bottom: 1px solid #dbdbdb;
    height: 43px;
    position: fixed;
    text-align: center;
    min-width: 100px;
    top: 60px;
    z-index: 80;
    left: 43px;
    background-color: #ececec;
    padding: 10px 5px;
    border-radius: 4px 4px 0 0;
    box-shadow: 5px -9px 15px rgba(0,0,0,.2);
    -moz-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -webkit-transform: rotate(90deg);
    -o-transform-origin: left top;
    -o-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -ms-transform: rotate(90deg);
}

#mobile-use {
   background-color: #333;
}
#mobile-use a{
   color: #fff;
}
#mobile-use .closeside{
   padding: 15px;
   color: #fff;
}

#main-wrapper .menubox a

#main-wrapper .menubox a{color: #fff;}
#main-wrapper .menubox{
    width: 100%;
    padding: 12px 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    background: -moz-linear-gradient(top,rgba(0,0,0,.5) 0%,rgba(0,0,0,.5) 1%,rgba(0,0,0,.01) 99%,rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(top,rgba(0,0,0,.5) 0%,rgba(0,0,0,.5) 1%,rgba(0,0,0,.01) 99%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.5) 1%,rgba(0,0,0,.01) 99%,rgba(0,0,0,0) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000',endColorstr='#00000000',GradientType=0)
}


/************
section sidemeun
************/
#sidemeun {width: 300px;}
#sidemeun .sidenav{background: #ececec;}
#sidemeun .sidenav li a{ background: #fff;}

#sidemeun .sidenav li.active{background-color:#ececec;}
.sidenav .containerbox{padding:0 18px;}
.sidenav .user-view{padding: 18px; margin-bottom: 18px; position: relative;}
.sidenav .user-view .closeside{position: absolute; top: 10px; right: 10px;}
.sidenav .user-view .circle{object-fit: cover;}
.sidenav .user-view .username{color:#222; padding: 8px; margin-left: 8px;}
.sidenav .user-view .username i {font-size: 1.5rem; margin-right: 8px;}
.sidenav .user-view .username span {font-size: 1.2rem; margin-right: 8px;}
/* .sidenav .user-view .usermeun{} */
.sidenav .user-view .usermeun li{margin:0 5px;}
.sidenav .user-view .usermeun li a{padding: 0; text-align: center; border: 1px solid #999; border-radius:50px; line-height: 36px; height: 36px;;  }
.sidenav .side_tool li{margin:0 5px;}
.sidenav .side_tool li a{padding: 0; text-align: center; border: 1px solid #999; border-radius:50px; font-size: 1em; }
.sidenav .side_tool li a i{font-size: 1em; padding:0 10px; margin:0 0 0 20px;}

#sidemeun .side_layout .collapsible{border: none; box-shadow: none; -webkit-box-shadow:none; }
#sidemeun .side_layout .collapsible-header{width: calc(100% - 10px); background: #fff; border-radius:50px; color: #666; font-size: 16px; font-weight: bold; margin: 8px auto;}
#sidemeun .side_layout .collapsible-header .icon{display: inline-block; width: 15%; text-align: center;}
#sidemeun .side_layout .collapsible-header .title{display: inline-block; width: 65%; height: 2.5rem; overflow: hidden;}
#sidemeun .side_layout .collapsible-header .title small{margin-left: 3px;}
#sidemeun .side_layout .collapsible-header .title small i{font-size: .8em;}
#sidemeun .side_layout .collapsible-header i{margin: 0 px; font-size: 1.1rem;}

#sidemeun .side_layout .collapsible-body {width: calc(100% - 10px); margin: 0 auto; border: none; background: #fff; border-radius:20px; }
#sidemeun .side_layout .collapsible-body a{font-size: .9rem; color: #666; padding: 0 5px;}
#sidemeun .side_layout .collapsible-body a i{margin:0 3px;}
#sidemeun .side_layout .collapsible-body a:hover{ background: #fff; color: #000;}
#sidemeun .side_layout .collapsible-body a:hover i{ background: #fff; color: #000;}

#addsection{margin-top: 24px;}
#addsection a{display: block; background: #fff; color: #666; font-weight: bold; border-radius:50px; margin: 0; font-size: 16px; }
#addsection a i{margin: 0; font-size: 1.1em;}

.sliderbox{width: 100%; max-height: 800px; }
.sliderbox img{object-fit:contain; }


/************
main-section
************/
#main-wrapper{
   display: block; position: relative; width: 100%;  min-height: 100%; float: right; 
   -webkit-transition: background .2s linear,border-radius 1s ease-in 1s,max-width .3s;
   transition: background .2s linear,border-radius 1s ease-in 1s,max-width .3s;
}
#main-wrapper .sectionbox{position: relative;}

#main-wrapper header,#main-wrapper header nav{border: none; background-color: transparent;}

#main-wrapper header nav{ width: 100%; max-width: 1200px; min-width: 320px; margin: 0 auto;  position: relative;}

#main-wrapper .section-wrapper {width: 100%; position: relative;}
#main-wrapper .sectionbox .btn-editsection{position: absolute;  top: 100px;  right: 10px;  font-size: .918rem;  z-index: 50;}
#main-wrapper .sectionbox .btn-editsection a{
   display: inline-block; font-size: .918rem;  cursor: pointer; color: #555;
   min-width: 90px; padding: 5px 10px 5px 15px; margin-left: 10px;  text-align: center;  line-height: 30px;
   border-radius: 50px;  background-color: #fff; 
   box-shadow: 5px 5px 15px rgba(0,0,0,.2), 0 5px 18px rgba(0,0,0,.22);
}

.section-wrapper .menubox{position: absolute;  width: 100%;  top: 0;  left: 0;}
/*.section-wrapper .sectionbg {
   width: 100%; min-height: 500px;  padding: 50px 0; overflow-y: hidden;background-size: cover;
   background-repeat: no-repeat; background-position: center center; display: -webkit-flex;
   display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background-attachment: fixed;
   
}*/
.section-wrapper .sectionbg {
   width: 100%; min-height: 500px;  padding: 50px 0; overflow-y: hidden; 
   background-size: cover;
   background-repeat: no-repeat; background-position: center center; display: -webkit-flex;
   display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background-attachment: scroll !important;
   
}
/* @media screen and (min-width:480px) {
   .section-wrapper .sectionbg {
     background-attachment: fixed !important;
   }
 } */


.section-wrapper .sectionbg.googlemap{padding: 0; min-height: auto;}
.section-wrapper .sectionbox .mainbox{min-height: 100vh; position: relative;}
.section-wrapper .sectionbox .mainbox .contentbox{position: absolute; bottom: 20%;}
.section-wrapper .sectionbox .mainbox .imgbox{max-width: 500px;  margin:8em auto 0 auto;  display: table;}
.section-wrapper .sectionbox .sociallist{display:block; text-align: center;  margin: 3rem auto;}
.section-wrapper .sectionbox .sociallist li {align-items: center;}
.section-wrapper .sectionbox .sociallist li a{display:inline-block; border: 1px solid #ccc; border-radius:50%; text-align: center; padding:2.4rem 2.5rem 1.8rem 2.5rem ; font-size: 2rem; background: #fff; }
.section-wrapper .sectionbox .sociallist li a img{width: 2.5rem;}
.section-wrapper .sectionbox .video video{margin: 2rem 0 ;}
.section-wrapper .sectionbox .mapbox{width: 100%; height: 450px; position: relative;}
.section-wrapper .sectionbox .mapbox iframe{width: 100%; height: 100%;}
/* .section-wrapper .sectionbox .listbox ul{display: flex;  flex-wrap: wrap;} */

.section-wrapper .sectionbox .meunlist .card{ margin:8px 4px;  }
.section-wrapper .sectionbox .meunlist .card .card-image{padding: 0;}
.section-wrapper .sectionbox .videobox iframe{width: 100%; height: 650px;}

/************
modal
************/
.modal-addsection .card .card-content{padding: 8px;}
.modal-addsection .card .card-title {font-size: 1.3em; padding: 4px 0;}
.modalEditSection .uploadimg{max-width:100px; border: 1px solid #ccc; position: relative;}
.modalEditSection .uploadimg.imgbox img{object-fit: cover; width:100%; height:100%;}
.modalEditSection .uploadimg.imgbox .delitem{position: absolute; right:-15px; top:-10px; font-size: 1.5rem; z-index: 99; color: #888}
.modalEditSection .uploadimg.imgbox {width:100px; height: 100px; border: 1px solid #ccc; position: relative;}

.modalEditSection .carditem{margin-top: 8px; margin-bottom: 8px; position: relative;}
.modalEditSection .carditem .cardcontent{border: 1px solid #ececec;}
.modalEditSection .carditem .imgbox{height: 190px; overflow: hidden; position: relative; display: flex; display: -webkit-flex; align-items: center;  justify-content: center; background-color: #ececec; }
.modalEditSection .carditem .imgbox img{max-width: 100%; object-fit: cover;}
.modalEditSection .carditem .input-field{margin-top: 0; margin-bottom: 0;}
.modalEditSection .carditem input{text-align: center;  width: 100%; margin: 0; border-radius: 4px; border: 1px dashed #d4d4d4; height: 3rem; -webkit-box-shadow: none;
   box-shadow: none; padding: 0;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;}
.modalEditSection .carditem.additem{ text-align: center;}
.modalEditSection .carditem.additem .additembox{height: 190px; color: #000; background-color: #ececec;}
.modalEditSection .carditem.additem .additembox i{margin-top: 70px; color: #fff;}
.modalEditSection .carditem .delitem{position: absolute; right:-5px;top:-10px; z-index: 99;}
.modalEditSection .uploaditemimg{max-width: 100px; z-index: 999; position: absolute; bottom: 10px;}	
#modalProductPopup .modal-content h4{padding:0;}
#modalProductPopup .modal-content h6{padding:0;}
#modalProductPopup .modal-content .pricebox{text-align: right;  margin:1em 0 2em 0; }
#modalProductPopup .modal-content .pricebox span{font-size:2rem; padding:0 0 0 0;}
#modalProductPopup .modal-content .contentbox .addtocar{ margin:1em 0; }
#modalProductPopup .modal-footer{padding:0 32px; text-align:left;}
#modalProductPopup .modal-footer h5{padding:0 .5rem;}

@media screen and (max-width: 768px) {
   #main-wrapper .sectionbox .btn-editsection {
      top: 20px;  right: 10px; z-index: 99;
   }
   .section-wrapper .sectionbox .sociallist li{margin:8px 0; }
   .sidenav li{line-height: 42px;}
   .section-wrapper .sectionbox .videobox iframe{width: 100%; height: 200px;}
   nav .brand-logo {
      left: 0;
      transform: translateX(0%);
   }
}
@media screen and (min-width: 1679px) {
   header nav ul a{font-size: 1.2rem;}
}

/*==============meunbox Component Css ==============*/




/*============== 8. Menu ==============*/
.meunbox2 ul {	list-style: none;}
.meunbox2 .menu-tab{display: none; margin: 50px 0;}
.meunbox2 .menu-list-item__title{font-weight: 700; font-size: 20px; flex: 1 0 auto;}
.meunbox2 .d-flex{display: -ms-flexbox!important;  display: flex!important;}
.meunbox2 .tabs{height: auto;}
.meunbox2 .tabs .tab a{
   font-size: inherit;
   padding: inherit;

}
.meunbox2 .menu-nav__link.u-color-primary {
	padding-bottom: 2px;
   border-bottom: 2px solid #dcb36e;
   
}


.meunbox2 .menu-tab:first-of-type {
	display: block;
}

.meunbox2 .menu-tab__img {
	position: absolute;
	top: -100px;
	right: 0;
	opacity: 0.5;
	z-index: -1;
}

.meunbox2 .menu-list-item {
	margin-bottom: 18px;
}

.meunbox2 .menu-list-item__title {
	font-weight: 700;
	font-size: 20px;
	flex: 1 0 auto;
}

.meunbox2 .menu-list-item sup {
	color: #575757;
    margin-left: 2px;
    font-family: "Lato";
    font-size: 12px;
    font-weight: 400;
}

.meunbox2 .menu-list-item__desc {
	color: #575757;
	max-width: 80%;
   font-size: 14px;
   font-family: 'Lato', sans-serif;
   font-style: italic;
   webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.7;
   letter-spacing:1.5px;
}

.meunbox2 .menu-list-item__desc,
.meunbox2 .menu-list-item__price {
  flex: 1 0 auto;
}

.meunbox2 .menu-list-item__dots {
  flex: 0 1 auto;
}

.meunbox2 .menu-list-item__dots::before {
    display: block;
    overflow: hidden;
    content: ".....................................................................................................";
    height: 2em;
    padding: 0 6px;
    word-break: break-word;
    float: right;
}


/************
index card for here
************/
.card.here {
   display: flex;
   align-items: stretch;
   height: 100%;
}

.card.here .card-image {
   flex: 40%;
}

.card.here .card-image img {
   height: 100%;
}

.card.here .card-content {
   height: auto;
   padding: 5px;
   flex: 60%;
}

.card.here .card-content .card-title {
   font-size: 12px;
}

.card.here .card-content .card-btnbox {
   margin-bottom: 8px;
}