.js-silder{
	position: relative;	
	min-width: 320px;
}
.silder-scroll{
	width: 100%;
	overflow: hidden;
}
.silder-main{
	position: relative;
	width: 100%;
	overflow: hidden;
}
.silder-main-img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.silder-main-img img{
	width: 100%;
}
.js-silder-ctrl{
	 z-index: 1008; position: relative; margin-top: -50px;
	width: 100%;
	text-align: center;
}
.silder-ctrl-prev,
.silder-ctrl-next{
	position: absolute;
	top: 0;
	width:40px; text-align: center; line-height: 40px;
	height:40px; background: #000;
	vertical-align: middle;
	cursor: pointer;
	color: #fff;
	font-family: "宋体";
	font-size: 26px;
	font-weight: 600;

}
.silder-ctrl-prev{
	left: 30px; margin-top: -15%; opacity: 0.7;
	
}
.silder-ctrl-next{
	right: 30px; margin-top: -15%;opacity: 0.7;
	text-align: right;
}
.silder-ctrl-prev>span,
.silder-ctrl-next>span{
	position: absolute;
	
	
}
.silder-ctrl-prev>span{
	left: 12px;
}
.silder-ctrl-next>span{
	right: 12px;
}
.silder-ctrl-con{
	display: inline-block;
	width: 30px;

	margin: 0 10px;
	cursor: pointer;
}
.silder-ctrl-con>span{
	display: block;
	line-height: 0;
	text-indent: -9999px;
	overflow: hidden;
	padding: 5px 0;
	cursor: pointer;
	background-color: #e4e4e4;
}
.silder-ctrl-con.active>span{
	background-color: #215bac;
}

@media (max-width: 768px){
	.silder-ctrl-prev,
	.silder-ctrl-next{
		width: 10%;
		font-size: 26px;
		margin-top: -25px;
	}
	.silder-ctrl-con{
		width: 14px;
		height: 14px;
		padding: 0;
		margin: 0 5px;
	}
	.silder-ctrl-con>span{
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		padding: 0;
	}
}










#tsShopContainer li,#tsShopContainer img{vertical-align:top;}
#tsShopContainer{width:400px;position:relative;font-size:12px; padding: 8px; float: left; border: 1px solid #ccc;}
#tsShopContainer #tsImgS{text-align:center;width:100%;position:relative;}
#tsShopContainer #tsImgS a{display:block;text-align:center;margin:0px auto;}
#tsShopContainer #tsImgS img{border:0px;}
#tsShopContainer #tsPicContainer{width:100%;height:70px;position:relative;background:url(../images/scrollPicbg.gif) repeat-x 0px 0px;}
#tsShopContainer #tsPicContainer #tsImgSArrL{width:17px;height:100%;background:url(../images/picshopArr.gif) no-repeat left center;position:absolute;top:0px;left:8px;cursor:pointer;}
#tsShopContainer #tsPicContainer #tsImgSArrR{width:17px;height:100%;background:url(../images/picshopArr.gif) no-repeat right center;position:absolute;top:0px;right:8px;cursor:pointer;}
#tsShopContainer #tsPicContainer #tsImgSCon{position:absolute;top:10px;left:38px;width:1px;height:70px;overflow:hidden;}
#tsShopContainer #tsPicContainer #tsImgSCon ul{width:100%;overflow:hidden;}
#tsShopContainer #tsPicContainer #tsImgSCon li{width:57px;float:left;cursor:pointer;}
#tsShopContainer #tsPicContainer #tsImgSCon li img{padding:3px;margin:1px;border:1px solid  #e4e4e4;display:block;width:42px;height:42px;}
#tsShopContainer #tsPicContainer #tsImgSCon li.tsSelectImg img{border:2px solid #F00;margin:0px;}
.MagicZoomBigImageCont {
	border:1px solid #91b817;
	background:#FFF;
}

.MagicZoomMain {
	text-align: center !important;
	width: 92px;
}

.MagicZoomMain div {
	padding: 0px !important;
}

/* Header look and feel CSS class */
/* header is shown if "title" attribute is present in the <A> tag */
.MagicZoomHeader {
	font:			10px Tahoma, Verdana, Arial, sans-serif;
	color:			#fff;
	background:		#91b817;
	text-align:     center !important; 
}


/* CSS class for small looking glass square under mouse */
.MagicZoomPup {
	border: 		0px solid #aaa;
	background: 	#ffffff;
}

/* CSS style for loading animation box */
.MagicZoomLoading {
	text-align:		center;
	background: 	#ffffff;
	color:			#444;
	border: 		1px solid #ccc;
	opacity:		0.8;
	padding:		3px 3px 3px 3px !important;
	display: 		none; /* do not edit this line please */
}

/* CSS style for gif image in the loading animation box */
.MagicZoomLoading img {
	padding-top:	3px !important;
}


.f-l { float: left }
.f-r { float: right }
.clearfix:after { content: "/20"; display: block; visibility: hidden; clear: both; font-size: 0; line-height: 0; height: 0 }
 
@keyframes scaleToggleOne { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
50% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
@keyframes scaleToggleTwo { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
20% {
transform:scale(1);
-webkit-transform:scale(1)
}
60% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
@keyframes scaleToggleThree { 0 {
transform:scale(1);
-webkit-transform:scale(1)
}
33% {
transform:scale(1);
-webkit-transform:scale(1)
}
66% {
transform:scale(2);
-webkit-transform:scale(2)
}
100% {
transform:scale(1);
-webkit-transform:scale(1)
}
}
.animated { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.livechat-girl { width: 60px; height: 60px; border-radius: 50%; position: fixed; bottom: 0; right: 40px; opacity: 0; -webkit-box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); box-shadow: 0 5px 10px 0 rgba(35,50,56,.3); z-index: 700; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); cursor: pointer; -webkit-transition: all 1s cubic-bezier(.86, 0, .07, 1); transition: all 1s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl:focus { outline: 0 }
.livechat-girl.animated { opacity: 1; transform: translateY(-40px); -webkit-transform: translateY(-40px); -ms-transform: translateY(-40px) }
.livechat-girl:after { content: ''; width: 12px; height: 12px; border-radius: 50%; background-image: linear-gradient(to bottom, #26c7fc, #26c7fc); position: absolute; right: 1px; top: 1px; z-index: 50 }
.livechat-girl .girl { position: absolute; top: 0; left: 0; width: 100%; height: auto; z-index: 50 }
.livechat-girl .animated-circles .circle { background: rgba(38,199,252,.25); width: 60px; height: 60px; border-radius: 50%; position: absolute; z-index: 49; transform: scale(1); -webkit-transform: scale(1) }
.livechat-girl .animated-circles.animated .c-1 { animation: 2s scaleToggleOne cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-2 { animation: 2.5s scaleToggleTwo cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl .animated-circles.animated .c-3 { animation: 3s scaleToggleThree cubic-bezier(.25, .46, .45, .94) forwards }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl.animation-stopped .circle { opacity: 0!important }
.livechat-girl .livechat-hint { position: absolute; right: 40px; top: 50%; margin-top: -20px; opacity: 0; z-index: 0; -webkit-transition: all .3s cubic-bezier(.86, 0, .07, 1); transition: all .3s cubic-bezier(.86, 0, .07, 1) }
.livechat-girl .livechat-hint.show_hint { -webkit-transform: translateX(-40px); transform: translateX(-40px); opacity: 1 }
.livechat-girl .livechat-hint.hide_hint { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0) }
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1296px!important }
.livechat-girl .livechat-hint.rd-notice-tooltip .rd-notice-content { width: auto; overflow: hidden; text-overflow: ellipsis }
@media only screen and (max-width:1599px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 1060px!important }
}
@media only screen and (max-width:1309px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 984px!important }
}
@media only screen and (max-width:1124px) {
.livechat-girl .livechat-hint.rd-notice-tooltip { max-width: 600px!important }
}
.rd-notice-tooltip { -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); box-shadow: 0 2px 2px rgba(0,0,0,.2); font-size: 14px; border-radius: 3px; line-height: 1.25; position: absolute; z-index: 65; max-width: 350px; opacity: 1 }
.rd-notice-tooltip:after { position: absolute; display: block; content: ''; height: 20px; width: 20px; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 50 }
.rd-notice-tooltip .rd-notice-content { background: 0; border-radius: 3px; width: 100%; color: #fff; position: relative; z-index: 60; padding: 20px; font-weight: 400; line-height: 1.45 }
.rd-notice-type-success { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-type-success .rd-notice-content { background-color: #26c7fc }
.rd-notice-type-success:after { background-color: #26c7fc; -webkit-box-shadow: 0 5px 10px 0 rgba(38,199,252,.2); box-shadow: 0 5px 10px 0 rgba(38,199,252,.2) }
.rd-notice-position-left { margin-left: -20px }
.rd-notice-position-left:after { right: -6px; top: 50%; margin-top: -10px }
.rd-notice-tooltip.single-line .rd-notice-content { height: 40px; padding: 0 20px; line-height: 40px; white-space: nowrap }





.slider {
	position: relative;
	width: 100%;
	height:auto;
	overflow: hidden;
}
	
	.slides {
		height: 100%;
		
		/* Simple clear fix */
		overflow: hidden;
		
		/**	
		 * Prevent blinking issue
		 * Not tested. Experimental.
		 */
		-webkit-backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;

		/**
		 * Here is CSS transitions 
		 * responsible for slider animation in modern broswers
		 */
		-webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		   -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		    -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		     -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
		        transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
	}
	
		.slide {
			height: 100%;
			float: left;
			clear: none;
		}


	.slider-arrows {}

		.slider-arrow {
			position: absolute;
			display: block;
			margin-bottom: -20px;			
			width: 60px;
			height: 60px;
			line-height: 60px;
			text-decoration: none;
			text-align: center;
			color: #fff;
			font-size: 2em;
			background-color: #333;
			background-color: rgba(50,50,50,.7);
			font-family: "宋体";
		}

			.slider-arrow--right { bottom: 50%; right: 30px; }
			.slider-arrow--left { bottom: 50%; left: 30px; }


	.slider-nav {
		position: absolute;
		bottom: 30px;
	}

		.slider-nav__item {
			width: 24px;
			height: 5px;
			float: left;
			clear: none;
			display: block;
			margin: 0 5px;
			background: #fff;
		}

				.slider-nav__item:hover { background: #ccc; }
				.slider-nav__item--current { background: #ccc; }


.box {			width: 100%; 
				height: 100%;
		
				text-align: center;
				font-size: 5em;
				color: #fff;
				text-transform: capitalize;
				vertical-align:middle; 
			}