@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');

@font-face {
	font-family:'DFLi';
	src:url('DFLi.ttf');
	font-weight:bold;    
}

@font-face {
	font-family:'Microsoft JhengHei';
	src:url('Microsoft JhengHei.ttf');
	font-weight:normal;    
}

@font-face {
	font-family:'Microsoft JhengHei';
	src:url('Microsoft JhengHei Bold.ttf');
	font-weight:bold;
    
}

/*------------------------------------*\
    MAIN
\*------------------------------------*/
/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	font-family:'Raleway', sans-serif;	
	color:#000;
	font-size:16px;
	line-height:22px;
	overflow-x: hidden;
	font-weight:500;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}
.clear:after { clear:both;}

.clear {*zoom:1; clear:both;}

img {max-width:100%;	vertical-align:bottom;}

a {	color:#000;	text-decoration:none;}

a:hover {text-decoration:none; color:inherit;}

a:focus {outline:0;text-decoration:none;}

a:hover, a:active {	outline:0;}

input:focus, textarea:focus, button:focus {	outline:0;	border:0;}

ul,li,h1,h2,h3,h4 {list-style-type:none;margin:0;padding:0}

p:not(:last-child){margin-bottom:25px;}

p:last-child{margin-bottom:0px;}



h2{font-size:30px;}



/*------------------------------------*\
	        HEADER
\*------------------------------------*/

.header {    position:relative;      }

.lang a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #edf4da;
    line-height: 40px;
    text-align: center;
    border-radius: 30px;
    font-size: 14px;
    color: #336600;
    font-weight: 700;
}

.header .container {    position: relative;  }

.nav_area > ul > li {     position: relative;   display: inline-block;    padding: 0 15px; line-height:50px;   }

.nav_area ul li:last-child{padding-right:0; border-right:0;  }

.nav_area ul li a { color: #000; font-size: 16px; text-transform:uppercase; display: inline-block; border-bottom:3px solid transparent;    font-weight: 400;}

.nav_area > ul > li:hover > a{ border-bottom:3px solid #336600;  }

ul.sub-menu {  position: absolute; background: #3ab54a; z-index: 555; text-align: left;  padding: 10px 0;   left: 0; }

ul.sub-menu li a{color:#fff; line-height:20px;  padding:3px 10px 7px 10px; font-size:15px; display:inline-block; text-transform:capitalize;   } 

ul.sub-menu li{	display:block; }

ul.sub-menu li a{width:90%;}


ul.sub-menu li.menu-item-has-children {    position: relative;  }

ul.sub-menu li.menu-item-has-children .arrow{color:#fff;  padding-left: 0;  }

span.arrow  {  font-size:16px;   }
.menu-bar ul.menu {color: #fff;
    position: relative;
    z-index: 11;
}


.footer {
    padding: 40px 0;
    position: relative;
	background-color:#fff;
    background: url(../image/footer-bg.png) no-repeat top left;
    background-size: 45% ;
    background-position: 0 -18px;
}

.footer h3 {font-size:26px; color:#336600; font-weight:700;  padding-bottom:10px;}

.wrapper{position:relative;}

.copyright{font-size:14px;}

a.btn {    display: inline-block; background: #9bc130; font-size: 14px; font-weight: 500; padding: 8px 25px; border: 2px solid #9bc130;	transition:all .4s; border-radius:20px; color:#fff; }

a.btn:hover {background:#fff;	color:#9bc130; }

.copyright span a:not(:last-child):after {    content: '|';    color: #9bc130;    font-size: 20px;    padding: 0 8px;  }

.chat-box {    position: fixed;    left: 10px;    bottom: 10px;    z-index: 9; }



.chat-box h4{color:#3ab54a; font-size:20px;}

.footer h3 img {    vertical-align: middle;  }

/*------------------------------------*\
	        MAIN
\*------------------------------------*/

.home-slider .item {	height:450px;	display:flex; 	align-items:center;	    background-size: cover;    background-position: center;}

.home-slider h2 {font-size:52px; color:#336600; font-weight:800;  text-transform:capitalize; }
.home-slider p {padding:10px 0; margin:0;color:#336600; font-size:20px;}


.home-slider.owl-theme .owl-nav.disabled+.owl-dots {
    padding: 0 15px 30px;
    max-width: 1140px;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.abt-desc h2{font-size:36px; font-weight:700; color:#9bc130; }
.abt-desc h3{font-size:22px; font-weight:700; color:#336600; }

.abt-desc h3:after {content:''; display:block; width:70px; height:2px; background:#9bc130; margin-top:15px; }

.pro-item {    background: #fff;    padding: 10px; overflow:hidden; }
.pro-item  > a > div{overflow:hidden;}
.pro-item  > a > div:hover{  
transform:scale(1.1);
	-webkit-transform: scale(1.1);
    -webkit-transition: all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
	
	}
.product-section {	background:url(../image/pro-bg.png);	background-repeat:no-repeat;  }

.product-section h2 {
    font-size: 32px;
    font-weight: 700;
    color: #336600;
    background: #fff;
    padding: 8px 15px;
	margin:0 auto 30px;
	display:table;
}

.pro-item h4 {color:#336600; font-weight:700; font-size:19px; padding-bottom:5px;  border-top: 1px solid #b4d34a;    padding-top: 15px;  }
.pro-item h5 {color:#000; opacity:.7; font-weight:700; font-size:16px;}
.pro-item h6 {color:#000; font-weight:700; font-size:16px;}

#product-slider .owl-nav{display:flex}
.product-slider {    padding: 0 55px;  }
.product-slider .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    display: flex;
    justify-content: space-between;
}

.product-slider.owl-theme .owl-nav button{	height:35px; width:35px; border-radius:35px; background:#6a8f42; color:#fff; }  

/*------------------------------------*\
	        SUBPAGE
\*------------------------------------*/


.banner{margin-bottom:35px;}

.banner {position:relative;overflow:hidden;}

h1.page-title {font-size:55px; text-transform:uppercase; line-height:62px; color:#fff;  position:absolute; bottom:0px;
padding:60px 35px 20px; }

h1.page-title:before {
    content: '';
    display: block;
    width: 300px;
    height: 300px;
    background: rgb(51 102 0 / 40%);
    position: absolute;
    border-radius: 100%;
    top: 0;
    left: 0;
}

h1.page-title  span{z-index:99;position:relative;}

.banner img {    width: 100%; height:350px;  object-fit: cover; }

.sub-banner img {    height: 330px;    object-fit: cover;  }


.sidebar .widget-title{background:#626ec7 ; color:#fff; padding:8px 15px;}

.sidebar > ul {  border-top:10px solid #95bb27;  background: #f0f8e6;     }


.sidebar > ul >li > a {
    font-size: 16px;
	line-height:16px;
    color: #000;
    display: flex;
	 padding: 10px 10px;
    justify-content: space-between;
    align-items: center;
	font-weight:bold;
}

.sidebar > ul > li {border-bottom:1px dashed #9bc130;}

.sidebar > ul >li:hover > a , .side-sub-menu li:hover a{color:#95bb27;}


.sidebar > ul >li  a  i {
    display: inline-block;
    border: 2px solid #95bb27;
    border-radius: 100%;
    color: #95bb27;
    height: 25px;
    width: 25px;
    text-align: center;
    font-size: 16px;
    line-height: 25px;
}

.side-sub-menu {display:none; padding:0 15px;}

.side-sub-menu li {padding-bottom:8px;}
.side-sub-menu li a {font-size: 14px;	line-height:16px;justify-content: space-between;display: flex;
    align-items: center; }

.sidebar  .side-sub-menu >li > a > i {font-size:11px; height:20px; width:20px; line-height:20px;}

label.side-title {
    background: #a9cf4a;
    color: #fff;
    display: block;
    font-size: 25px;
	font-family:'Microsoft JhengHei';
    font-weight: bold;
    padding: 15px 20px;
	
}

.sidebar{margin-bottom:20px;}

.pagination {    display: block;    margin: 0px;  }
.pagination .link {      padding-top: 7px;}
.pagination a {display: inline-block; height: 30px; width: 30px; vertical-align: middle; text-align: center; line-height: 30px; margin: 0 4px;  }
.pagination a.active {    background: #336600;    color: #fff; }
.pagination a i {    height: 30px;    line-height: 30px; }


#button.show {
    opacity: 1;
    visibility: visible;
}
#button {
    display: inline-block;
    background-color: #999999;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 100%;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
	cursor:pointer;
}
#button::after {
    content: "\f106";
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    font-style: normal;
    font-size: 30px;
    line-height: 45px;
    color: #fff;
}


.sec-title {
    font-size: 31px;
    color: #000;
    border-bottom: 1px dashed #336600;
    padding: 0 0 10px 0;
    margin-bottom: 20px;
}
.sec-title:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 35px;
    background: #8cb168;
    vertical-align: middle;
    margin-right: 15px;
}

.prod-bg{
	background:url(../image/prod-bg.png) no-repeat top center; 
}

.single-product h4 {font-size:18px; line-height:28px; font-weight:700; padding:2px 0;}
.prize{ font-size:18px; color:#95bb27; }

.pro-desc h5 {color:#336600; font-size:18px; line-height:28px; font-weight:700; }

.mid-title{
	font-size:36px; color:#9bc130; font-weight:500;
}

.green{color:#336600; }

.text-banner {
	background:#f3ffdb; padding-top:20px;
}

.top-title{background:#9bc130;}
.top-title h3{ font-size:26px; color:#fff; font-weight:500; }
.img-div {background:#f3ffdb; padding:25px;}

/*------------------------------------*\
	        MIN WIDTH
\*------------------------------------*/

.mb-40 {    margin-bottom: 40px;  }
ul.sub-menu li.menu-item-has-children i:before {    content: "\f105"; }





@media(min-width:992px){
	
	
.nav_area ul li:hover ul.sub-menu {	display:block;}

.nav_area > ul > li ul.sub-menu {  transform-origin: 50% 0;  transform: scaleY(0) translateZ(0);  transition: transform 0.3s, opacity 0.3s; display: block;  }

ul.sub-menu {min-width: 150px;}

ul.sub-menu li ul.sub-menu {    left: 100%;    top: 0;    width: 100%;  }

.nav_area > ul > li:hover > ul.sub-menu, .nav_area ul.sub-menu > li:hover > ul.sub-menu {   transform: scaleY(1) translateZ(0);   }

.nav_area ul li:hover ul.sub-menu {    display: block; }
	
ul.menu{    display: block !important;  text-align:right; }

span.arrow{display: inline-block; padding-left:5px;}

label.toggle {    display: none;  }

.more-btn{margin-right:40px;}





}


@media(min-width:768px){	label.side-title { pointer-events:none;}

ul.sidemenu {    display: block !important;  }

.alignright{float:right; margin:0 0 20px 20px;}
.alignleft{float:left; margin:0 20px 20px 0;}



}




/*------------------------------------*\
	        MAX WIDTH
\*------------------------------------*/


@media (max-width:1100px){

	.nav_area > ul > li {padding-right:15px;}
	.header:after {display:none;}
	.nav_area > ul > li {		padding: 0 10px 0 0;  }
	.nav_area > ul > li a {    font-size: 16px;  }

}

@media (max-width:1024px){
    .home-slider .item{
        height:311px;

    }
    .home-slider h2{
        font-size: 42px;
    }


}


@media (max-width:991px){
	
    .home-slider .item{
        height:280px;

    }
    .home-slider h2{
        font-size: 35px;
    }
	
	.container {    max-width: 100%;  }

	
	
	ul.menu  { 
    position: fixed;
    width: 80%;
    left: 0;
    text-align: left;
    background: #3ab54a;
    z-index: 2;
    padding: 15px 10px;
    z-index: 100;
    top: 0;
    height: 100%;
    left: -100%;
    transition: all .4s;}
	
	.menu.open {left:0;}	
	
	.header .row {    align-items: center;  }
	
	.toggle {      color: #fff;    font-size: 22px;    margin: 0;    text-align: right;    display: block;   right: 15px;    background: #000;     padding: 5px 8px; cursor:pointer; margin-top:5px;     float: right;} 	
	
	.menu-side { position: initial;    }
	
	
	
	.nav_area ul li a {    line-height: 40px;    font-size: 14px; color:#fff; }
	
	nav.nav_area ul li{display:block;     position: relative;    border: 0; }
	
	span.arrow {
    position: absolute;
    right: 10px;
    color: #fff;
    top: 10px;
    width: 40px;
    text-align: center;
    height: 30px;
	}
	
	
	
	ul.sub-menu {    display: none;    position: relative;  	    background: transparent; padding:0; }
	
	
	
	ul li .sub-menu li a {    line-height: 14px;  }
	
	
	.header .container {    position: initial; }
	ul.sub-menu span.arrow {    right: 10px;    text-align: right;  }
	
	span.arrow.close-icon i:before {    content: '\f106';  }
	ul.sub-menu li.menu-item-has-children  span.arrow.close-icon i:before {    content: "\f106";  }
	
	.home-slider.owl-carousel .owl-item img{height:300px;}


	
	.banner img {height:250px;}
	
	
	
	
	
}


@media (max-width:767px){
	.abt-desc h2, .mid-title{ font-size:26px; }
	.abt-desc h2 , .footer h3 { font-size:20px; }
	
	.footer h3 img {    width: 45px;    padding-right: 10px !important;  }
	.chat-box{display:none;}
	
	h1.page-title {font-size: 28px;    padding: 30px 40px 10px;}
	h1.page-title:before {height:200px; width:200px;}
	
	.text-banner div {    padding: 10px;  }
    .home-slider .item{
        height:240px;

    }
    .home-slider h2{
        font-size: 30px;
    }

    .banner img {height:200px;}
}


@media (max-width:576px){
	
	.home-slider.owl-carousel .owl-item img {height:200px;}
	.home-slider .item{
    height:150px;

}
.home-slider h2{
    font-size: 20px;
}

.home-slider p {
 
    font-size: 15px;
}
.banner img {height:150px;}
h1.page-title {font-size: 23px; }
}


@media (max-width:500px){

    .home-slider h2{
        font-size: 15px;
    }
    
    .home-slider p {
     
        font-size: 12px;
    }
    .banner img {height:100px;}

}