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

/*wrap*/
.webBox .wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    transition: all linear 0.3s;
    position: relative;
    background-image: url(/images/27/bg.jpg);
    background-position: -4% 90%,110% 20%;
    background-size: auto;
}
.inner-wrap{width: 1280px;margin: 0 auto;}
.article-content,#sideNav2{padding: 0 0px;}

/*pagenav*/
#pagenav{margin-top: 45px;padding: 0 5px;}
#pagenav strong {
    padding: 5px 12px;
    background: #e8e8e8;
    color: #4c4c4c;
    vertical-align: top;
}
#pagenav a:hover{background: #565656;color: #fff;}
#pagenav.innerpage a:hover{background: none;color: #7ab028;}
.Categorytitle{font-size: 28px;position: relative;margin-bottom: 5px;font-size: 40px;line-height: 60px;letter-spacing: -.025em;font-weight: 300;font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow";text-align: center;}


/*按鈕*/
.btn{margin: 15px 0px;}
.btn a{position: relative;padding: 5px 28px;color: #969696;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;text-align: center;display: none;}
.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: 20px;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;text-align: center;padding-bottom: 20px;}
#sideNav .mobnav ul.Cate li .ykln{display: none;}
#sideNav ul.Cate >li {position: relative;/* width: 12%; */display: inline-block;margin-bottom: 5px;}
#sideNav ul.Cate >li.action::after{content: "";position: absolute;bottom: 0px;left: 0px;width: 100%;height: 4px;background: #e0e0e0;}
#sideNav ul.Cate >li:hover a{color: #000000;}
#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;position: relative;display: block;/* margin: 0 3px; */padding: 8px 25px;border: 1px solid #e5e5e5;font-size: 16px;color: #ababab;border-radius: 5px;line-height: 25px;}
#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: #696969;}
#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: 23px; *//* top: 41px; */background: #808080;border-radius: 5px;}
#sideNav ul.Cate li:hover ul.subUL{opacity: 1;height: auto;/* left: calc(50% - 85px); */}
#sideNav ul.Cate li ul.subUL li{}
#sideNav ul.Cate >li.action ul.subUL {}
#sideNav ul.Cate >li.action:hover ul.subUL {height: auto;opacity: 1;/* left: calc(50% - 85px); */}
#sideNav ul.Cate >li.action ul.subUL li.action {background: #7ab028;}
#sideNav ul.Cate li ul.subUL li a{/* padding: 10px 8px; */}
#sideNav ul.Cate >li ul.subUL li .subULHead {/* position: relative; *//* min-width: 88px; *//* font-size: 13px; */}
#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;font-size: 15px;padding: 8px 15px;background: rgba(177, 177, 177, 0.65);}
#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: #eaeaea;color: #3a3a3a;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;padding-top: 0px;}
	#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;padding-top: 5px;}
	#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) {
	#sub-banner{
		margin-top: 56px;
	}
#articleBox .pagetitle {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
}
.Categorytitle {
    margin-bottom: 15px;
    font-size: 30px;
}
.waylink {
    margin-bottom: 20px;
    margin-top: 20px;
}

@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) {
}