php/www/css/common_o2o/index.css

.intro-pic {
  position: relative;
  left: -225px;
  width: 981px;
  height: 760px;
  background: url(http://wozhua-others.qiniudn.com/20160301-dog.jpg) no-repeat;
  background-size: contain;
}
.intro-text {
  position: absolute;
  right: 30px;
  top: 60px;
  width: 590px;
  height: 300px;
  background: url(http://wozhua-others.qiniudn.com/20160217-heafline.gif) no-repeat;
  background-size: contain;
  font-size: 0;
  text-indent: -10000px;
}
.intro-icon {
  position: absolute;
  right: 30px;
  top: 400px;
  width: 590px;
  font-size: 0;
}
.intro-icon .items {
  display: inline-block;
  *display:inline;
  *zoom:1;
  padding-top: 100px;
  width: 144px;
  background-repeat: no-repeat;
  background-size: 84px 84px;
  background-position: top center;
  white-space: nowrap;
  text-align: center;
  font-size: 16px;
  color: #b0bec5;
  border-right: 1px solid #f0f0f0;
}
.intro-icon .items.last-child {
  border-right: none;
}
.intro-icon .items1 {
  background-image: url(http://wozhua-others.qiniudn.com/20160217-tag_1.gif);
}
.intro-icon .items2 {
  background-image: url(http://wozhua-others.qiniudn.com/20160217-tag_2.gif);
}
.intro-icon .items3 {
  background-image: url(http://wozhua-others.qiniudn.com/20160217-tag_3.gif);
}
.intro-icon .items4 {
  background-image: url(http://wozhua-others.qiniudn.com/20160217-tag_4.gif);
}
.section h2 {
  font-size: 30px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0;
  font-family: '微软雅黑';
  // margin: 50px 0 40px;
}
#service {
  background: url(http://wozhua-others.qiniudn.com/20160217-greenbg.gif) no-repeat;
  background-size: cover;
}
#service h2 {
  color: #fff;
}
.main-service,
.other-service {
  width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
.other-service {
  width: 960px;
}
#comment .comment-list {
  width: 900px;
  margin: 0 auto;
}
.main-service {
  text-align: center;
  margin-bottom: 20px;
}
.main-service .main {
  display: inline-block;
  vertical-align: middle;
  width: 160px;
  height: 202px;
  text-align: center;
  margin-left: 64px;
  margin-right: 64px;
}
.main-service .main:hover .icon-xizao {
  background-color: rgba(0, 255, 255, 0.50);
}
.main-service .main:hover .icon-timao {
  background-color: rgba(191, 255, 0, 0.50);
}
.main-service .main:hover .icon-meirong {
  background-color: rgba(255, 192, 0, 0.50);
}
.other-service .other {
  display: inline-block;
  vertical-align: middle;
  width: 108px;
  height: 138px;
  text-align: center;
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 36px;
}
.other-service .other:hover .icon {
  background-color: rgba(255, 255, 255, 0.50)
}
.main-service .icon,
.other-service .icon {
  display: block;
  margin: auto;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}
.main-service .icon {
  width: 130px;
  height: 130px;
  background-size: 35%;
}
.other-service .icon {
  width: 96px;
  height: 96px;
  border: 2px solid #fff;
  background-size: 50%;
  box-sizing: border-box;
}
.main-service a,
.other-service a {
  text-decoration: none;
}
.main-service .service-name,
.other-service .service-name {
  color: #fff;
  text-decoration: none;
  margin-top: 20px;
  display: block;
}
.main-service .service-name {
  font-size: 24px;
}
.other-service .service-name {
  font-size: 20px;
}
#feature {
  width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
#feature h2 {
  color: #666;
}
#feature .item {
  width:980px;
  margin:auto;
}
#feature .item div {
  margin: 6px auto;
}
#feature .item .first {
  margin-top:0;
}
#feature .item .last {
  margin-bottom: 40px;
}
#feature .item img {
  width: 484px;
  height: 260px;
}
// #feature .item .right {
//   float: right;
// }
#comment {
  background-color: #f6f6f6;
}
#comment .comment-list {
  padding-left: 0;
  list-style: none;
}
.comment-list li {
  position: relative;
  padding-left: 90px;
  padding-bottom: 20px;
}
.comment-list .thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #ddd;
}
.comment-list .name {
  font-size: 16px;
  color: #666;
  margin: 0 0 10px 0;
}
.comment-list .name a {
  color: #666;
  text-decoration:none;
}
.comment-list .star {
  position: relative;
  height: 23px;
  width: 120px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAbCAQAAAAqw0yZAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgAhEJCDc3QMYwAAABD0lEQVQ4y53UzW3DIBiA4ddZoGxgOkEslXsZJSN0hGQDj5BR3Pt3IBuQDewJ6CFRAlQfdsLR6PErfgQ0hkz6XGrCgyQ5vEejJIk63elNeqDXu53epAfg6uxL1XuTVlepPppqV6lmzUa3qorFMvBTULgyEogu5tVODAM3YPhmbfwyE4hEQicDEx+rpB4LvoM38IL/CjtwAc/lBXjBu/DYJjFM7DfDOTscN28s3yHwPNdNOIPkV2IVF5DyNrmZ2KAxh/y7iLZBq7matnZ536AytHepnC+rK5QGzVezcOKTE4u22pL6jFl3dNEdsRn3aEOiJEkyiqm+Gxklle9j9ZhKkrNY5bdWzpIUKkZjGTdP+gef8nca8jzPLgAAABd0RVh0Q3JlYXRpb24gVGltZQAyMDE2LjIuMTbtWvM5AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE2LTAyLTE3VDA5OjA4OjU1KzA4OjAwTU1zuAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0wMi0xN1QwOTowODo1NSswODowMDwQywQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAAElFTkSuQmCC) repeat-x;
  background-size: 24px 22px;
}
.comment-list .star-1 span {
  width: 24px;
}
.comment-list .star-2 span {
  width: 48px;
}
.comment-list .star-3 span {
  width: 72px;
}
.comment-list .star-4 span {
  width: 96px;
}
.comment-list .star-5 span {
  width: 120px;
}
.comment-list .star span {
  position: absolute;
  top: 0;
  bottom: 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAbCAMAAAC3FHQgAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAANlBMVEUAAAD/////wAD/wAD/wAD/wAD/wAD/wAD/wAD/wAD/wAD/wAD/wAD/wAD/wAD/wAD/wAD///88xC47AAAAEHRSTlMAAMBg4CBAcBCAsDDw0JCgkT7PkwAAAAFiS0dEAf8CLd4AAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgAhEJCDin/9uhAAAAq0lEQVQoz33SURKDIAwEUCCAgWjN/U/bCsWyUZs/580OZMU5mABfHpGU/mjU+KykCmFvogphb6MQ9jYKYX+JzuFTU17iV+OS01DOVGpQO6EWyuxk1adZxT3zKse5st3iJv1WfMcbjzvf8IFjows3PPc13PHXRgWtpiuTNWrORRWjAkpGCbT07koqvdcCGpode3DzAPr5ty8eu7/GAxmqe5peSdp1Vp6teW/yDTaJFGdGxv0NAAAAF3RFWHRDcmVhdGlvbiBUaW1lADIwMTYuMi4xNu1a8zkAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTYtMDItMTdUMDk6MDg6NTYrMDg6MDB8pWklAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE2LTAyLTE3VDA5OjA4OjU2KzA4OjAwDfjRmQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAASUVORK5CYII=) repeat-x;
  background-size: 24px 22px;
}
.comment-list .comment {
  color: #666;
  font-size: 14px;
  line-height: 24px;
  margin-top: 9px;
}
.comment-list .comment-pic {
  max-width: 100%;
}
.comment-list .time {
  font-size: 12px;
  color: #666;
}
.fp-slidesNav.bottom {
  bottom: 120px;
}
.fp-slidesNav ul li {
  width: 44px;
  height: 12px;
  margin: 25px;
}
.fp-slidesNav ul li a span {
  border-radius: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  left: 0;
  top: 0;
  background: #ececec;
}
.fp-slidesNav ul li a.active span {
  width: 44px;
  height: 12px;
  margin: 0;
  border-radius: 0;
  background: #83c336;
}
.fp-slidesNav ul li:hover a span,
.fp-slidesNav ul li:hover a.active span {
  width: 44px;
  height: 12px;
  margin: 0;
  border-radius: 0;
  background: #83c336;
}
#fp-nav ul li {
  width: 16px;
  height: 16px;
  margin: 20px;
}
#fp-nav ul li a span {
  width: 16px;
  height: 16px;
  background: #ececec;
  margin: -8px 0 0 -8px;
}
#fp-nav ul li a.active span {
  width: 16px;
  height: 16px;
  background: #85c141;
  margin: -8px 0 0 -8px;
}
/* service */
.service-container {
  width: 960px;
  margin: auto;
}
.service-container .service-row {
  width: 100%;
}
.service-row .service-item {
  float: left;
  width: 25%;
}
.service-row .clear-float {
  width: 0;
  height: 220px;
  float: none;
}
.service-item a {
  display: block;
  text-decoration: none;
  width: 160px;
  height: 200px;
  text-align: center;
  margin: auto;
}
.service-item .icon {
  display: block;
  margin: auto;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  width: 130px;
  height: 130px;
}
.service-item .service-name {
  color: #fff;
  margin-top: 20px;
  display: block;
  font-size: 24px;
}
/* service-icon */
.service-item .icon-xizao {
  background-image: url(http://wozhua-others.qiniudn.com/20160301-01shower.png);
}
.service-item .icon-timao {
  background-image: url(http://wozhua-others.qiniudn.com/20160301-timao.png);
}
.service-item .icon-meirong {
  background-image: url(http://wozhua-others.qiniudn.com/20160301-meirong.png);
}
.service-item .icon-spa {
  background-image: url(http://wozhua-others.qiniudn.com/20160301-spa.png);
}
.service-item .icon-quchong {
  background-image: url(http://wozhua-others.qiniudn.com/20160301-quchong.png);
}
.service-item .icon-jieya {
  background-image: url(http://wozhua-others.qiniudn.com/20160301-jieya.png);
}
.service-item .icon-yaoyu {
  background-image: url(http://wozhua-others.qiniudn.com/20160301-yaoyu.png);
}
.service-item .icon-zhuchan {
  background-image: url(http://wozhua-others.qiniudn.com/20160301-zhuchan.png);
}
.service-item .icon-duanwei {
  background-image: url(http://wozhua-others.qiniudn.com/20160301-duanwei.png);
}
.service-item .icon-ranse {
  background-image: url(http://wozhua-others.qiniudn.com/20160301-ranse.png);
}
.service-item .icon-xunquan {
  background-image: url(http://wozhua-others.qiniudn.com/20160301-xunquan.png);
}
.service-item .icon-tansuanyu {
  background-image: url(http://wozhua-others.qiniudn.com/20160301-tansuanyu.png);
}
/* icon-color */
.icon-bg-skyblue {
  background-color: rgb(102, 204, 255);
}
.icon-bg-skyblue:hover {
  background-color: rgba(102, 204, 255, 0.5);
}
.icon-bg-lavender {
  background-color: rgb(213, 201, 249);
}
.icon-bg-lavender:hover {
  background-color: rgba(213, 201, 249, 0.5);
}
.icon-bg-purple {
  background-color: rgb(179, 173, 233);
}
.icon-bg-purple:hover {
  background-color: rgba(179, 173, 233, 0.5);
}
.icon-bg-pink {
  background-color: rgb(242, 114, 125);
}
.icon-bg-pink:hover {
  background-color: rgba(242, 114, 125, 0.5);
}
.icon-bg-yellow {
  background-color: rgb(245, 201, 4);
}
.icon-bg-yellow:hover {
  background-color: rgba(245, 201, 4, 0.5);
}
.icon-bg-orange {
  background-color: rgb(242, 147, 92);
}
.icon-bg-orange:hover {
  background-color: rgba(242, 147, 92, 0.5);
}
.icon-bg-red {
  background-color: rgb(242, 106, 75);
}
.icon-bg-red:hover {
  background-color: rgba(242, 106, 75, 0.5);
}