@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 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 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 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 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; }
	.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: 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); }
}