/*
 * Swiper - Mobile Touch Slider CSS
 * http://www.idangero.us/sliders/swiper
 *
 * Vladimir Kharlampidi, The iDangero.us
 * http://www.idangero.us/
 * 
 * Copyright 2012-2013, Vladimir Kharlampidi
 * The iDangero.us
 * http://www.idangero.us
 *
 * Licensed under GPL & MIT
 *
*/

/* ===============================================================
Basic Swiper Styles 
================================================================*/
.swiper-container {
	margin:0 auto;
	position:relative;
	overflow:hidden;
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
	/* Fix of Webkit flickering */
	z-index:1;
}
.swiper-wrapper {
	position:relative;
	width:100%;
	-webkit-transition-property:-webkit-transform, left, top;
	-webkit-transition-duration:0s;
	-webkit-transform:translate3d(0px,0,0);
	-webkit-transition-timing-function:ease;
	
	-moz-transition-property:-moz-transform, left, top;
	-moz-transition-duration:0s;
	-moz-transform:translate3d(0px,0,0);
	-moz-transition-timing-function:ease;
	
	-o-transition-property:-o-transform, left, top;
	-o-transition-duration:0s;
	-o-transform:translate3d(0px,0,0);
	-o-transition-timing-function:ease;
	-o-transform:translate(0px,0px);
	
	-ms-transition-property:-ms-transform, left, top;
	-ms-transition-duration:0s;
	-ms-transform:translate3d(0px,0,0);
	-ms-transition-timing-function:ease;
	
	transition-property:transform, left, top;
	transition-duration:0s;
	transform:translate3d(0px,0,0);
	transition-timing-function:ease;
}
.swiper-free-mode > .swiper-wrapper {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	margin: 0 auto;
}
.swiper-slide {
	float: left; position:relative;
}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
	-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
	-ms-touch-action: pan-x;
}

/* ===============================================================
Your custom styles, here you need to specify container's and slide's
sizes, pagination, etc.
================================================================*/
.swiper-container {
	/* Specify Swiper's Size: */

	/*width:200px;
	height: 100px;*/
}
.swiper-slide {
	/* Specify Slides's Size: */
	
	/*width: 100%;
	height: 100%;*/
}
.swiper-slide-active {
	/* Specific active slide styling: */
	
}
.swiper-slide-visible {
	/* Specific visible slide styling: */	

}
/* ===============================================================
Pagination Styles
================================================================*/
.swiper-pagination-switch {
	/* Stylize pagination button: */	

}
.swiper-active-switch {
	/* Specific active button style: */	
	
}
.swiper-visible-switch {
	/* Specific visible button style: */	
	
}



/* Demo Styles */
@media screen and (max-width:640px) {
.swiper-container {
  width: 100%;
  height: 500px;
  color: #fff;
  text-align: center;
}
}
@media screen and (max-width:540px) {
.swiper-container {
  width: 100%;
  height: 420px;
  color: #fff;
  text-align: center;
}}

@media screen and (max-width:440px) {
.swiper-container {
  width: 100%;
  height: 320px;
  color: #fff;
  text-align: center;
}}
@media screen and (max-width:340px) {
.swiper-container {
  width: 100%;
  height: 230px;
  color: #fff;
  text-align: center;
}}

.red-slide {
  background: #ca4040;
}
.blue-slide {
  background: #4390ee;
}
.orange-slide {
  background: #ff8604;
}
.green-slide {
  background: #49a430;
}
.pink-slide {
  background: #973e76;
}
.swiper-slide .title {
  font-style: italic;
  font-size: 42px;
  margin-top: 80px;
  margin-bottom: 0;
  line-height: 45px;
}
.swiper-slide p {
  font-style: italic;
  font-size: 25px;
}
.pagination {
  position: absolute;
  z-index: 20;
  bottom:20%;
  left: 45%;
  background:rgba(0,0,0,.5);
  padding:1px 2px 1px 2px;
  border-radius:30px;
}
.swiper-pagination-switch {
  float:left;
  width: 6px;
  height: 6px;
  border-radius: 100px;
  /*background: #555;*/
  margin:2px 4px;
  opacity: 0.8;
  border: 2px solid #fff;
  cursor: pointer;
}
.swiper-active-switch {
  background: #fff;
}
.swiper-slide img{ width:100%; height:auto;}


.rollBox{
	width:100%;
	max-width:640px;
	min-width:320px;
	height: 230px;
	clear: both;
	margin-top: 20px;
}

.aaa {
	
	height: 200px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.bbb {
	float: left;
	height: auto;
	width: 49%;
	padding-left:1%;
	margin-top: 20px;

}
.ccc {
	float: left;
	height: auto;
	width: 49%;
	padding-left:1%;

}
.bbb img {
	height: auto;
	width: 100%;
}
.ccc .proNames{

	height:40px;
	top:5px;
	line-height:40px;
	font-size:14px;
	font-weight:bold;
	color:#333333;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #C3C3C3;
}

.ccc .proBox{

	height:auto;
	line-height:25px;
	font-size:12px;
	color:#333333;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
}



.global-nav{
	position: fixed;
	left: -100%;
	bottom: 0;
	z-index: 1013;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	width: 100%;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
.global-nav__nav-wrap{
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;

	-webkit-box-flex:1;
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
	height: 70px;
	background-color: #313131;
}
.global-nav__nav-item{
	-webkit-box-flex:1;
	-webkit-flex:1;
	-ms-flex:1;
	flex:1;
	overflow: hidden;
	text-align:center
}
.global-nav__nav-link{
	position: relative;
	display: block;
	width: 62px;
	height: 50px;
	line-height: 24px;
	padding-top: 10px;
	text-align: center;
	white-space: nowrap;
	color: #D0BEAB;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	font-size: 16px;
}
.global-nav__nav-link:active{
	color: #ff7171;
}
.global-nav__iconfont{
	font-family:"global-nav__iconfont";
	font-size:24px;
	font-style:normal;
}


.global-nav__iconfont2{
   background: url("../images/icons_ww0.png") no-repeat center center / auto 20px;	
}

	
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chromeˇ˘firefox */
    url('iconfont.ttf') format('truetype'), /* chromeˇ˘firefoxˇ˘operaˇ˘Safari, Android, iOS 4.2+*/
    url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
	


.global-nav__nav-tit{
	display: block;
	font-size: 12px;
}
.global-nav__nav-shop-cart-num,.global-nav__operate-cart-num{
	position: absolute;
	height: 16px;
	line-height: 16px;
	padding: 0 5px;
	border-radius: 8px;
	background-color: #fd4609;
	color: #fff;
	font-size: 12px;
}
.global-nav__nav-shop-cart-num{
	right: 7px;
	top:4px;
}
.global-nav__operate-wrap{
	position: relative;
	width: 62px;
	height: 58px;
	background-color: rgba(153,153,153,.75);
	right: -62px;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
.global-nav__operate-wrap:before,.global-nav__operate-wrap:after{
	content: '';
	position: absolute;
	top: 24px;
	width: 7px;
	height: 7px;
	border-top:2px solid #fff;
	border-right: 2px solid #fff;
}
.global-nav__operate-wrap:before{
	display: none;
	right: 3px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
.global-nav__operate-wrap:after{
	right: 7px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.global-nav__yhd-logo{
	position: absolute;
	right: 20px;
	top: 15px;
	width: 32px;
	height: 29px;
	background-image:url(global_nav_login.png);
	background-repeat: no-repeat;
	background-size: 100%;
	-webkit-transition: width .5s ease;
	transition: width .5s ease;
}
.global-nav__operate-cart-num{
	right: -8px;
	top: -8px;
	-webkit-transition: opacity .5s ease;
	transition: opacity .5s ease;
}
.global-nav--current{
	left:0;
}
.global-nav--current .global-nav__operate-wrap{
	width: 20px;
	right: 0;
}
.global-nav--current .global-nav__yhd-logo{
	width: 0;
}
.global-nav--current .global-nav__operate-cart-num{
	opacity: 0;
}
.global-nav--current .global-nav__operate-wrap:before{
	display: block;
}
.global-nav--current .global-nav__operate-wrap:after{
	display: none;
}