@charset "UTF-8";
* {
  margin: 0;
  padding: 0; }
  .clearfix:after {
    content: "";
    display: block;
    clear: both; }
  .lf {
    float: left; }
  .rt {
    float: right; }
  a {
    text-decoration: none; }
  li {
    list-style: none; }
  h1, h2, h3, h4, h5, h6 {
    font-weight: normal; }

.wraper {
  width: 100%;
  margin: 0 auto;
  font-family: 'Playfair Display,serif'; }

/* 头部 */
.headCon {
  height: 100px;
  padding-top: 28px;
  background: #fff;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box; }
  .headCon .head {
    width: 295px;
    height: 44px;
    margin: 0 auto;
    background: url("../images/head.jpg") no-repeat; }

/* 尾部 */
.footCon {
  background-color: #ffc107;
  padding-bottom: 24px; }
  .footCon .footer {
    width: 737px;
    margin: 0 auto;
    color: #fdfcfa; }
    .footCon .footer h3 {
      font-size: 27px;
      height: 56px;
      line-height: 56px;
      text-align: center;
      padding-top: 20px; }
    .footCon .footer p {
      font-size: 18px;
      margin-bottom: 20px; }
    .footCon .footer input {
      display: block;
      border: none;
      width: 304px;
      height: 47px;
      line-height: 47px;
      background: #fff;
      text-align: center;
      color: #969592;
      margin: 0 auto;
      font-family: 'sans-serif'; }
    .footCon .footer button {
      width: 132px;
      height: 40px;
      display: block;
      text-align: center;
      line-height: 40px;
      color: #fff;
      background-color: #444;
      font-size: 18px;
      margin: 17px auto 0;
      border: none;
      cursor: pointer; }

/* banner */
.banner {
  /*height: 531px;*/ 
  height: 600px;}
  .banner .item {
    position: relative;
    background-image: url("../images/banner_01.jpg");
    background-size: cover;
    -webkit-background-size: cover;
    background-position: center; }
    .banner .item .text {
      position: absolute;
      left: 46%;
      top: 155px;
      /*width: 329px;*/
      height: 158px;
      font-family: 'Playfair Display,serif'; }
      .banner .item .text h2 {
        font-size: 48px;
        color: #ffc107;
        margin-bottom: 5px;
        font-weight: bold; }
      .banner .item .text h3 {
        font-size: 36px;
        color: #373535; }
      .banner .item .text p {
        font-family: 'Calibri-Light';
        font-size: 20px;
        color: #474445;
        margin-top: 15px; }
    .banner .item a {
      position: absolute;
      left: 46%;
      top: 368px;
      display: block;
      width: 229px;
      height: 51px;
      border: 2px solid #333;
      color: #333;
      line-height: 51px;
      text-align: center;
      font-size: 20px; }
      .banner .item a:hover {
        color: #fff;
        background: #333; }
    .banner .item:nth-of-type(2) {
      background-image: url("../images/banner_02.jpg");
      background-size: cover;
      -webkit-background-size: cover;
      background-position: center; }
      .banner .item:nth-of-type(2) .text {
        left: 9%;
        top: 149px; }
      .banner .item:nth-of-type(2) a {
        left: 9%;
        border: 2px solid #ffc107; }
        .banner .item:nth-of-type(2) a:hover {
          color: #fff;
          background: #ffc107; }
    .banner .item:nth-of-type(3) {
      background-image: url("../images/banner_03.jpg");
      background-size: cover;
      -webkit-background-size: cover;
      background-position: center; }
      .banner .item:nth-of-type(3) .text {
        width: 100%;
        text-align: center;
        left: 0;
        top: 168px; }
      .banner .item:nth-of-type(3) a {
        text-transform: uppercase;
        left: 43.5%;
        border: 2px solid #ffc107; }
        .banner .item:nth-of-type(3) a:hover {
          color: #fff;
          background: #ffc107; }
  .banner .layui-carousel-ind {
    top: -65px; }
    .banner .layui-carousel-ind ul {
      background-color: transparent; }
      .banner .layui-carousel-ind ul:hover {
        background: transparent; }
      .banner .layui-carousel-ind ul li {
        width: 18px;
        height: 18px;
        background: transparent;
        border: 2px solid #474445; }
        .banner .layui-carousel-ind ul li:hover {
          background: #ffc107;
          border: 2px solid #fff; }
        .banner .layui-carousel-ind ul li.layui-this {
          background: #ffc107;
          border: 2px solid #fff; }

/* list */
.list {
  width: 1032px;
  margin: 24px auto 0; }
  .list li {
    padding: 8px; }
    .list li a {
      display: block;
      width: 328px;
      height: 328px;
      overflow: hidden;
      position: relative;
      background-size: cover;
      -webkit-background-size: cover;
      background-position: center; }
      .list li a::after {
        content: '';
        position: absolute;
        display: inline-block;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        visibility: hidden;
        width: 100%;
        height: 100%;
        border: 2px solid rgba(255, 255, 255, 0);
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box; }
      .list li a:hover:after {
        border: 8px solid rgba(255, 255, 255, 0.4);
        visibility: visible; }
    .list li h3 {
      font-size: 24px;
      font-family: 'Playfair Display,serif';
      font-weight: 400;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin: 10px 0; }
    .list li:nth-of-type(1) a {
      background-image: url("../images/icon_01.jpg"); }
    .list li:nth-of-type(2) a {
      background-image: url("../images/icon_02.jpg"); }
    .list li:nth-of-type(3) a {
      background-image: url("../images/icon_03.jpg"); }
    .list li:nth-of-type(4) a {
      background-image: url("../images/icon_04.jpg"); }
    .list li:nth-of-type(5) a {
      background-image: url("../images/icon_05.jpg"); }
    .list li:nth-of-type(6) a {
      background-image: url("../images/icon_06.jpg"); }

/* productList */
.productCon {
  width: 1202px;
  margin: 0 auto; }
  .productCon .tit {
    margin-bottom: 20px; }
    .productCon .tit a {
      color: #333; }
      .productCon .tit a:hover {
        color: #ffc107; }
  .productCon .lfCon {
    width: 272px;
    margin-bottom: 20px; }
    .productCon .lfCon .item {
      margin-bottom: 30px; }
      .productCon .lfCon .item > span {
        display: inline-block;
        margin-bottom: 20px;
        font-weight: 600; }
      .productCon .lfCon .item .screen {
        margin-bottom: 13px; }
        .productCon .lfCon .item .screen .inputCon {
          width: 22px;
          height: 22px;
          position: relative;
          top: -1px;
          margin-right: 10px;
          cursor: pointer; }
          .productCon .lfCon .item .screen .inputCon.ra .bg {
            background-image: url("../images/radio_02.png"); }
          .productCon .lfCon .item .screen .inputCon .bg {
            position: relative;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: url("../images/check_01.png"); }
          .productCon .lfCon .item .screen .inputCon input {
            position: absolute;
            left: 0;
            top: 0; }
          .productCon .lfCon .item .screen .inputCon.active .bg {
            background-image: url("../images/check_02.png"); }
          .productCon .lfCon .item .screen .inputCon.active.ra .bg {
            background-image: url("../images/radio_01.png"); }
          .productCon .lfCon .item .screen .inputCon.colorItem {
            border-radius: 50%;
            position: relative; }
          .productCon .lfCon .item .screen .inputCon.colorItem::after {
            content: '';
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 5px solid #fff;
            transition: all .3s;
            opacity: 0;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box; }
          .productCon .lfCon .item .screen .inputCon.colorItem:hover:after {
            opacity: 1; }
        .productCon .lfCon .item .screen .color {
          background-color: #e84c3d; }
        .productCon .lfCon .item .screen .color1 {
          background-color: #f39c11; }
        .productCon .lfCon .item .screen .color2 {
          background-color: #f1c40f; }
        .productCon .lfCon .item .screen label {
          cursor: pointer;
          font-style: italic;
          height: 22px; }
    .productCon .lfCon .topCon {
      text-indent: 25px;
      height: 65px;
      line-height: 65px;
      border: 1px solid #d2d2d2;
      font-size: 20px;
      font-weight: 600;
      box-shadow: 6px 6px 15px rgba(51, 51, 51, 0.2);
      margin-bottom: 25px; }
    .productCon .lfCon .midCon {
      padding: 25px 22px;
      box-shadow: 6px 6px 15px rgba(51, 51, 51, 0.2);
      border: 1px solid #d2d2d2; }
  .productCon .rtCon {
    width: 895px;
    margin-left: 32px; }
    .productCon .rtCon .topCon {
      height: 244px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
      .productCon .rtCon .topCon img {
        width: 244px;
        height: 244px; }
      .productCon .rtCon .topCon .txt {
        margin-left: 19px;
        width: 620px;
        color: #333; }
        .productCon .rtCon .topCon .txt h2 {
          font-size: 36px;
          height: 78px;
          line-height: 78px;
          text-align: center; }
        .productCon .rtCon .topCon .txt p {
          font-size: 14px;
          margin-bottom: 10px;
          font-family: 'Calibri-Light'; }
    .productCon .rtCon .midCon {
      border: 2px solid #d2d2d2;
      margin: 47px 0 31px; }
      .productCon .rtCon .midCon .item {
        padding: 16px;
        border-bottom: 1px solid #d2d2d2; }
        .productCon .rtCon .midCon .item:last-child {
          border: none; }
        .productCon .rtCon .midCon .item img {
          width: 300px;
          height: 300px; }
        .productCon .rtCon .midCon .item .txt {
          width: 559px;
          padding-left: 10px;
          border-left: 1px solid #d2d2d2;
          color: #333;
          position: relative;
          height: 300px;
          box-sizing: border-box;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box; }
          .productCon .rtCon .midCon .item .txt h3 {
            font-size: 20px;
            margin-bottom: 33px;
            font-family: 'Calibri'; }
          .productCon .rtCon .midCon .item .txt p {
            font-size: 18px;
            font-family: 'Calibri-Light';
            margin-bottom: 29px; }
          .productCon .rtCon .midCon .item .txt .price {
            position: absolute;
            right: 44px;
            bottom: 10px;
            font-family: 'Calibri-Bold';
            font-size: 24px; }
    .productCon .rtCon ul {
      margin: 0 120px 30px 0; }
      .productCon .rtCon ul li {
        width: 26px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border: 2px solid #aaa;
        margin-left: 7px;
        cursor: pointer; }
        .productCon .rtCon ul li:hover {
          background: #000;
          color: #fff;
          border: 2px solid #000; }

/* produts */
.produts {
  width: 1032px;
  margin: 42px auto 0; }
  .produts h3 {
    font-size: 24px;
    text-align: center;
    font-weight: 600;
    color: #333;
    margin-bottom: 40px; }
  .produts .swiper-container {
    height: 464px;
    border: 2px solid #d2d2d2;
    margin-bottom: 44px; }
    .produts .swiper-container .swiper-slide {
      width: 344px;
      border-right: 1px solid #d2d2d2;
      padding: 14px 23px;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box; }
      .produts .swiper-container .swiper-slide h4 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px; }
      .produts .swiper-container .swiper-slide p {
        font-size: 14px;
        line-height: 20px; }
      .produts .swiper-container .swiper-slide img {
        width: 235px;
        height: 235px;
        display: block;
        margin: 28px auto 46px; }
      .produts .swiper-container .swiper-slide span {
        font-size: 18px; }
    .produts .swiper-container .swiper-button-prev, .produts .swiper-container .swiper-button-next {
      height: 18px; }

.midBan {
  height: 578px;
  background-image: url("../images/icon_11.jpg");
  padding-top: 147px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-size: cover;
  -webkit-background-size: cover;
  background-position: center;
  text-align: center; }
  .midBan h3 {
    font-size: 40px;
    color: #030200;
    margin-bottom: 55px; }
  .midBan h2 {
    font-size: 60px;
    color: #ffc107;
    font-weight: 600;
    margin-bottom: 52px; }
  .midBan a {
    display: block;
    width: 225px;
    height: 47px;
    line-height: 47px;
    text-align: center;
    border: 2px solid #434343;
    font-size: 20px;
    margin: 0 auto;
    font-family: 'Calibri-Bold'; }
    .midBan a:hover {
      background: #333;
      color: #fff; }