@import url('/css/pagenav.css');
@import url('/css/community.css');

/*wrap*/

.inner-wrap{width: 1080px;margin: 0 auto;}
.article-content,#sideNav2{padding: 0 0px;}

/*pagenav*/
#pagenav{margin-top: 45px;padding: 0 5px;}
#pagenav strong {
    padding: 5px 12px;
    background: #79551a;
    color: #fff;
    vertical-align: top;
}
#pagenav a:hover{background:#79551a;color: #fff;}
#pagenav.innerpage a:hover{background: none;color: #79551a;}
.Categorytitle{font-size: 28px;}


/*按鈕*/
.btn{margin: 15px 0px;}
.btn a{position: relative;padding: 5px 28px;color: #79551a;display: inline-block;}

/* waylink */
.waylink { margin-bottom: 30px;margin-top: 60px;}
.waylink h2.pagetitle {font-size: 28px; color: #333;display: inline-block;padding-bottom: 30px;}
.waylink ol { overflow:hidden; font-size:12px; }
.waylink ol li { position:relative; margin-left:5px; padding-left:10px; float:left; list-style: none; color:#6f6f6f; }
.waylink ol li:first-child { margin-left:0; padding-left:0; }
.waylink ol li a { color: #969696; }
.waylink ol li .h3 { font-weight:normal; font-size:12px; color: #6f6f6f; }
.waylink ol li:after { position:absolute; font-size:12px; color:#6f6f6f; left:0; top:0; content: ">"; }
.waylink ol li:first-child:after { content: ""; }

/* content-wrapper */
.content-wrapper { overflow: hidden; position: relative; }
.content-wrapper .workframe { z-index: 10; }
#content { overflow: hidden;; position: relative; margin: 10px 0; }

/* sideNav Cate */



#sideNav {position: relative; padding-top: 60px;  height: 100%; top: 0; left: 0; }
#sideNav .ykln .ykln2{margin: 0px;}
#sideNav .mobnav{margin: 0 auto;position: relative;z-index: 11;padding-bottom: 30px;}
#sideNav h2.sideTitle,#category-nav > h4,#contact-nav .sideTitle,#contact-extra .sideTitle{ position: relative; font-size: 18px; color: #333; }
#sideNav h2.sideTitle i { position: absolute; display: none; top: calc(50% - 9px); right: 20px; }

@media screen and (min-width: 1025px){
#sideNav #sideMenu{display: none;}
#sideNav .mobnav ul.Cate{display: flex !important;flex-wrap: wrap;}
#sideNav .mobnav ul.Cate li .ykln{display: none;}
#sideNav ul.Cate >li {position: relative;width: 12%; }
#sideNav ul.Cate >li.action::after{content: "";position: absolute;bottom: 0px;left: 0px;width: 100%;height: 4px;background: #79551a;}
#sideNav ul.Cate >li:hover a{color: #79551a;}
#sideNav ul.Cate >li a i{margin-right: 8px;width: 10px;text-align: center;}
#sideNav #contact-extra ul.Cate >li { padding: 10px 20px; color: #737373; }
#sideNav ul.Cate li h2,#sideNav ul.Cate li p { position:  relative; }

#sideNav ul.Cate li a {font-size: 16px;display: block; color: #737373; }
#sideNav ul.Cate >li a{transition: ease .3s;padding-bottom: 15px;text-align: center; }
#sideNav #contact-extra ul.Cate li a { padding: 0; display: inline-block; }
#sideNav ul.Cate >li.action >h2 a,#sideNav ul.Cate >li.action >p a {  color: #79551a; }
#sideNav ul.Cate li b[data-action="sideOpen"] { display: none; position: absolute; padding: 10px; top: 0; right: 0; color: #fff; }
#sideNav ul.Cate li ul.subUL {overflow: hidden; min-width: 114px; opacity: 0;height: 0px;transition: ease .3s;  position: absolute;left: 0px;top: 34px; background: #79551a; }
#sideNav ul.Cate li:hover ul.subUL{opacity: 1; height: auto;}
#sideNav ul.Cate li ul.subUL li{}
#sideNav ul.Cate >li.action ul.subUL { height: 0px;opacity: 0; min-width: 168px;}
#sideNav ul.Cate >li.action:hover ul.subUL {height: auto;opacity: 1;}
#sideNav ul.Cate >li.action ul.subUL li.action { background: #79551a; }
#sideNav ul.Cate li ul.subUL li a{padding: 10px 18px; }
#sideNav ul.Cate >li ul.subUL li .subULHead { position: relative;min-width: 168px; }
#sideNav ul.Cate >li ul.subUL li ul.sub2UL{opacity: 0;height: 0px; transition: ease .3s;}
#sideNav ul.Cate >li:hover ul.subUL li ul.sub2UL{opacity: 1;height: auto;}
#sideNav ul.Cate >li ul.subUL li .subULHead a,#sideNav ul.Cate >li ul.subUL li ul.sub2UL a{color: #fff;}
#sideNav ul.Cate >li ul.subUL li ul.sub2UL { background: #a98c3f; }
#sideNav ul.Cate >li ul.subUL li.action ul.sub2UL { display: block; }
#sideNav ul.Cate >li ul.subUL li.action ul.sub2UL li.action { background:  #a98c3f; }
}

#sideNav #SeoStarRating{padding: 10px 0 10px 20px;}
#sideNav #SeoStarRating font:last-child{color: #ff003b;}


/*sideNav2*/
#sideNav2{display: flex;flex-wrap: wrap;padding: 60px 0px;}
#sideNav2 #best-product,#sideNav2 #contact-nav,#sideNav2 #contact-extra,#sideNav2 #youtube{width: 25%;}
#sideNav2 #youtube iframe{width: 100%;}
#sidewrap{width: 100%;}
#sideNav2 #best-product ul.Cate li,#sideNav2 #contact-nav ul.Cate li,#sideNav2 #contact-extra ul.Cate li{border-bottom: 1px solid #d2d2d2;width: 95%; padding: 10px 15px;position: relative;color: #737373;}
#sideNav2 #best-product ul.Cate li::after,#sideNav2 #contact-extra ul.Cate li::after{content: "";position: absolute;left: 2px;top: 50%;transform: translateY(-50%);width: 7px;height: 1px;background: #333;}
#sideNav2 #best-product ul.Cate li .ykln .ykln2,#sideNav2 #contact-nav ul.Cate li .ykln .ykln2,#sideNav2 #contact-extra ul.Cate li .ykln .ykln2{margin: 0px 20px 0px 0px;}
#sideNav2 ul.Cate li a{margin-left: 5px;color: #737373;}
#sideNav2 #contact-nav ul.Cate li a i{position: absolute;left: 2px;top: 50%;transform: translateY(-50%);}
/* sideNav contact-nav */
#sideNav #contact-nav {  }
.contact-form
#sideNav #fb-wrap , #sideNav #youtube  { margin: 10px 0px; width: calc(100% - 40px); }
#sideNav #youtube iframe { width: 100%; }


#articleBox .pagetitle{
    font-weight: bold;
    font-size: 32px;
    margin-bottom: 20px;
}


/*ssbanner*/
#ssbanner{padding: 20px 0px;}
#ssbanner h4{font-size: 40px;text-align: center;padding-bottom: 15px;color: #333;}
#ssbanner .container{width: 1115px;}
#ssbanner .ssbanner-item{margin: 0 15px;background-size: 100% auto;background-position: center;background-repeat: no-repeat;}
#ssbanner .ssbanner-item a{display: block;position: relative;transition: ease .3s;}
#ssbanner .ssbanner-item a:hover{background: rgba(121, 85, 26, 0.5);}
#ssbanner .ssbanner-item .title{position: absolute;padding: 15px; width: 100%; top: 50%;transform: translateY(-50%); text-align: center;color: #fff;opacity: 0;transition: ease .3s;}
#ssbanner .ssbanner-item a:hover .title{opacity: 1;}
#ssbanner .slick-slider{margin-bottom: 0px;background-size: 100% auto;background-repeat: no-repeat;background-position: center;}
#ssbanner .arrow{display: block;position: absolute;top: 50%;height: 20px;width: 20px;cursor: pointer;opacity: .5;transition: ease .3s;}
#ssbanner .arrow:hover{opacity: 1;}
#ssbanner .prev{left: 0px; transform: translateY(-50%); margin-left: -35px;background: url(/images/27/ico_arrow_prev.svg) no-repeat;}
#ssbanner .next{right: 0px; transform: translateY(-50%); margin-right: -35px;background: url(/images/27/ico_arrow_next.svg) no-repeat;}



/* serchBox */
#serchBox { padding-bottom: 20px; }

/* form */
.wrap input[type="number"] , .wrap input[type="text"] , .wrap textarea { padding: 10px 20px;border-bottom: 1px solid #e4e4e4 }

/* transform */
@keyframes bgWhirligig-2 { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }



@media screen and (max-width: 1440px){
	.waylink h2.pagetitle{position: static;}
	#sideNav .mobnav{display: block;padding-top: 15px;}	
}
@media screen and (max-width: 1280px){
	#ssbanner h3{font-size: 34px;}
	#sideNav ul.Cate >li a{padding: 10px 15px 15px;}
	#sideNav ul.Cate li ul.subUL{top: 48px;}

}

@media screen and (max-width: 1240px){
    .inner-wrap{width: 80%;}
	 #ssbanner .container{width: 100%;}
}
@media screen and (max-width: 1024px) {
	.article-content{padding: 20px 20px;}
	#sideNav2{padding: 50px 20px 20px;}
	#sideNav #sideMenu{display: block;width: 100%;padding: 10px 15px;background: #79551a;color: #fff;font-size: 16px;}
	#sideNav .mobnav ul.Cate{display: none;}
	#sideNav ul.Cate >li {  }
	#sideNav ul.Cate >li a i{margin-right: 8px;width: 10px;text-align: center;}
	#sideNav #contact-extra ul.Cate >li { padding: 10px 20px; color: #fff; }
	#sideNav ul.Cate li h2,#sideNav ul.Cate li p { position:  relative; }
	#sideNav ul.Cate li.action h2:before { position: absolute; border-style: solid; border-width: 22px 0 22px 10px; border-color: transparent transparent transparent #e7a71c; right: -10px; top: 0; content: ""; }
	#sideNav ul.Cate li a { padding: 10px 0 10px 20px; display: block; color: #737373; }
	#sideNav #contact-extra ul.Cate li a { padding: 0; display: inline-block; }
	#sideNav ul.Cate >li.action >h2 a {  }
	#sideNav ul.Cate li b[data-action="sideOpen"] { position: absolute; padding: 10px; top: 0; right: 0; color: #737373; }
	#sideNav ul.Cate li ul.subUL { padding-left: 10px; display: none; transition: none; }
	#sideNav ul.Cate >li.action ul.subUL { display: block; }
	#sideNav ul.Cate >li.action ul.subUL li.action {  }
	#sideNav ul.Cate >li ul.subUL li .subULHead { position: relative; }
	#sideNav ul.Cate >li ul.subUL li ul.sub2UL { padding-left: 10px; display: none;  transition: none; }
	#sideNav ul.Cate >li ul.subUL li.action ul.sub2UL { display: block; }
	#sideNav ul.Cate >li ul.subUL li.action ul.sub2UL li.action { }

	.content-wrapper:before { display: none; }
	#best-product .item > div { width: 100%; }
	#sideNav { float: none; padding-bottom: 0; width: 100%; height: auto;}
	#sideNav:before { display: none; }
	#sideNav h2.sideTitle i { display: block; transition: all linear 0.3s; }
	#sideNav h2.current i {	-moz-transform: rotate(3.14159rad); -webkit-transform: rotate(3.14159rad); -o-transform: rotate(3.14159rad); -ms-transform: rotate(3.14159rad); transform: rotate(3.14159rad); }
	#sideNav .mobnav { overflow: hidden;  transition: none; }
	#articleBox{ margin-left: 0; width: 100%; }
	#best-product .item .productsList ul,#sidewrap #sidead-list ul{display: flex;flex-wrap: wrap;}
	#sidewrap #sidead-list ul li,#best-product .item .productsList ul li{width:calc((100% / 2) - 20px);margin: 10px;float: none;}
	#sideNav2 #best-product, #sideNav2 #contact-nav, #sideNav2 #contact-extra, #sideNav2 #youtube{width: 50%;padding-top: 40px;}
	#ssbanner .workframe{width: 100%;}

}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 768px){
     .inner-wrap{width: 85%;}
     #ssbanner h4{font-size: 32px;}
}
@media screen and (max-width: 480px) {
	.article-content, #sideNav2{padding: 0px 5px;}
	#sideNav2 #best-product, #sideNav2 #contact-nav, #sideNav2 #contact-extra, #sideNav2 #youtube{width: 100%;padding: 30px 0px;}
	#articleBox ul.articleList li { width: calc(100% - 40px); }
}
@media screen and (max-width: 450px) {
}