@charset "utf-8";
@import "slider.css";
:root{--main-color:#85b556; --hover-color:#658122; --primary:#85b556; --primary-hover:#658122;}
*{font-family:"Microsoft JhengHei";}
h1{font-size:28px; color:var(--main-color);}
a:hover{text-decoration:none;}
input:focus, select:focus, textarea:focus, button:focus{outline:0;}

/* header */
header{border-bottom:3px solid #999;}
header > div{padding:1rem 1rem 0;}
header .logo a{display:flex; align-items:center; color:#333;}
header .logo a img{width:50px; margin-right:5px;}
header .logo a h1{margin:0;}
header .function a{display:inline-block; width:40px; color:#333; text-align:center;}
header .function a:hover{color:var(--main-color);}
header .function a.icon-cart{position:relative;}
header .function a.icon-cart .badge{position:absolute; right:0; top:0; background-color:var(--main-color);}
header .function a i.fa{font-size:20px; line-height:50px;}
.navbar-light .navbar-nav .nav-link{width:100%; font-size:1.2rem; color:#333;}
.search-bar{display:inline-block; margin:8px; border:1px solid var(--primary); vertical-align:middle;}
.search-bar input, .search-bar button{float:right; background-color:#fff; padding:5px 10px; border:0; -webkit-appearance:none; -moz-appearance:textfield;}
.search-bar input{float:left; width: calc(100% - 40px);}
.search-bar button:hover{background-color:var(--primary); color:#fff;}
.search-bar button i:before{font-size:1.2rem; line-height:1.2rem;}
.jssor_1{position:relative; margin:0 auto; top:0px; left:0px; width:1200px; height:400px; overflow:hidden; visibility:hidden;}
.js_slide{cursor:default; position:relative; top:0px; left:0px; width:1200px; height:400px; overflow:hidden;}
.pc-only{display:block;}
.mobile-only{display:none;}
@media screen and (max-width:400px){.jssor_1{position:relative; margin:0 auto; top:0px; left:0px; width:400px; height:400px; overflow:hidden; visibility:hidden;}
  .js_slide{cursor:default; position:relative; top:0px; left:0px; width:400px; height:400px; overflow:hidden;}
  .mobile-only{display:block;width: 400px;}
  .pc-only{display:none;}
}

/* index about & news */
.bn-more{float:right; padding:5px; font-size:12px; line-height:16px; text-transform:uppercase;}
.i-about h1, .i-news h1, .i-hot h1{margin-bottom:1.5rem; padding-bottom:.5rem; border-bottom:1px solid var(--main-color);}

/* index hot */
.i-hot{background-color:#efefef; padding:40px 0 55px;}
.i-hot > .row{width:calc(100% - 100px); max-width:1475px; margin:0 auto;}
.i-pro-title{position:relative; width:100%; color:#2e363a; padding:0 0 15px; text-align:center; font-weight:normal; margin:0 0 50px;}
.i-pro-title:after{content:""; position:absolute; left:calc(50% - 17.5px); bottom:0; display:block; width:35px; height:1px; background-color:var(--main-color);}
.i-hot .owl-carousel .item a .card-image{display:table-cell; vertical-align:middle; text-align:center; overflow:hidden;}
.i-hot .owl-carousel .item .card-body .card-title{justify-content:center; align-items:center; margin-bottom:0; font:bold 24px/30px "Microsoft JhengHei"; color:#161616; text-align:center; height:60px; overflow:hidden;}
.i-hot .owl-carousel .item:hover .card-body .card-title{color:#fff;}
.i-hot .owl-carousel .item .card-body .card-text{position:relative; padding-top:20px; color:#717171;}
.i-hot .owl-carousel .item:hover .card-body .card-text{color:#fff;}
.i-hot .owl-stage{padding-bottom:25px;}
.i-hot .card{background-color:transparent; border:0; border-radius:0;}
.i-hot .owl-carousel .item a{position:relative; background-color:#000;}
.i-hot .owl-carousel .item a.card-img-top{overflow:hidden; display:table; width:100%;}
.i-hot .owl-carousel .item a img{opacity:.7; transition:all 0.3s ease; max-width:100%; max-height:100%; width:auto; height:auto; margin:0 auto;}
.i-hot .owl-carousel .item .card-body{background-color:#eee; z-index:2; transition:all 0.3s ease;}
.i-hot .owl-carousel .item:hover .card-body{background-color:var(--hover-color);}
.i-hot .owl-carousel .item{transition:all 0.6s ease;}
.i-hot .owl-carousel .item:hover a img{opacity:1; transform:scale(1.06);}
.i-hot .owl-carousel .item:hover a .card-title{color:#1b5784;}
.i-hot .owl-carousel .item .card-body .card-button{/* background:#fff url("../images/button-bg.png") no-repeat 50px center; */
  background-color:#fff; margin:25px auto -45px; padding:0; width:200px; font:bold 16px/50px "Microsoft JhengHei"; color:var(--main-color); text-align:center; border-radius:25px; border:1px solid #e5e5e5; transition:all 0.3s ease;}
.i-hot .owl-carousel .item:hover .card-body .card-button{background-color:var(--main-color); color:#fff;}
.i-hot .owl-carousel{position:relative;}
.i-hot .owl-carousel.owl-theme .owl-nav{position:absolute; top:calc(50% - 50px); width:100%; z-index:-2;}
.i-hot .owl-carousel.owl-theme .owl-nav [class*=owl-]{background-color:transparent; padding:0; width:30px; height:50px; text-indent:-100px; overflow:hidden;}
/*.i-hot .owl-carousel.owl-theme .owl-nav .owl-prev{background:url("../images/arrow-left.png") no-repeat; float:left; margin-left:-50px;}*/
/*.i-hot .owl-carousel.owl-theme .owl-nav .owl-next{background:url("../images/arrow-right.png") no-repeat; float:right; margin-right:-50px;}*/
/*.i-hot .owl-carousel.owl-theme .owl-nav .owl-prev:hover{background:url("../images/arrow-left-hover.png") no-repeat; float:left; margin-left:-50px;}*/
/*.i-hot .owl-carousel.owl-theme .owl-nav .owl-next:hover{background:url("../images/arrow-right-hover.png") no-repeat; float:right; margin-right:-50px;}*/
.i-hot .owl-carousel.owl-theme .owl-dots{margin:45px 0;}
.i-hot .owl-carousel.owl-theme .owl-dots .owl-dot span{margin:0 10px;}
.i-hot .owl-carousel.owl-theme .owl-dots .owl-dot.active span{width:10px; height:10px; background-color:var(--main-color);}
.i-hot .owl-carousel.owl-theme .owl-dots .owl-dot span{width:8px; height:8px; background-color:#cfcfcf;}
.i-hot .i-pro-more-bn{width:100%; text-align:center;}
.i-hot .i-pro-more-bn a{display:inline-block; width:180px; margin:0 auto; background-color:#fff; font:bold 20px/60px "Microsoft JhengHei"; color:#161616; border:1px solid var(--main-color); text-align:center; transition:all 0.3s ease;}
.i-hot .i-pro-more-bn a:hover{background-color:var(--main-color); color:#fff;}

/* footer */
@media screen and (max-width:992px){footer{margin-bottom:48px;}
}

/* widgets area */
.widgets-area .wa-title{border-bottom:1px solid rgba(255, 255, 255, .1); margin-bottom:1.5rem; padding-bottom:.5rem;}
.widgets-area .sitemap a{display:inline-block; margin-bottom:1rem; color:#aaa;}
.widgets-area .sitemap a:hover{color:var(--main-color);}

/* float menu */
.float-menu{position:fixed; top:18%; right:0; width:48px; background:var(--main-color); box-shadow:5px 5px 0 0 rgba(0, 0, 0, .3); z-index:10001;}
.float-menu ul{list-style:none; padding:0; margin:0;}
.float-menu ul li{padding:0; margin:0; font-size:14px; color:#ffffff; line-height:1.2; box-shadow:0 1px 0 0 rgba(255, 255, 255, .45);}
.float-menu ul li:last-of-type{border-bottom:0; box-shadow:0 0 0 0 rgba(255, 255, 255, 0);}
.float-menu ul li .float-icon{margin:0 0 5px 0;}
.float-menu ul li .float-icon img{width:100%;}
.float-menu ul li h4{color:#ffffff; padding:0; margin:0; font-weight:normal; font-size:14px;}
.float-menu ul li a{display:block; padding:10px;}
.float-menu ul li a:hover{background:var(--hover-color);}
@media screen and (max-width:992px){.float-menu{position:fixed; bottom:0; left:0; top:inherit; right:inherit; width:100%; /*box-shadow:0 -3px 0 0 #b2c28f;*/
  }
  .float-menu ul{display:flex;}
  .float-menu ul li{flex:1; border-bottom:0; box-shadow:1px 0 0 0 rgba(255, 255, 255, .45); text-align:center;}
  .float-menu ul li:last-of-type{border-right:0;}
  .float-menu ul li .float-icon{width:20px; margin:0 auto 2px auto;}
  .float-menu ul li a{padding:5px;}
}

/* aside */
.left-menu-title{background:#e9ecef; text-align:center; font-size:18px; font-weight:bold; padding:8px 0; border-radius:5px 5px 0 0; margin-bottom:3px; border-bottom:2px solid #6d6d6d; color:#525252;}
.in-left-menu > ul{margin:0; padding:0; list-style:none;}
.m_class{display:none;}
@media (max-width:992px){aside > .in-left-menu{display:none;}
  .m_class{display:block;}
}
.in-left-menu > ul > li{background-color:#f4f4f4; border-bottom:1px #fff solid; font-size:15px; color:#666; padding:0;}
.in-left-menu > ul > li > a{background:var(--main-color); color:#fff; display:block; padding:8px 15px; font-weight:bold; font-size:18px; line-height:30px;}
.in-left-menu > ul > li.active > a{}
.in-left-menu > ul > li > a:hover{}
.in-left-menu > ul > li > .current{border-left:3px #111111 solid;}
.in-left-menu > ul > li ul{margin:10px 0 10px 30px; padding:0; list-style:square;}
.in-left-menu > ul > li ul li{padding:5px 5px 5px 0;}
.in-left-menu > ul > li ul li a{font-weight:bold; font-size:16px; color:#333; display:block;}
.in-left-menu > ul > li ul li.active a{font-size:16px; color:#333; display:block;}
.in-left-menu > ul > li ul li a:hover{color:var(--main-color); font-weight:bold;}
.modal-dialog{margin-bottom:80px;}
@media screen and (max-width:575px){.classBox{padding:0 0 20px 0;}
  .in-left-menu > ul{}
  .m_classLink{display:block; position:relative;}
  .m_classLink a.main{display:block; background:none; font-size:15px; font-family:"Microsoft JhengHei", "新細明體", sans-serif; color:#333; position:relative; padding:8px;}
  .m_classLink a.main i{display:block; font-size:15px; background:#afafaf; width:45px; height:100%; text-align:center; color:#FFF; line-height:40px; position:absolute; right:0; top:0;}
  .m_classLink ul{display:none; margin:0; padding:0; list-style:none; width:100%; background:#FFF; border:1px solid #d1d1d1; position:absolute; left:0; top:100%; z-index:99; box-sizing:border-box;}
  .m_classLink ul li{margin:0; padding:0;}
  .m_classLink ul li a{display:block; padding:8px; border-top:1px solid #d1d1d1; font-family:"Microsoft JhengHei", "新細明體", sans-serif; font-size:15px; color:#222;}
  .m_classLink ul li:first-child a{border:none;}
  .m_classLink ul li a:hover{background:#efeded;}
  .m_classLink ul li ul{display:block; margin:0 10px 10px 10px; padding:0; list-style:none; width:calc(100% - 20px); background:#FFF; border:1px solid #d1d1d1; position:inherit; left:inherit; top:inherit; z-index:999; box-sizing:border-box;}
  .left-menu-title{display:none;}
}

/* page title */
.title-bar{flex-wrap:wrap; padding:20px 0 0; margin-bottom:1rem; border-bottom:1px solid #ccc;}
.title-bar h1.entry-title{font-family:"Microsoft JhengHei"; font-weight:bold; line-height:1; margin-bottom:1rem;}
.breadcrumb{font-family:"Microsoft JhengHei"; font-weight:bold; padding:5px; margin:0 0 1rem;}

/* list style */
.list-style01 .card-img{position:relative; display:table;}
.list-style01 .card-img b{display:table-cell; text-align:center; vertical-align:middle; background-color:#f4f4f4;}
.list-style01 .card-img b .card-img-top{width:auto; height:auto; max-width:100%; max-height:100%;}
/*.list-style01 .disable{cursor:not-allowed;}*/
.list-style01 .disable .card-img-top{opacity:.5;}
.list-style01 .card-img .sold-out{position:absolute; top:calc(50% - 17px); left:calc(50% - 37px); color:#fff; background-color:var(--main-color); margin:0 auto; padding:5px 15px;}
.list-style01 .card-body{display:block;}
.list-style01 .card-title{text-align:center;}
.list-style01 .original-price{font-size:smaller; text-decoration:line-through;}
.list-style01 .special-price{color:red;}
.list-style01 .card-body{padding:0.85rem;}
.list-style02 a p{color:#333;}
.list-style02 .date{background-color:#f4f4f4; font-size:36px; color:#333; text-align:center;}
.list-style02 .date .month{padding:2px; width:80px; background-color:var(--main-color); font-size:small; color:#fff; text-align:center;}
.list-style02 .tags{padding:5px 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.list-style02 .tags a{margin:3px 0;}
.list-style03{border:1px solid #ccc;}
.list-style03 h1{margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--main-color);}
.list-style03 a p{color:#333;}
.list-style05 .date{background-color:#f4f4f4; font-size:36px; color:#333; text-align:center;}
.list-style05 .date .month{padding:2px; width:80px; background-color:var(--main-color); font-size:small; color:#fff; text-align:center;}

/* pagination */
.pagination-bar{margin:15px 0; padding:15px 0; text-align:center;}
.pagination-bar select{border:1px solid var(--main-color); border-radius:3px; font-size:14px; padding:4px 8px;}

/* detail page */
h1.page-title{margin-bottom:30px; font:bold 24px/30px "Microsoft JhengHei"; color:#161616;}
.editor-area img{max-width:100%; height:auto;}
.nav-item > a{font-family:"Microsoft JhengHei"; font-weight:bold;}
#example3 .sp-selected-thumbnail{border:3px solid var(--main-color);}

/* price */
.price .original-price{text-decoration:line-through;}
.price .special-price{font-size:1.3rem; color:var(--danger);}

/* quantity */
.quantity-adjustment{display:flex; width:100%; margin:0 5px 1rem 0;}
.quantity-adjustment input[type="button"]{-webkit-appearance:none; background-color:var(--white); color:#444; width:30px; height:30px; border:1px solid #444; text-align:center; font-weight:700; line-height:1;}
.quantity-adjustment input::-webkit-outer-spin-button, .quantity-adjustment input::-webkit-inner-spin-button{-webkit-appearance:none;}
.quantity-adjustment input[type="number"]{-moz-appearance:textfield; padding:0; text-align:center; border:1px solid #444; height:30px; border-left:0; border-right:0;}

/* cart button */
.cart-button{display:flex; justify-content:space-between; padding:10px 0; width:100%;}
.cart-button .btn{width:calc(33% - 10px);}
@media (max-width:768px){.cart-button{position:fixed; bottom:48px; left:0; background-color:#fff; padding:10px 5px; z-index:9999;}
  .cart-button .btn{margin:0 5px;}

}
/* payment & shipping */
.payment-shipping .card{border:0;}
.payment-shipping .card .card-header{background-color:#fff; padding:0.75rem 0;}
.payment-shipping .card-header h5 a{display:block; color:#000; font-weight:bold; font-size:1.3rem;}
.payment-shipping .card-header h5 a:after{content:"\f107"; font:normal normal normal 1rem/1 FontAwesome; float:right;}
.payment-shipping .card .collapse:after{content:"\f107";}
.payment-shipping .card .collapse.show:after{content:"";}
.payment-shipping .payment-shipping-title{font-size:1.2rem;}
.payment-shipping .payment-type-list{font-size:1rem;}
.payment-shipping .card-body{padding:1.25rem 0;}


/* spec */
.spec .nav-tabs{border-bottom:1px solid var(--main-color);}
.spec .nav-tabs .nav-link{background-color:rgba(133, 181, 86, .2); color:#333;}
.spec .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{background-color:var(--main-color); border-color:var(--main-color); color:#fff;}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus{border-color:transparent; background-color:rgba(133, 181, 86, .4);}
.tab-content > .tab-pane{padding:1.25rem 0;}

/** step **/
.steps{text-align:center; padding:30px 0;}
.steps .step{display:inline-block; width:240px; max-width:33%; text-align:center; margin:0 -2px;}
.steps .step span{display:block; font-weight:bold;}
.steps .step span.badge{position:relative; height:30px; line-height:30px; text-align:center;}
.steps .step span.badge .text{position:absolute; left:calc(50% - 15px); font-size:18px; font-family:Arial; color:#fff; background-color:#d9d9d9; display:inline-block; width:30px; height:30px; line-height:30px; border-radius:50%; z-index:1;}
.steps .step.active span.badge .text{color:#fff; background-color:#000;}
.steps .step span.badge:before{content:""; position:absolute; background-color:#d9d9d9; width:100%; height:2px; top:50%; left:0; margin-top:-1px; z-index:0;}
.steps .step:first-child .badge::before{width:50%; left:50%;}
.steps .step:last-child .badge::before{width:50%; right:50%;}