$legacy-support-for-ie: false !default;
$filter:true !default;

//
@mixin last_w($all:$width,$first:0){
  width: $all - $first;
}

@mixin w_minus($key,$value1:0,$value2:0,$rate:1){
  #{$key}:($value1 - $value2)/$rate;
}

// 总的width ,height; 根据padding计算出相应的值，padding是个数据
// 引用 @include wh_padding(*px, *px, *px|*px *px|*px *px *px|*px *px *px *px);
//

@mixin wh_padding($width, $height, $padding){
  $len: length($padding);

  @if $len == 1 {
    height: $height - 2 * nth($padding,1);
    width: $width - 2 * nth($padding,1);
    padding: $padding;
  } @else if length($padding) == 2 {
    height: $height - 2 * nth($padding,1);
    width: $width - 2 * nth($padding,2);
    padding: $padding;
  } @else if length($padding) == 3{
    height: $height - nth($padding,1) - nth($padding,3);
    width: $width - 2 * nth($padding,2);
    padding: $padding;
  } @else if length($padding) == 4{
    height: $height - nth($padding,1) - nth($padding,3);
    width: $width - nth($padding,2) - nth($padding,4);
    padding: $padding;
  }
}

//
//  透明度  小数;
//

@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  @if $filter{
    filter: alpha(opacity=$opacity);
  }
}
//
//  背景透明度处理
//  $color 可以是数组RGB,也可以是#ABCDEF---十六进制的表示
//  $op 必须是小数

@mixin bg_opacity($color, $op){

  @if length($color) == 1{    // input color in 16
    background:$color;
    filter:alpha(opacity = $op *100);
    background:rgba($color,$op);
  }

  @else if length($color) == 3{   // input color in RGB
    background:rgb(nth($color,1),nth($color,2),nth($color,3));
    filter:alpha(opacity = $op *100);
    background:rgba(nth($color,1),nth($color,2),nth($color,3),$op);

  }
}

//
//  css3 不同浏览器兼容处理
//

@mixin c3($key , $value){
  -webkit-#{$key}: $value;
  -moz-#{$key}: $value;
  -o-#{$key}: $value;
  #{$key}: $value;
}

//
// display-inline 兼容IE6,IE7
// 提供一个跨浏览器的方法来实现`display:inline-block
//
//@mixin inline_box_p{
//  font-size: 0;
//}
$inline-block-alignment: middle !default;//设置一个默认的对齐方式
@mixin display-inline($alignment: $inline-block-alignment) {
  display: inline-block;
  @if $alignment and $alignment != none {
    vertical-align: $alignment;
  }
  @if $legacy-support-for-ie {
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
  }
}

%display-inline{
  @include display-inline();
}
//水平居中 ---单个元素使用
@mixin horizontal-center {
  margin-left: auto;
  margin-right: auto;
}
//水平居中 ---多个元素使用
%horizontal-center {
  @include horizontal-center;
}
//
//  float 解决IE6下双margin
//

@mixin float($side:left){
  float: unquote($side);
  @if $legacy-support-for-ie {
    _display:inline;
  }
}
//左浮动

@mixin pull-left{
  @include float(left);
}

%pull-left {
  @include float(left);
}


//右浮动

@mixin pull-right{
  @include float(right);
}

%pull-right {
  @include float(right);
}

//
// reset-float 重置掉float
//
@mixin reset-float($display:block){
  float:none;
  display: $display;
}

//清除浮动clearfix
@mixin clearfix {
  @if $legacy-support-for-ie {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
    overflow: hidden;
  }
}

%clearfix {
  @include clearfix;
}

//1.浏览器和屏幕阅读器都隐藏元素

@mixin hidden {
  display: none !important;
  visibility: hidden;
}

%hidden {
  @include hidden;
}

//2.仅浏览器隐藏，屏幕阅读器不被隐藏

@mixin visuallyhidden {
  @if $legacy-support-for-ie {
    clip: rect(0,0,0,0);
  }
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

  ////扩展了`.visuallyhidden`，充许`.focusable`元素通过键盘获取
  &.focusable:active,
  &.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
  }
}

%visuallyhidden {
  @include visuallyhidden;
}

//3.隐藏元素，但布局中占有空间

@mixin invisible {
  visibility: hidden;
}

%invisible {
  @include invisible;
}
//截取文本text-overflow  单行文本
@mixin singleline-ellipsis($substract:0){//`$substract`单位为%
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100% - $substract;
}

%singleline-ellipsis {
  @include singleline-ellipsis;
}

//禁用样式disabled
@mixin disabled($bgColor: #e6e6e6,$textColor:#ababab){
  background-color: $bgColor !important;
  color: $textColor !important;
  cursor: not-allowed !important;
}


//最小高度min-height
@mixin min-height($height){
  min-height: $height;
  height: auto !important;
  @if $legacy-support-for-ie {
    _height: $height;
  }
}

//absolut center center
@mixin absolute_center($w,$h){
  position: absolute;
  left: 50%;
  top: 50%;
  width: $w;
  height: $h;
  margin-top: -($h/2);
  margin-left: -($w/2);
}

//
//  css3特效，渐变背景色
//  $direction 方向：left|top|right|bottom|angle|数组 type,angle
//  $colors 颜色数组 ---需要赋到一个变量里
//

@mixin bg-linear-gradient($colors, $diretion:top ){
  @if length($colors) == 2{
    $c1 : nth($colors,1);
    $c2 : nth($colors,2);
    background-color:mix($c1,$c2);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$c1}, endColorstr=#{$c2});
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#{$c1}, endColorstr=#{$c2})";
    @if $diretion == top{
      background: -webkit-gradient(linear, left top, left bottom, from($c1), to($c2));
    } @else if $diretion == left{
      background: -webkit-gradient(linear, left top, right top, from($c1), to($c2));
    } @else if $diretion == lefttop{
      background: -webkit-gradient(linear, left top, right bottom, from($c1), to($c2));
    } @else if $diretion == righttop{
      background: -webkit-gradient(linear, right top, left bottom, from($c1), to($c2));
    }
  }
  background: -webkit-linear-gradient($diretion, $colors);
  background: -moz-linear-gradient($diretion, $colors);
  background: -ms-linear-gradient($diretion, $colors);
  background: -o-linear-gradient($diretion, $colors);
  background: linear-gradient($diretion, $colors);

}




//
//  三角形 -e正三角形， -r直三角形
//  $name: up-e, down-e, left-e, right-e ; up-r-l, up-r-r, down-e-l, down-e-r;
//  $width: 三角形的宽，计算是会/2，半个border在值
//  $height: 三角形的高
//  $line: solid dotted ...
//  $bgColor: IE6下的背景色，只用于IE6
//  带边框的三角形可以用两个三角定位来实现

@mixin triangle( $name, $width, $height, $line: solid, $color: #333, $bgColor:#fff){

  width: 0;
  height: 0;
  _zoom:1;
  overflow: hidden;
  display:inline-block;
  $border-w: $width / 2 solid transparent;
  $border-h: $height / 2 solid transparent;
  $border-w6: $width / 2 solid $bgColor;
  $border-h6: $height / 2 solid $bgColor;
  $border-fw: $width $line $color;
  $border-fh: $height $line $color;
  $border-hw: $width / 2 $line $color;
  $border-hh: $height / 2 $line $color;

  @if $name == up-e {  //正，上三角
    border-top: 0;
    border-left: $border-w;
    border-right: $border-w;
    _border-left: $border-w6;
    _border-right: $border-w6;
    border-bottom: $border-fh;
  } @else if $name == down-e {    //正，下三角
    border-top: $border-fh;
    border-left: $border-w;
    border-right: $border-w;
    _border-left: $border-w6;
    _border-right: $border-w6;      border-bottom: 0;
  } @else if $name == left-e {    //正，左三角
    border-top: $border-h;
    border-left: 0;
    border-right: $border-fw;
    border-bottom: $border-h;
    _border-top: $border-h6;
    _border-bottom: $border-h6;
  } @else if $name == right-e {   //正，右三角
    border-top: $border-h;
    border-left: $border-fw;
    border-right:0;
    border-bottom: $border-h;
    _border-top: $border-h6;
    _border-bottom: $border-h6;
  } @else if $name == up-r-l { //直 左 上三角
    border-top: $border-h;
    border-left: $border-w;
    border-right: $border-hw;
    border-bottom: $border-hh;
  } @else if $name == up-r-r { //直 右 上三角
    border-top: $border-h;
    border-left: $border-hw;
    border-right: $border-w;
    border-bottom: $border-hh;
  } @else if $name == down-r-l { //直 左 下三角
    border-top: $border-hh;
    border-left: $border-w;
    border-right: $border-hw;
    border-bottom: $border-h;
  } @else if $name == down-r-r { //直 左 下三角
    border-top: $border-hh;
    border-left: $border-hw;
    border-right: $border-w;
    border-bottom: $border-h;
  }
}

//
//  变灰
//

@mixin gray{
  filter:gray;
  -o-filter:grayscale(1);
  -ms-filter:grayscale(1);
  -moz-filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
  filter:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImdyYXlzY2FsZSI+PGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAgMCAwIDEgMCIvPjwvZmlsdGVyPjwvc3ZnPg==#grayscale");
  filter:grayscale(100%);
}

//
//  正常
//

@mixin normal{
  filter:none;
  -o-filter:grayscale(0);
  -ms-filter:grayscale(0);
  -moz-filter:grayscale(0);
  -webkit-filter:grayscale(0);
  filter:grayscale(0);
}

//
//  圆角设置，$direction选填，all|top|right|bottom|left|right|top-left|top-right|bottom-right|bottom-left
//  domo: @include border-radius(10px, top left);
//

@mixin border-radius($size, $direction:all){
  @if $direction == all{
    border-radius:$size;
  } @else if length($direction) == 2 {
    border-#{nth($direction,1)}-#{nth($direction,2)}-radius:$size;
  }
  @else if $direction == top or $direction == bottom{
    border-#{$direction}-left-radius:$size;
    border-#{$direction}-right-radius:$size;
  } @else if $direction == right or $direction == left{
    border-top-#{$direction}-radius:$size;
    border-bottom-#{$direction}-radius:$size;
  }
}


@mixin line_height($height,$line-height: $height){
  height: $height;
  line-height: $line-height;
}



//display:flex
@mixin display_flex($flex: flex){
  display: -webkit-box;
  display:-ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
%alignitem_center {
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items: center;
}
@mixin flex($num){
  -webkit-box-flex: $num;
  -webkit-flex: $num;
  -ms-flex: $num;
  flex: $num;
  display: block;
  position: relative;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  //    max-width: 100%;
  //    width: 0;
}

@mixin flex-cell($width) {
  -webkit-flex-basis: $width;
  -ms-flex-preferred-size: $width;
  flex-basis: $width;
  max-width: $width;
  width: auto!important
}

//图片，背景图片的响应式布局Response
@mixin  response_pic_wrap($width:100%,$height:100%){
  position: relative;
  :before{
    content: '';
    display: block;
    width: $width;
    padding-top: $height;
  }
  .pci_box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: $height;
    background-color: #fff;
    img{
      max-width: 100%;
      height: auto;
      width:100%;
      max-height: 100%;
      vertical-align: top;
    }
  }
}



$blueColor: #1493e3; //
$mainColor:#fe4c40;
$colorRed:#ff6060;
$redColor:#e1004a;
$tipColor:#d80303;
$color333:#333;
$color999:#999;
$color666:#666;
$colorccc:#ccc;
$colred: #f27274;
$colddd: #dddddd;
$m_color:#fe664f; // 新的主色调

$width:1200px;

$borderColor: #d7d7d7; // default border color
$lightborderColor:#dcdcdc;
$bgColor:#f8f8f8;
//图片水平垂直居中
//Picture horizontal vertical center
@mixin pic_hor_ver_center($w,$h:$w){
  width: $w;
  height: $h;
  border: 1px solid $borderColor;
  text-align: center;
  display: table;
  position: relative;
  overflow: hidden;
  line-height: 0;
  @extend %pull-left;
  span{
    width: $w;
    height: $h;
    display: table-cell;
    vertical-align: middle;
  }
  img{
    margin: 0 auto;
    max-width: $w;
    max-height: $h;
  }
}


@mixin px2rem($property, $values,$baseline-rem:75) {
  $max: length($values);//返回$values列表的长度值
  $pxValues: '';
  $remValues: '';
  @for $i from 1 through $max {
    $value: (nth($values, $i));
    $remValues: #{$remValues + $value/$baseline-rem}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  }
  #{$property}: $remValues;
}

//任何手机屏幕上px的统一
//px2px(font-size, 32);
@mixin px2px($name,$px){
  #{$name}:round($px/2)*1px;
  [data-dpr = "2"] &{
    #{$name}:$px*1px;
  }
  [data-dpr = "2.5"] &{
    #{$name}:round($px*2.5/2)*1px;
  }

  [data-dpr = "2.75"] &{
    #{$name}:round($px*2.75/2)*1px;
  }

  [data-dpr = "3"] &{
    #{$name}:round($px*3/2)*1px;
  }
  [data-dpr = "4"] &{
    #{$name}:round($px*2)*1px;
  }
}

@mixin font-dpr($px){
  @include  px2px(font-size,$px)
}

@mixin wlh($w, $h, $lh){
  @include px2rem(width, $w);
  @include px2rem(height, $h);
  @include px2rem(line-height, $lh);
}
@mixin lh($h, $lh){
  @include px2rem(height, $h);
  @include px2rem(line-height, $lh);
}
@mixin wh($w, $h){
  @include px2rem(width, $w);
  @include px2rem(height, $h);
}

@mixin _icon($w, $h, $mt){
  @include px2rem(width, $w);
  @include px2rem(height, $h);
  vertical-align: middle;
  display: inline-block;
  @include px2rem(margin-top, $mt);
  background: {
    repeat: no-repeat;
    position: center center;
    size: contain;
  };
}
@mixin _icondb($w, $h, $mt){
  @include px2rem(width, $w);
  @include px2rem(height, $h);
  vertical-align: middle;
  display: block;
  margin: 0 auto;
  @include px2rem(margin-top, $mt);
  background: {
    repeat: no-repeat;
    position: center center;
    size: contain;
  };
}
%boradius{
  @include px2rem(border-radius, 5);
}
%btnCom{
  @include lh(100, 100);
  @extend %boradius;
  background: $colred;
  @extend %colfff;
  @include font-dpr(34);
  @extend %dibct;
  @include px2rem(margin, 40 30);
}
%colfff{
  color: #ffffff;
}
%boradius8{
  @include px2rem(border-radius, 8);
}
%dibct{
  display: block;
  text-align: center;
}
%col48{
  color: #484848;
}
%col98{
  color: #989898;
}
%col58{
  color: #585858;
}
// 账单 免息标志
%posiyuan {
  content: '';
  display: block;
  @include px2rem(width, 10);
  @include px2rem(height, 10);
  border-radius: 999px;
  -webkit-border-radius: 999px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  @include px2rem(margin-top, -5);
}
// 0.5px 分割线
@mixin borderscale($color, $p:bottom) {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    #{$p}: 0;
    height: 1px;
    background-color: $color;
    -webkit-transform: scale(1,0.5);
    transform: scale(1,0.5);
    -webkit-transform-origin: center #{$p};
    transform-origin: center #{$p};
}