/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:

	Eric Meyer					:: https://meyerweb.com
	HTML5 Doctor				:: https://html5doctor.com
	and the HTML5 Boilerplate	:: https://html5boilerplate.com

-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/


article, aside, figure, footer, header, nav, section, details, summary {display: block;}

/* Handle box-sizing while better addressing child elements:
   https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

/* Responsive images and other embedded objects
*/
img,
object,
embed {max-width: 100%;}

/*
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
	 In fact, it *will* cause problems with Google Maps' controls at small size.
	If this is the case for you, try uncommenting the following:

#map img {
		max-width: none;
}
*/

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't mess with your line-heights https://gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button,
input[type=button] {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


*,body,html{font-family: arial, "Microsoft YaHei", 微软雅黑, "Hiragino Sans GB", "WenQuanYi Micro Hei", tahoma, simsun, 宋体;}

a{
	text-decoration: none;
}


.productshow{width:100%;background:#fff}
.productshow .hd{overflow:hidden;width:100%;background:#333537;height:55px;border-top:1px solid #cfc39b;border-bottom:1px solid #cfc39b}
.productshow .hd ul{width:1200px;margin:0 auto;height:55px}
.productshow .hd li{position:relative;height:55px;line-height:55px;text-align:center;width:300px;float:left;cursor:pointer;font-size:14px;color:#fff;border:0;font-weight:700}
.productshow .hd li.on{width:300px;background:#f6d159;color:#333537;border-left:1px solid #bbbcbc;border-right:1px solid #bbbcbc}
.productshow .tabs-nav{overflow:hidden;width:100%;background:#333537;height:55px;}
.productshow .tabs-nav ul{width:1200px;margin:0 auto;height:55px}
.tabs-list{list-style:none}
.tabs-list li{display:inline-block;position:relative;height:55px;line-height:55px;text-align:center;width:300px;float:left;cursor:pointer;font-size:14px;color:#fff;border:0}
.tabs-list li a{display:inline-block;height:55px;line-height:55px;text-align:center;width:300px;cursor:pointer;font-size:14px;color:#fff;font-weight:700;border:0;text-decoration:none;transition:all .4s ease 0s}
.tabs-list li a:hover{background:#f6d159}
.tabs-list li.active a{width:300px;background:#f6d159;color:#333537;border-left:1px solid #cfc39b;border-right:1px solid #cfc39b}
.tabs .accordion-handle{display:none}
.product{width:1200px;margin:0 auto}
.product .item{float:left;width:300px;height:362px;position:relative;overflow:hidden;padding-top:60px;border-bottom:1px solid #f3f3f3}
.item .name{color:#333537;font-size:16px;text-align:center;width:300px;height:100px;position:absolute;left:0;top:280px;font-weight:700;}
.cf-img{width:208px;height:176px;margin:0 auto}
.explain{width:300px;height:362px;padding:40px 40px 0;background-color:rgba(248,248,248,.85);filter:alpha(opacity=85);position:absolute;left:0;top:362px}
.explain .s-name{font-size:26px;color:#333537}
.explain .s-name span{font-size:12px;color:#333537;display:block}
.explain .info{text-align:justify;font-size:14px;color:#333537;padding-top:34px;line-height:24px}
.tabs-vertical-left:after,.tabs-vertical-left:before,.tabs-vertical-right:after,.tabs-vertical-right:before{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.tabs-vertical-left .tabs-list,.tabs-vertical-right .tabs-list{width:25%}
.tabs-vertical-left .tabs-list li,.tabs-vertical-right .tabs-list li{display:block;margin:0 0 5px 0;width:100%}
.tabs-vertical-left .tabs-list li a,.tabs-vertical-right .tabs-list li a{height:auto;padding:8px 20px;line-height:1.5}
.tabs-vertical-left .tabs-container,.tabs-vertical-right .tabs-container{width:75%}
.tabs-vertical-left .tabs-list{float:left}
.tabs-vertical-left .tabs-container{float:right}
.tabs-vertical-left .tabs-container .tab-content{margin:0 0 0 15px}
.tabs-vertical-right .tabs-list{float:right}
.tabs-vertical-right .tabs-container{float:left}
.tabs-vertical-right .tabs-container .tab-content{margin:0 15px 0 0
}.accordion-handle{position:relative;margin-bottom:10px;background-color:#ebebeb;text-decoration:none;color:grey;cursor:pointer;transition:all .4s ease 0s}
.accordion-handle:hover{background-color:#d9d9d9}
.accordion-handle.active{background-color:#0d7eff;color:#fff}
.accordion-handle h4{height:38px;line-height:38px;padding:0 15px;font-size:14px;font-weight:400}
.accordion-handle i{display:block;width:38px;height:38px;overflow:hidden;position:absolute;right:0;top:0}
.accordion-handle.active i{background-position:bottom center}
.accordion-content{margin-bottom:15px;display:none}
@media only screen and (max-width:768px){
	.responsive-tabs .tabs-list{display:none}
	.responsive-tabs .accordion-handle{display:block}
	.responsive-tabs.tabs-vertical-left .tabs-container,.responsive-tabs.tabs-vertical-right .tabs-container{width:100%;float:none}
	.responsive-tabs.tabs-vertical-left .tabs-container .tab-content,.responsive-tabs.tabs-vertical-right .tabs-container .tab-content{margin:10px 0 15px}
	}
.tab-content .tips{margin:30px auto 55px auto;width:200px;font-size:14px;text-align:center;}