@import url('/css/pagenav.css');
@import url('/css/community.css');
@import url('https://fonts.googleapis.com/css?family=Damion&display=swap');

/*wrap*/

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

/*pagenav*/
#pagenav a, #pagenav strong{background: #fff;}
#pagenav{margin-top: 45px;padding: 0 5px;}
#pagenav strong {
    padding: 5px 12px;
    background: #1f79a9;
    color: #fff;
    vertical-align: top;
}
#pagenav a:hover{background:#1f79a9;color: #fff;}
#pagenav.innerpage a:hover{background: none;color: #1f79a9;}



.Categorytitle{padding: 40px 0;text-align: center;font-family: 'Damion', "微軟正黑體"}
p.Categorytitle { font-size: 40px; }
.Categorytitle:first-letter{color: #1f79a9;}

/*按鈕*/
.btn a{position: relative;padding: 5px 28px;color: #1f79a9;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; padding: 25px 70px;border-bottom: 1px solid #ddd;}
.waylink ol li {font-weight: bold;color: #1f79a9; 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 {
	text-decoration: none;
    color: #000;
    background: url(/images/28/iconPagePathArrow.png) no-repeat right 7px;
    padding: 0 18px 0 0;
}
.waylink ol li .h3 { font-weight:normal; font-size:12px; color: #6f6f6f; }
.waylink ol li:last-child a { background: none; }
#Sitemap .waylink ol{
	width: 90%;
    margin: 0 auto;
    padding-left: 0px;
}


/* 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; height: 100%;top: 0;left: 0;padding: 12px 20px 10px; background: #fff;}
#sideNav .ykln .ykln2{margin: 0px;}
#sideNav .mobnav{margin: 0 auto;position: relative;z-index: 11;}
#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{padding:12px 20px 0px }
#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%;padding-bottom: 15px }
#sideNav ul.Cate >li:hover a{}
#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;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 {  }
#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: #000; }
#sideNav ul.Cate li:hover ul.subUL{opacity: 1; height: auto;}
#sideNav ul.Cate li ul.subUL li{position: relative;}
#sideNav ul.Cate >li.action ul.subUL { height: 0px;opacity: 0; min-width: 168px;position: absolute;overflow: hidden;}
#sideNav ul.Cate li ul.subUL li:first-child::after{
	position: absolute;
    left: 50%;
    top: -8px;
    content: '';
    height: 0;
    width: 0;
    margin: 0 0 0 -8px;
    border-color: transparent transparent #000 transparent;
    border-style: solid;
    border-width: 0 8px 8px 8px;
}
#sideNav ul.Cate >li.action:hover ul.subUL {height: auto;opacity: 1;}
#sideNav ul.Cate >li.action ul.subUL li.action { background: #000; }
#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:#4c4c4c; }
#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:  #737373; }
}

@media screen and (min-width: 1025px) and (max-width: 1280px){
	#sideNav ul.Cate >li{width: 14%;}
}

#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: 50px;text-align: center;padding-bottom: 15px;color: #333;font-family: 'Damion', "微軟正黑體";}
#ssbanner h4:first-letter{color: #1f79a9;}
#ssbanner .container{width: 1115px;}
#ssbanner .ssbanner-item{margin: 0 15px;background-size: cover;background-position: center;background-repeat: no-repeat;}
#ssbanner .ssbanner-item a{display: block;position: relative;transition: ease .3s;}
#ssbanner .ssbanner-item .txt{
	position: absolute;
    padding: 8px;
    width: 100%;
    text-align: center;
    color: #fff;
    transition: ease .3s;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.68);
    left: 0px;
}
#ssbanner .ssbanner-item .txt p{text-align: center;}
#ssbanner .ssbanner-item .txt p.title{font-size: 16px;font-weight: bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#ssbanner .ssbanner-item .txt p.desc{padding-top: 5px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
#ssbanner .ssbanner-item a:hover .txt{padding: 15px 8px;}
#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){
	.inner-wrap{width: 80%;}
	.waylink h2.pagetitle{position: static;}
	#sideNav .mobnav{display: block;}	
}
@media screen and (max-width: 1280px){
	#ssbanner h3{font-size: 34px;}

}

@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: #1f79a9;color: #fff;font-size: 16px;}
	#sideNav #sideMenu #arrowdown{float: right;transition: ease .3s;}
	#sideNav #sideMenu #arrowdown.active{transform: rotate(180deg) translateY(2px);}
	#sideNav #sideMenu #arrowdown i{font-size: 24px;}
	#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;padding-right: 15px; }
	#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%;}
	#sideNav{background: none;}
	.waylink ol{padding: 25px 35px;}

}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 768px){
	.Categorytitle{padding: 20px 0px;}
	.waylink{margin-top: 0px;}
     .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) {
}