.floor_nav { width:30px; display:none; position:fixed; bottom:70px; left:50%; margin-left:-640px; z-index:9999; overflow:hidden; }

.floor_nav p { float:left; display:block; width:30px; height:30px; line-height:30px; overflow:hidden; font-size:12px; cursor:pointer; text-align:center; color:#333; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFNDg5NURBNDY3MjA2ODExODIyQUVDNTgwRDU1MkZBQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1N0M3MTMzQTlBRTQxMUU0OEY2QkNDMkMzNDJCRDdGNiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1N0M3MTMzOTlBRTQxMUU0OEY2QkNDMkMzNDJCRDdGNiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBkOTE3NzktZTE1Yi0yNTRkLTljYzMtOGVjNmE4ZTAyMjRjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIxNzkxODUyODJEQjExRTQ4RkM0REQwQTBFRkQyNTY2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+3tRxHgAAAAlQTFRFwsLCycnJ////r0pOrgAAAAN0Uk5T//8A18oNQQAAAB5JREFUeNpiYIIABhTIyAQXxgtGpUelR6VpKw0QYACUOgb65Nz92gAAAABJRU5ErkJggg==) 0 0 no-repeat; }

.floor_nav p:first-child { background:none; }

.floor_nav p span { width:30px; float:right; border-radius:5px 0 0 5px; font-size:14px; }

.floor_nav p font { float:right; width:0px; -webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out; font-size:12px; }

.floor_nav p.cur font { width:30px; color:#c33; }

.floor_nav p:hover,.floor_nav p:hover font { width:30px; background:#c33; color:#fff; }







.panel-title {

  overflow: hidden;

  margin: 4px 0;
  

}

.panel-title .title {

  display: inline-block;

  font-size: 22px;

  font-weight: bolder;

  line-height: 100%;

  vertical-align: middle;

}

.panel-title .subtitle {

  display: inline-block;

  font-size: 18px;

  line-height: 18px;

  color: #b4b4b4;

  vertical-align: middle;

}



.panel {

  background: #fff;

  overflow: hidden;

}

.panel .album-panel {

  position: relative;

  width: 192px;

  height: 474px;

  float: left;

}

.panel .album-panel .album-img {

  display: block;

  width: 100%;

  height: 100%;

}

.panel .album-panel .album-detail {

  position: absolute;
  width:180px;
  padding:0 6px;
  left: 0;

  right: 0;

  bottom: 0;

  height: 98px;

  color: #fff;

  text-align: center;

  font-weight: 700;

  filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8;

}

.panel .album-panel .album-detail .title {

  display: inline-block;

  margin-top: 26px;

  font-size: 20px;

  border-bottom: 2px solid #fff;

  padding-bottom:4px;

}

.panel .album-panel .album-detail .more {

  display: inline-block;

  border-bottom: 2px solid #fff;

  font-size: 12px;

  line-height: 20px;

}

.panel .item-panel {

  _width: 596px;

  float: left;

  _display: inline;

  border-right: 1px solid #e8e8e8;

}

.panel .item-panel .row {

  overflow: hidden;

  border-top: 1px solid #e8e8e8;

}

.panel .item-panel .row.first {

  border-top: 0;

}

.panel .item-panel .item {

  position: relative;

  float: left;

  _display: inline;

  border-left: 1px solid #e8e8e8;

  width: 228px;

  height: 237px;

  text-decoration: none;

  -webkit-transform: translateZ(0px);

  transform: translateZ(0px);

}

.panel .item-panel .item.first {

  border-left: 0;

}

.panel .item-panel .item.big {

  width:438px;

  height: 236px;

  padding-left: 20px;

}



.panel .item-panel .item .item-img {

  display: block;

  width: 160px;

  height: 160px;

  margin: 16px auto 8px;

}

.panel .item-panel .item .item-img {

  -webkit-transition: -webkit-transform .2s linear;

  -moz-transition: -moz-transform .2s linear;

  -o-transition: -o-transform .2s linear;

  transition: transform .2s linear;

}

.panel .item-panel .item .item-img:hover {

-webkit-transform: translateX(-5px);

-moz-transform: translateX(-5px);

-ms-transform: translateX(-5px);

-o-transform: translateX(-5px);

transform: translateX(-5px);

}

.panel .item-panel .item.big .item-img {

  width: 212px;

  height: 212px;

  float: right;

  _display: inline;

  margin: 12px;

}

.panel .item-panel .item .item-title {

  text-align: center;

  padding: 0 24px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  font-size: 12px;

  line-height: 14px;

  color: #4c4c4c;

  _width: 150px;

}

.panel .item-panel .item.big .item-title {

  display: inline-block;

  font-weight: 700;

  text-align: left;

  border-bottom: 1px solid #101010;

  color: #101010;

  font-size: 14px;

  line-height: 26px;

  padding: 0;

  _width: 200px;

  margin-top: 84px;

  max-width: 200px;

}

.panel .item-panel .item .price {

  font-family: Avenir,Arial,"Microsoft YaHei",Helvetica,sans-serif,"\5b8b\4f53";

  text-align: center;

}

.panel .item-panel .item.big .price {

  text-align: left;

}

.panel .item-panel .item .price .item-act-price {

  font-size: 18px;

  color: #f14f4f;

  vertical-align: middle;

}

.panel .item-panel .item.big .price .item-act-price {

  font-size: 21px;

}

.panel .item-panel .item .price .item-act-price span {

  font-size: 14px;

}

.panel .item-panel .item .price .item-tag-price {

  margin-left: 3px;

  font-size: 13px;

  color: #a6a6a6;

  text-decoration: line-through;

  vertical-align: middle;

}

.panel .item-panel .item.big .price .item-tag-price {

  font-size: 15px;

}

.panel .item-panel .item .price .item-tag-price span {

  font-size: 12px;

}

.panel .brand-panel {

  position: relative;

  padding: 0 8px 0 15px;

  overflow: hidden;

  _width: 269px;

  _float: right;

  _display: inline;

}

.panel .brand-panel .title {

  padding: 13px 0 0;

  line-height: 28px;

  font-size: 18px;

  border-bottom: 1px solid #e8e8e8;

  color: #737373;

}

.panel .brand-panel .title .strong {

  font-size: 22px;

  vertical-align: middle;

}

.panel .brand-panel .brands {

  position: relative;

  overflow: hidden;

}

.panel .brand-panel .brands .brand {

  float: left;

  _display: inline;

  width: 130px;

  margin: 10px 0 0 10px;

  text-decoration: none;

}

.panel .brand-panel .brands .brand .brand-img-ctn {

  position: relative;

  width: 130px;

  height: 65px;

}

.panel .brand-panel .brands .brand .brand-img-ctn .brand-img {

  position: absolute;

  width: 90px;

  height: 45px;

  left: 50%;

  top: 50%;

  margin-left: -45px;

  margin-top: -22px;

}

.panel .brand-panel .brands .brand .brand-title {

  _width: 130px;

  height: 22px;

  line-height: 22px;

  font-size: 12px;

  color: #868686;

  background: #ededed;

  text-align: center;

  white-space: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

}

.panel .brand-panel .brands .fCl-nav {

  overflow: hidden;

  line-height: 36px;

  text-align: center;

}

.panel .brand-panel .brands .fCl-nav li {

  display: inline-block;

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background-color: #e8e8e8;

  vertical-align: middle;

  margin: 0 8px;

  cursor: pointer;

}

















































/*1f*/

.floor li:first-child .panel-title .title {color: #ed1957;}

.floor li:first-child .panel {border-top:4px solid #ed1957;}

.floor li:first-child .album-panel .album-detail { background:#ed1957; }

.floor li:first-child .brand-panel .title .strong {border-bottom: 1px solid #ed1957; color: #ed1957;}

.floor li:first-child .brand-panel .brands .fCl-nav li.on {background-color: #ed1957;}



/*2f*/

.floor li:nth-child(2) .panel-title .title {color: #ee208f;}

.floor li:nth-child(2) .panel {border-top:4px solid #ee208f;}

.floor li:nth-child(2) .album-panel .album-detail { background:#ee208f;}

.floor li:nth-child(2) .brand-panel .title .strong {border-bottom: 1px solid #ee208f; color: #ee208f;}

.floor li:nth-child(2) .brand-panel .brands .fCl-nav li.on {background-color: #ee208f;}



/*3f*/

.floor li:nth-child(3) .panel-title .title {color: #f24e4d;}

.floor li:nth-child(3) .panel {border-top:4px solid #f24e4d;}

.floor li:nth-child(3) .album-panel .album-detail { background:#f24e4d;}

.floor li:nth-child(3) .brand-panel .title .strong {border-bottom: 1px solid #f24e4d; color: #f24e4d;}

.floor li:nth-child(3) .brand-panel .brands .fCl-nav li.on {background-color: #f24e4d;}



/*4f*/

.floor li:nth-child(4) .panel-title .title {color: #5cbd16;}

.floor li:nth-child(4) .panel {border-top:4px solid #5cbd16;}

.floor li:nth-child(4) .album-panel .album-detail { background:#5cbd16;}

.floor li:nth-child(4) .brand-panel .title .strong {border-bottom: 1px solid #5cbd16; color: #5cbd16;}

.floor li:nth-child(4) .brand-panel .brands .fCl-nav li.on {background-color: #5cbd16;}



/*5f*/

.floor li:nth-child(5) .panel-title .title {color: #3ca789;}

.floor li:nth-child(5) .panel {border-top:4px solid #3ca789;}

.floor li:nth-child(5) .album-panel .album-detail { background:#3ca789;}

.floor li:nth-child(5) .brand-panel .title .strong {border-bottom: 1px solid #3ca789; color: #3ca789;}

.floor li:nth-child(5) .brand-panel .brands .fCl-nav li.on {background-color: #3ca789;}



/*6f*/

.floor li:nth-child(6) .panel-title .title {color: #7d47d9;}

.floor li:nth-child(6) .panel {border-top:4px solid #7d47d9;}

.floor li:nth-child(6) .album-panel .album-detail { background:#7d47d9;}

.floor li:nth-child(6) .brand-panel .title .strong {border-bottom: 1px solid #7d47d9; color: #7d47d9;}

.floor li:nth-child(6) .brand-panel .brands .fCl-nav li.on {background-color: #7d47d9;}



/*7f*/

.floor li:nth-child(7) .panel-title .title {color: #5194fd;}

.floor li:nth-child(7) .panel {border-top:4px solid #5194fd;}

.floor li:nth-child(7) .album-panel .album-detail { background:#5194fd;}

.floor li:nth-child(7) .brand-panel .title .strong {border-bottom: 1px solid #5194fd; color: #5194fd;}

.floor li:nth-child(7) .brand-panel .brands .fCl-nav li.on {background-color: #5194fd;}


/*8f*/
.floor li:nth-child(8) .panel-title .title {color: #BDA46B;}

.floor li:nth-child(8) .panel {border-top:4px solid #BDA46B;}

.floor li:nth-child(8) .album-panel .album-detail { background:#BDA46B;}

.floor li:nth-child(8) .brand-panel .title .strong {border-bottom: 1px solid #BDA46B; color: #BDA46B;}

.floor li:nth-child(8) .brand-panel .brands .fCl-nav li.on {background-color: #BDA46B;}

.floor li:nth-child(8) .panel {border-top:4px solid #BDA46B;}