@import url('/css/pagenav.css');
/* sub-banner */
.sub-banner a { overflow: hidden; background-position: 50%; background-repeat: no-repeat; background-size: cover; display: block; }

/* waylink */
.waylink { padding: 5px 0; background: #f1f1f1; color: #6f6f6f; font-size: 12px; }
#content .waylink section { background: none; }
.waylink ol { margin: 0; padding: 0; }
.waylink ol li { display: inline-block; position: relative; padding-right: 12px; }
.waylink ol li:after { position: absolute; font-size: 12px; right: 3px; top: 0; content: '/'; }
.waylink ol li:last-child:after { display: none; }
.waylink a ,
.waylink .h3 { color: #6f6f6f; font-weight: normal; font-size: 12px; }

.content-wrap { margin: 50px 0 20px; }
.content-main { float: right; width: 77%; }

/* aside  */
aside { float: left; width: 20%; }

.content-main >h2 { color: #4e4e4e; font-size: 20px; border-bottom: 1px dotted #aaaaaa; z-index: 1; padding: 10px 15px; }
.content-main >h2 b { position: relative; letter-spacing: 0.2em;z-index: 1; }
.content-main >h2 b:before { content: ''; width: 120%; height: 3px; background: #27a2db; position: absolute; left: -15px; bottom: -10px; }
.content-main .main-wrapper ,
.content-main #article { color: #000; font-size: 15px; margin: 20px 0; }

aside .side-title h3 ,
#best-product h3 ,
#contact-nav h3 ,
#sidead-list h3 { color: #4e4e4e; font-size: 16px; margin: 10px 0; position: relative; z-index: 1; text-align: left; }

aside .side-title h3:after ,
#best-product h3:after ,
#contact-nav h3:after ,
#sidead-list h3:after { background: #c0c0c0; content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; z-index: -3; }

aside .side-title h3 strong ,
#best-product h3 strong ,
#contact-nav h3 strong ,
#sidead-list h3 strong { color: #4e4e4e; font-size: 16px; position: relative; z-index: 1; }

aside .side-title h3 strong:after ,
#best-product h3 strong:after ,
#contact-nav h3 strong:after ,
#sidead-list h3 strong:after { content: ''; background: #fff; position: absolute; width: 100%; height: 100%; left: 0; bottom: -10px; padding-right: 10px; z-index: -1; }

/* side-nav */
#side-nav ul ,
#contact-nav ul { overflow: visible; }
#side-nav li ,
#contact-nav li { border-bottom: 1px solid #e9e9e9; padding: 3px 0; position: relative; }
#side-nav li h3 ,
#side-nav ul li ul.subUL li .subULHead { position: relative; }
#side-nav li a ,
#contact-nav li a { display: block; font-size: 14px; color: #4e4e4e; padding: 10px 20px; text-align: left; }
#side-nav li:hover >h3 >a ,
#side-nav li.action >h3 >a ,
#contact-nav li:hover a { background: #4982af; color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#side-nav li b { position: absolute; right: 10px; top: calc((100% / 2) - 11.5px); color: #000; }
#side-nav li ul { display: none; }
#side-nav li.action >ul { display: block; }
#side-nav li.action >h3 >b , #side-nav li:hover >h3 >b { color: #fff; }
#side-nav ul li ul.subUL li , #side-nav ul li:last-child { border-bottom: 0; }
#side-nav ul.subUL >li:hover >div >p >a ,
#side-nav ul.subUL >li:hover >div >b ,
#side-nav ul.subUL >li.action >div >p >a ,
#side-nav ul.subUL >li.action >div >b { color: #4982af; }
#side-nav ul.sub2UL >li:hover >div >p >a ,
#side-nav ul.sub2UL >li:hover >div >b ,
#side-nav ul.sub2UL >li.action >div >p >a ,
#side-nav ul.sub2UL >li.action >div >b { color: #399ae7; }
#side-nav ul.sub2UL { margin: 0 0 0 10px; background: #ebf6ff; }
#side-nav ul.sub2UL li .sub2ULHead a { padding: 5px 10px; }

/* best-product */
#best-product h3 ,
#contact-nav h3 ,
#sidead-list h3 { margin: 40px 0 20px; }
#best-product h3 strong ,
#contact-nav h3 strong ,
#sidead-list h3 strong { color: #275b84; }
#contact-nav li a i { margin-right: 7px; }
#best-product .content .sidep .photo { display: block; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
#best-product .content .sidep h4 { overflow: hidden; margin-top: 10px; }
#best-product .content .sidep h4 .left { float: left; color: #000000; font-size: 16px; width: calc(100% - 60px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
#best-product .content .sidep h4 .right { float: right; color: #595858; font-size: 12px; width: 50px; }
#best-product .slick-prev ,
#best-product .slick-next { background-image: url(/images/09/side-pro-arrow.png); background-repeat: no-repeat; background-position: 50% 50%; width: 22px; height: 22px; top: 11px; right: 22px; left: initial; z-index: 9; opacity: 0.7; transition: all ease-in-out 0.3s; }
#best-product .slick-prev:hover ,
#best-product .slick-next:hover { opacity: 1; }
#best-product .slick-next { background-image: url(/images/09/side-pro-arrow2.png); right: 0; }
#best-product .slick-prev:before ,
#best-product .slick-next:before { display: none; }

aside >div { margin-bottom: 20px; text-align: center; }
aside .side-title p { text-align: left; }

/* sidead-list */
#sidead-list li { position: relative; margin-bottom: 10px; border: 1px #ccc solid; }
#sidead-list li a { display: block; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; }
#sidead-list li a img { width: 100%; }
#sidead-list li font { padding: 10px; position: absolute; width: calc(100% - 20px); background: rgba(0, 0, 0, 0.5); color: #fff; left: 0; bottom: 0; }

aside iframe { width: 100%; height: 200px; }

/* community */
#community { margin: 50px 0; }
#community li { float: left; line-height: 0; margin: 0 5px 5px 0; }

@media screen and (max-width: 1280px) {
	.content-main { width: 72%; }
	aside { width: 25%; }
}
@media screen and (max-width: 980px) {
	.sub-banner a img { max-width: inherit; width: 150%; }
	.content-main { width: 100%; }
	aside { width: 100%; margin-top: 50px; }
	.content-main >h2 b { letter-spacing: 0; }
	#best-product .slick-slide img { width: 100%; }
	#best-product .content .sidep { margin: 0 10px; }
	#sidead-list li { float: left; width: 48%; margin: 0 1% 10px; }
}
@media screen and (max-width: 640px) {
	#best-product .content .sidep { margin: 0; }
	.content-main >h2 { padding: 10px 0; }
}
@media screen and (max-width: 480px) {
	.sub-banner a img { width: 190%; }
	#sidead-list li { width: 100%; margin: 0 0 10px; }
	.content-main >h2 b:before { width: 100px; }
	.waylink a, .waylink .h3, .waylink ol li, .waylink ol li:after { font-size: 6pt; }
}