*,
:after,
:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
a,
button {
  cursor: pointer;
  outline: none;
}
.xg-control__submit {
  float: right;
}
.mt-control__left img {
  vertical-align: initial;
}
.mt-control__right .xg-control input {
  height: 42px;
}
$primary: #8a5ce6;
$dark: #744fbd;
$light: #a37af5;
$lighter: #9a7ac8;
$blue: #2667e9;
// mixin
/* 箭头
arrow(direction,
size,
color);
*/
@mixin arrow($direction, $size, $color) {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border-width: $size;

  @if $direction==top {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent $color transparent;
    border-top: none;
  } @else if $direction==bottom {
    border-style: solid dashed dashed dashed;
    border-color: $color transparent transparent transparent;
    border-bottom: none;
  } @else if $direction==right {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent $color;
    border-right: none;
  } @else if $direction==left {
    border-style: dashed solid dashed dashed;
    border-color: transparent $color transparent transparent;
    border-left: none;
  }
}

// 单行省略
@mixin singleline-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* banner */
.boxcenter {
  width: 1200px;
  margin: auto;
}
.list {
  background: url(../images/banner_bg.png) top center no-repeat;
  background-color: #e8e6f0;
    padding-bottom: 30px;
  &_banner {
    width: 1200px;
    margin: auto;
    
    &_t {
      margin-bottom: 10px;
    }
    &_l {
      width: 974px;
      min-height: 334px;
      background-color: #ffffff;
      -webkit-box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
      box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
      li{
        &:first-child{
          .condition_r{
            font-weight: bold;
          }
          &.more{
            .condition_r{
              font-weight: normal;
            }
          }
        }
      }
      .more{
        .condition_l{
          line-height: 75px;
        }
      }
      .choosed{
        padding: 16px 16px 6px;
        span{
          font-size: 14px;
          color: #666;
          font-weight: bold;
        }
        &_r{
          width: 790px;
          margin-left: 4px;
        }
        a{
          display: inline-block;
          width: 120px;
          height: 30px;
          background-color: #ffffff;
          border: solid 1px #a37af5;
          font-size: 13px;
          color: #7c59c2;
          margin: 0 4px;
          text-align: center;
          line-height: 28px;
          margin-bottom: 10px;
          position: relative;
          &:after{
            content:"";
            width: 11px;
            height: 11px;
            display: inline-block;
            position: absolute;
            right: 0;
            top: 0;
            background-color: #a37af5;
            background-image: url(../images/close.png);
            background-position: center;
            background-repeat: no-repeat;
          }
          &.clear{
            border-color: #e6e6e6;
            color: #666666;
            -webkit-transition: all .3s;
            transition: all .3s;
            &:hover{
              background-color: #666666;
              color: #fff;
            }
            &:after{
              display: none;
            }
          }
        }
      }
      .condition{
        &_l{
          width: 102px;
          line-height: 48px;
          background-color: #1c202a;
          font-size: 14px;
          color: #dbdbdb;
          font-weight: bold;
          padding-left: 16px;
          border-bottom: 1px dotted #50545c;
        }
        &_r{
          width: 852px;
          border-bottom: 1px dotted #e1e1e1;
          font-size: 0;
          padding: 11px 0 11px 5px;
          position: relative;
          
          &:before{
            content: "";
            display: inline-block;
            width: 2px;
            height: 100%;
            background-color: #fff;
            position: absolute;
            left: 5px;
            top: 0;
            z-index: 2;
          }
          a{
            font-size: 13px;
            line-height: 26px;
            display: inline-block;
            margin: 0 15px;
            position: relative;
            color: #666666;
            -webkit-transition: all .3s;
            transition: all .3s;
            &:before{
              content: "";
              display: inline-block;
              position: absolute;
              left: -15px;
              top: 10px;
              width: 1px;
              height: 7px;
              background-color: #c3c3c3;
            }
            &.on,&:hover{
              color: #8a5ce6;
            }
          }
          .selects{
            float: left;
            margin-left: 15px;
            position: relative;
            span{
              line-height: 26px;
              min-width:112px;
              cursor: pointer;
              padding: 0 10px;
              display: inline-block;
              height: 26px;
              background-color: #ffffff;
              border: solid 1px #e5e5e5;
              font-size: 13px;
              color: #666;
              img{
                position: relative;
                top: 12px;
                margin-left: 22px;
              }
            }
            dl{
              background-color: #fff;
              border: solid 1px #e6e6e6;
              border-top: none;
              overflow-x: hidden;
              overflow-y: auto!important;
              max-height: 130px;
              display: none;
              position: absolute;
              width: 100%;
              top: 26px;
              left: 0;
              z-index: 2;
              dd{
                font-size: 13px;
                color: #666666;
                -webkit-transition: all .3s;
                transition: all .3s;
                a{
                  display: inline-block;
                  width: 100%;
                  height: 100%;
                  margin: 0;
                    padding: 0 12px;
                  &:before{
                    display: none;
                  }
                }
                &:hover{
                  background-color: #2667e9;
                  a{
                    color: #fff!important;
                    
                  }
                  
                }
              }
            }
          }
          .control{
            display:inline-block;
            cursor: pointer;
            width: 52px;
            height: 22px;
            background-color: #a37af5;
            font-size: 12px;
            color: #fff;
            line-height: 22px;
            text-align: center; 
            position: relative;
            -webkit-transition: all .3s;
            transition: all .3s;
            // margin-right: 16px;
            margin-top: 4px;
            margin-left: 15px;
            // margin-right: 20px;
            &:hover{
              opacity: 0.8;
            }
            &.fr{
              float: none;
            }
            // &:before{
            //   content: "";
            //   display: inline-block;
            //   position: absolute;
            //   left: -46px;
            //   top: 6px;
            //   width: 1px;
            //   height: 7px;
            //   background-color: #c3c3c3;
            // }
          }
          .range{
            display: inline-block;
            margin-left: 22px;
            position: relative;
            &:before{
              content: "";
              display: inline-block;
              position: absolute;
              left: -20px;
              top: 8px;
              width: 1px;
              height: 7px;
              background-color: #c3c3c3;
            }
            input{
              width: 50px;
              height: 22px;
              background-color: #ffffff;
              border: solid 1px #e6e6e6;
              padding: 0 4px;
            }
            span{
              font-size: 13px;
              color: #666;
              margin: 0 10px;
            }
            a{
              width: 46px;
              height: 22px;
              margin: 0 0 0 4px;
              text-align: center;
              line-height: 22px;
              display: inline-block;
              font-size: 12px;
              color: #fff;
              background-color: #a37af5;
              -webkit-transition: all .3s;
              transition: all .3s;
              &:before{
                display: none;
              }
              &:hover{
                opacity: 0.8;
              }
            }
          }
        }
      }
    }
    &_r {
      width: 220px;
      min-height: 334px;
      overflow: hidden;
      background-color: #ffffff;
      -webkit-box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
      box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
      &_t {
        width: 220px;
        height: 174px;
        background: url(../images/banner_r_bg.png) center no-repeat;
        padding: 30px 11px 0;
        text-align: center;
        p{
          font-size: 13px;
          color: #fff;
          opacity: 0.36;
          margin: -6px 0 36px;
        }
        a {
          display: inline-block;
          width: 96px;
          height: 34px;
          -webkit-box-shadow: 0px 6px 8px 0px rgba(68, 77, 97, 0.3);
          box-shadow: 0px 6px 8px 0px rgba(68, 77, 97, 0.3);
          border-radius: 17px;
          text-align: center;
          font-size: 14px;
          font-weight: bold;
          line-height: 34px;
          -webkit-transition: all .3s;
          transition: all .3s;
          &.btnl {
            color: #744fbd;
            margin-right: 2px;
            background-image: -webkit-gradient(linear, left bottom, left top, from(#f0e5ff), to(#ffffff)),
              -webkit-gradient(linear, left top, left bottom, from(#7a7a7a), to(#7a7a7a));
            background-image: linear-gradient(0deg, #f0e5ff 0%, #ffffff 100%),
              linear-gradient(#7a7a7a, #7a7a7a);
              &:hover{
                color: #8b6fc7;
              }
          }
          &.btnr {
            color: #dbdbdb;
            background-image: -webkit-gradient(linear, left bottom, left top, from(#0e1014), to(#242833)),
              -webkit-gradient(linear, left top, left bottom, from(#1c202a), to(#1c202a));
            background-image: linear-gradient(0deg, #0e1014 0%, #242833 100%),
              linear-gradient(#1c202a, #1c202a);
              &:hover{
                color: #fff;
              }
          }
        }
      }
      &_b{
        &_t{
          font-size: 15px;
          color: #333;
          font-weight: bold;
          line-height: 38px;
          padding: 0 12px;
          border-bottom: 1px dotted #cccccc;
        }
        &_bd{
          padding: 0 12px;
          li{
            
            border-bottom: 1px dotted #cccccc;
            p{
              padding:0 0 8px 0;
              font-size: 12px;
              color: #b3b3b3;
              @include singleline-ellipsis;
              text-indent: 10px;
              &:first-child{
                text-indent: 0;
                padding:8px 0 0 0;
              }
              span{
                font-size: 12px;
                color: #4d4d4d;
                &:first-child{
                  color:#2667e9;
                  font-weight: bold;
                  margin-right: 6px;
                  &:before{
                    content: "";
                    display: inline-block;
                    @include arrow(right,3px,#2667e9);
                    vertical-align: middle;
                    margin-right: 6px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  &_loc {
    display: inline-block;
    padding-top: 22px;
    span,
    a {
      font-size: 12px;
      color: #fff;
    }
    a {
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      &:hover {
        color: #fd6459;
      }
    }
    &_icon {
      &_l {
        @include arrow(right, 4px, #fff);
        opacity: 0.5;
        vertical-align: middle;
        &:before {
          content: '';
          display: inline-block;
          @include arrow(right, 4px, #fff);
          margin-left: 4px;
          vertical-align: middle;
        }
      }
      &_s {
        @include arrow(right, 3px, #fff);
        opacity: 0.24;
        vertical-align: middle;

        &:before {
          content: '';
          display: inline-block;
          @include arrow(right, 3px, #fff);
          margin-left: 3px;
          vertical-align: middle;
        }
      }
    }
  }
  &_num {
    display: inline-block;
    padding-top: 10px;
    position: relative;
    text-align: right;
    p {
      font-size: 12px;
      color: #fff;
      display: inline-block;
      margin-right: 40px;
      span {
        font-family: Arial;
        font-weight: bold;
        font-size: 26px;
      }
      &:first-child{
        position: relative;
        &:after {
          content: '';
          display: inline-block;
          width: 1px;
          height: 20px;
          background-color: #2a1575;
          opacity: 0.5;
          position: absolute;
          right: -20px;
          top: 12px;
        }
      }
    }
    .next {
      margin-left: 30px;
      display: inline-block;
      width: 21px;
      height: 21px;
      background-color: #684abb;
      border-radius: 3px;
      position: absolute;
      right: 0;
      top: 20px;
      text-align: center;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      opacity: 0.36;
      &:hover {
        opacity: 1;
      }
    }
  }
  &_bar{
    width: 1200px;
    margin: 24px auto 16px;
	height: 60px;
	background-color: #ffffff;
	-webkit-box-shadow: 0px 0px 8px 0px 
		rgba(51, 51, 51, 0.08);
	        box-shadow: 0px 0px 8px 0px 
    rgba(51, 51, 51, 0.08);
    >a{
      font-size: 14px;
      display: inline-block;
      color: #666;
      padding: 0 15px;
      line-height: 60px;
      border-left: 1px solid #ecebf4;
      -webkit-transition: all .3s;
      transition: all .3s;
      &:after{
        content: "";
        width: 7px;
        height: 9px;
        margin-left: 9px;
        display: inline-block;
        background: url(../images/down.png) center no-repeat;
      }
      &.up{
        font-weight: bold;
        color:#8a5ce5;
        &:after{
          background: url(../images/down_hover.png) center no-repeat;
          -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
        }
      }
      &.down{
        font-weight: bold;
        color:#8a5ce5;
        &:after{
          background: url(../images/down_hover.png) center no-repeat;
        }
      }
      &:hover{
        color: #8a5ce5;
        &:after{
          -webkit-transition: 'background' 0.2s;
          transition: 'background' 0.2s;
          background: url(../images/down_hover.png) center no-repeat;
        }
      }
      &.zs{
        opacity: 0.6;
        &:after{
          display: none;
        }
        &:hover{
          opacity: 1;
        }
        &.on{
          opacity: 1;
        }
      }
    }
    &_page{
      line-height: 60px;
      font-size: 0;
      span{
        font-size: 14px;
        display: inline-block;
        padding-right: 12px;
        color: #666;
        vertical-align: middle;
        border-right: 1px solid #ecebf4;
      }
      a{
        display: inline-block;
        width: 22px;
        height: 22px;
        border: solid 1px #e0e0e0;
        vertical-align: middle;
        position: relative;
        &:after{
          content: "";
          display: inline-block;
          width: 22px;
          height: 22px;
          position: absolute;
          left: 0;
          top: 0;
          background: url(../images/arrow_right.png) center no-repeat;
        }
        &:hover{
          border-color: #8644f5;
          &:after{
            background: url(../images/arrow_left.png) center no-repeat;
          }
        }

        &.prev{
          margin-left: 10px;
          margin-right: 3px;
          &:after{
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
          }
          &:hover{
            &:after{
              -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
            }
          }
        }
        &.next{
          margin-right: 10px;
          &:hover{
            &:after{
              -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
            }
          }
        }
      }
    }
  }
  &_list{
    width: 1210px;
    margin: auto;
    li{
      float: left;
      width: 292px;
      height: 345px;
      position: relative;
      top: 0;
      margin: 0 5px 10px;
      background-color: #ffffff;
      border-top: 3px solid #2667e9;
      background-image: url(../images/item_bg.png);
      background-repeat: no-repeat;
      background-position: top center;
      -webkit-box-shadow: 0px 0px 8px 0px 
        rgba(51, 51, 51, 0.08);
              box-shadow: 0px 0px 8px 0px 
        rgba(51, 51, 51, 0.08);
        -webkit-transition: all .3s;
        transition: all .3s;
        &:hover{
          -webkit-box-shadow: 0px 6px 10px 0px 
        rgba(51, 51, 51, 0.2);
                  box-shadow: 0px 6px 10px 0px 
        rgba(51, 51, 51, 0.2);
        top: -3px;
            border-top-color: #a37af5;
    }
    
    }
    &_mask{
      display: inline-block;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
    }
    &_tag{
      position: absolute;
      top: 10px;
      right: 20px;
      text-align: center;
      line-height: 22px;
      height: 22px;
      padding: 0 14px;
      background-color: #e9edf7;
      font-size: 12px;
      color: #3665c2;
      border-radius: 10px;
    -webkit-transition: all .3s;
    transition: all .3s;
    }
    &_icons{
      padding: 15px 0 0 20px;
      font-size: 0;
      span{
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
    &_block{
      position: relative;
    }
    &_5z{
      position: absolute;
      right: 10px;
      top: 30px;
      width: 80px;
    }
    &_title{
      word-break: break-all;
      font-size: 16px;
      font-weight: bold;
      line-height: 24px;
      color: #333;
      padding: 8px 20px;
      height: 64px;
      
    }
    &_price{
      padding-left: 20px;
      margin-bottom: 10px;
	  margin-top: 20px;
      span{
        font-size: 18px;
        line-height: 42px;
        font-weight: bold;
        color: #fd4249;
        vertical-align: middle;
      }
      a{
        margin-left: 48px;
        font-size: 12px;
        color: #afacbf;
        vertical-align: middle;
        line-height: 42px;
        position: relative;
        z-index: 2;
        i{
          display: inline-block;
          width: 14px;
          height: 13px;
          background: url(../images/icon_col.png) center no-repeat;
          -webkit-transition: 'background' 0.2s;
          transition: 'background' 0.2s;
          position: relative;
          top: 2px;
        }
        &.collect{
          i{
            background: url(../images/icon_col_on.png) center no-repeat;
          }
        }
      }
      &:before{
        content: "";
        display: block;
        width: 30px;
        height: 0;
        border-bottom: 1px dashed #e7e7e7;
      }
    }
    &_text{
      border-top: 1px solid #ecedf5;
      font-size: 0;
      dd{
        display: inline-block;
        width: 50%;
        height: 63px;
        border-bottom: 1px solid #ecedf5;
        border-left: 1px solid #ecedf5;
        padding: 10px 22px;
        &:nth-child(2n+1){
          border-left: none;
        }
        p{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &:first-child{
            font-size: 14px;
            color: #555266;
            line-height: 24px;
          }
          &:last-child{
            font-size: 12px;
            color: #afacbf;
            line-height: 24px;
          }
        }
      }
    }
    &_btns{
      padding: 22px 20px;
     
      a{
        position: relative;
        z-index: 2;
        -webkit-transition: all .3s;
        transition: all .3s;
        float: left;
        
        span{
          float: left;
          margin-left: 4px;
          -webkit-transition: all .3s;
        transition: all .3s;
        }
        i{
          float: left;
          position: relative;
          top: 2px;
          -webkit-transition: all .3s;
        transition: all .3s;
        }
        &:first-child{
          span{
            font-size: 13px;
            color: #9a7ac8;
          }
          i{
            width: 19px;
            height: 16px;
            display: inline-block;
            background: url(../images/icon_contact.png) no-repeat;
          }
          &:hover{
            span{
              color: #744fbd;
            }
            i{
              background: url(../images/icon_contact_hover.png) no-repeat;
            }
          }
        }
        &:last-child{
          margin-left: 74px;
          position: relative;
          &:before{
            content: "";
            width: 1px;
            height: 12px;
            background-color: #ecedf5;
            display: inline-block;
            position: absolute;
            left: -22px;
            top: 4px;
          }
          i{
            width: 16px;
            height: 16px;
            display: inline-block;
            background: url(../images/icon_paper.png) no-repeat;
          }
          span{
            font-size: 13px;
            color: #afacbf;
          }
          &:hover{
            span{
              color: #2667e9;
            }
            i{
              background: url(../images/icon_paper_hover.png) no-repeat;
            }
          }
        }
      }
    }
  }
  &_page{
    width: 1200px;
  height: 60px;
  text-align: center;
  margin: 10px auto 30px;
  padding: 15px 12px;
	background-color: #ffffff;
	-webkit-box-shadow: 0px 0px 8px 0px 
		rgba(51, 51, 51, 0.08);
	        box-shadow: 0px 0px 8px 0px 
    rgba(51, 51, 51, 0.08);
    >a{
      display: inline-block;
      width: 34px;
  height: 31px;
  text-align: center;
  line-height: 31px;
	background-color: #ffffff;
  border: solid 1px #e5e5e5;
  -webkit-transition: all .3s;
  transition: all .3s;
  &:hover,&.on{
    border-color: #2667e9;
    color: #2667e9;
  }
  &.large{
    width: 59px;
    margin-right: 4px;
  }
    }
    .jump{
      input{
        width: 40px;
        height: 31px;
        border:1px solid #e5e5e5;
        padding: 0 4px;
      }
      a{
        display: inline-block;
        width: 42px;
        height: 31px;
        background-color: #2667e9;
        font-size: 12px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: 31px;
        -webkit-transition: all .3s;
        transition: all .3s;
        &:hover{
          background-color: #457cec;
        }
      }
    }
    .page{
      line-height: 31px;
      font-size: 12px;
      color: #797979;
      margin-right: 16px;
    }
  }
  &_recommend{
    width: 1212px;
    margin: auto;
    background: url(../images/recommend_bg.png) top center;
    &_title{
      padding: 33px 0 0 232px;
      &_r{
        margin-left: 14px;
        p{
          &:first-child{
            font-size: 0;
            border-bottom: 1px dotted #d4d4d4;
            line-height: 46px;
            label{
              font-size: 14px;
              color: #5e5e5e;
              vertical-align: middle;
              margin: 0 6px;
            }
            span{
              font-size: 24px;
              color: #282828;
              vertical-align: middle;
            }
            a{
              display: inline-block;
              vertical-align: middle;
              height: 26px;
              line-height: 26px;
              font-size: 14px;
              color: #fff;
              text-align: center;
              -webkit-transition: all .3s;
              transition: all .3s;
              &:first-of-type{
                width: 120px;
                background-color: #ff7236;
                border-radius: 2px;
                &:hover{
                  background-color: #ff8652;
                }
              }
              &:nth-of-type(2){
                width: 110px;
                background-color: #2667e9;
                &:hover{
                  background-color: #457cec;
                }
              }
              &:nth-of-type(3){
                width: 90px;
                background-color: #a37af5;
                &:hover{
                  background-color: #b08df6;
                }
              }
            }
          }
          &:last-child{
            font-size: 12px;
            line-height: 32px;
            color: #959595;
          }
        }
      }
    }
    &_list{
      width: 1192px;
      li{
        width: 288px;
        background-color: #f2f4f7;
        -webkit-box-shadow: none;
                box-shadow: none;
                &:hover{
                  background-color: #fff;
                  .list_list_text{
                    border-color: #ecedf5;
                    dd{
                      border-color: #ecedf5;
                    }
                  }
                }
      }
      .list_list_text{
        border-color: #fff;
        dd{
          border-color: #fff;
        }
      }
      .list_list_btns a:last-child:before{
        left: -25px;
      }
      >p:first-child{
        font-size: 20px;
        color: #292929;
        text-align: center;
        margin: 20px 0 12px;
        &:before,&:after{
          content: "";
          width: 24px;
          height: 1px;
          display: inline-block;
          background-color: #dbdbdb;
          vertical-align: middle;
          margin: 0 8px;
        }
      }
    }
  }
}