// @import "./reset";
@import "../font/iconfont.css";
// 整个业面背景色
.body {
    background: #f4f4f4;
}
// 下划线
.bd-bottom {
    border-bottom: 1px solid #ededed;
}

.bd-gray {
    border-bottom: 1px solid#f5f5f5;
}
.bd-gray {
    border: 1px solid #e4e4e4;
}
.bd-gray1 {
    border-top: 2px solid #e4e4e4;
}
.bd-gray2 {
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;  
}
 
.bd-gray3{
    border-bottom: 1px solid #e4e4e4;
}
.bd-gray4{
    border-bottom: 2px solid #ff5f16;
}
// 线条

.bd {
    border: 1px solid #b9b9b9;
}
// 消除东西
.dsn {
    display: none;
}

// 公共颜色
.orangr {
    color: #ff702e;
}

// 去input点击后的黄色标签
.input {
    outline: medium;
}

.bg-orangr {
    background: #ff702e;
}



.bg-gray1 {
    background: #f4f4f4;
}

.black {
    color: #a2a5a8;
}

.h1 {
    height: 1px;
}

.gray1 {
    color: #797d82;
}

.red {
    color: #c03131;
}

.bg-red {
    background: #b92b2b;
}

// 灰条
.ht {
    border: 1px solid#f4f4f4;
    height: 9px;
    background: #f4f4f4;
}

// 公共样式2D
.lable2D {
    color: #ffffff;
    height: 16px;
    width: 18px;
    background-color: #d4d3d9;
    display: inline-block;
    line-height: 16px;
    margin-left: 7px;
    text-align: center;
}

// 字体省略公共样式 
.ell {
    // display: block;
    // 文本超出省略
    text-overflow: ellipsis; // 隐藏周围其他内容
    white-space: nowrap; // 溢出隐藏
    overflow: hidden; // width: 250px;
}

// 共同公共样式
// pc常用公共样式
// 透明背景
.op {
    opacity: 0.5;
}

// 自动适应宽
.wa {
    width: calc((100vw - 33px)/3);
}

// 小圆角
.r {
    border-radius: 3px;
}

// 圆
.rr {
    border-radius: 50%;
}

// 去边框
.qb {
    border: none;
    outline: none;
}

// 底部
.b {
    bottom: 0;
}

// 顶部
.t {
    top: 0;
}

// 左浮
.fl {
    float: left;
}

//   右浮
.fr {
    float: right;
} //   清除浮动
.clear:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
}

//   溢出隐藏
.ovh {
    overflow: hidden;
}

// 溢出自动
.ova {
    overflow: auto;
}

// 移动端常用公共样式
// 字体颜色
.gray1 {
    color: #525252;
}

//灰色的边框
.bd {
    border: 1px solid gray;
}

//100%的高
.h100pc {
    height: 100%;
}

//100%的宽
.w100pc {
    width: 100%;
}

//隐藏元素
.dsn {
    display: none;
}

//字体加粗
.bold {
    font-weight: bold;
}

//字体减粗
.fw400 {
    font-weight: 400;
}

//传统盒子模型
.bzb {
    box-sizing: border-box;
}

//固定定位
.fixed {
    position: fixed;
}

//相对定位
.rel {
    position: relative;
}

//固定定位
.abs {
    position: absolute;
}

//单行文本水平居中
.tac {
    text-align: center;
}

//单行文本水平居右
.tar {
    text-align: right;
}

// 字体颜色设置
//红色
.orange {
    color: #ff5f16;
}
.fff {
    color: #ffffff;
}
.ddd {
    color: #8d421b;
}
.ggg{
    color: #d0d0d0;
}
.ggg1{
    color: #b9b9b9;
}
.ggg2{
    color: gray;
}
.hhh{
    color: #ffb9ab;
}
.red {
    color: #ff5f16;
}

//灰色
.gray {
    color: #adadad;
}

//白色
.fff {
    color: #ffffff;
}

//背景颜色
.bg-green {
    background: green;
}

.bg-red{
background: red;
}
.bg-gray {
    background: gray;
}
.bg-gray2 {
    background: #d0d0d0;
}
.bg-gray1 {
    background: #b9b9b9;
}
.bg-gray5 {
    background: #f4f4f4;
}
.bg-gray3 {
    background: #fafafa;
}
.bg-gray4{
    background: #f8f8f8;
}
.bg-coral{
    background:coral;
}
.bg-black{
    background: black;
}
.bg-crimson {
    background:crimson;
}
.bg-fff {
    background: #ffffff;
}

.bg-black {
    background: #222426;
}
.bg-green {
    background: green;
}

.bg-gray {
    background: gray;
}

.bg-fff {
    background: #ffffff;
}

.bg-black {
    background: #222426;
}

.bg-red {
    background: #f05045;
}

// 高度
.h10 {
    height: 10px;
}




// 宽
.w10 {
    width: 10px;
}



// 行高
.lh15 {
    line-height: 1.5;
}



// (12) 字体大小
@0px: 0px; // margin-left
.font(@n, @i: 6) when (@i =< @n) {
    .f@{i} {
        font-size: @i+@0px;
    }
    .font(@n, (@i + 2)); // +2得到的结果是1,3,5,7
    // .mg-l(@n, (@i + 2));
}

.font(36);

// (13) margin-left 左
@0px: 0px; // margin-left
.mg-l(@n, @i: 1) when (@i =< @n) {
    .mg-l-@{i} {
        margin-left: @i+@0px;
    }
    .mg-l(@n, (@i + 1)); // +2得到的结果是1,3,5,7
    // .mg-l(@n, (@i + 2));
}

.mg-l(50);
// (13) margin-right
@0px: 0px; // margin-right 右
.mg-r(@n, @i: 1) when (@i =< @n) {
    .mg-r-@{i} {
        margin-right: @i+@0px;
    }
    .mg-r(@n, (@i + 1)); // +2得到的结果是1,3,5,7
    // .mg-r(@n, (@i + 2));
}

.mg-r(50);


// (14) margin-top 上
.mg-t(@n, @i: 1) when (@i =< @n) {
    .mg-t-@{i} {
        margin-top: @i+@0px;
    }
    .mg-t(@n, (@i + 1));
}
.mg-b(50);



// margin-bottom 下
.mg-b(@n, @i: 1) when (@i =< @n) {
    .mg-b-@{i} {
        margin-top: @i+@0px;
    }
    .mg-b(@n, (@i + 1));
}
.mg-b-10{
    margin-bottom:10px;
}



// 内边距-左
.pd-l(@n, @i: 1) when (@i =< @n) {
    .pd-l-@{i} {
        padding-left: @i+@0px;
    }
    .pd-l(@n, (@i + 1));
}

.pd-l(50);
//内边距-上
.pd-t(@n, @i: 1) when (@i =< @n) {
    .pd-t-@{i} {
        padding-top: @i+@0px;
    }
    .pd-t(@n, (@i + 1));
}

.pd-t(40);
//内边距-右
.pd-r(@n, @i: 1) when (@i =< @n) {
    .pd-r-@{i} {
        padding-right: @i+@0px;
    }
    .pd-r(@n, (@i + 1));
}

.pd-r(40);
.pd-r-50 {
    padding-right: 50px;
}

//内边距-下
.pd-b(@n, @i: 1) when (@i =< @n) {
    .pd-b-@{i} {
        padding-bottom: @i+@0px;
    }
    .pd-b(@n, (@i + 1));
}

.pd-b(50);

.pd-b-60{
    padding-bottom:60px;
}

// flex相关
// 所有元素水平居中,垂直居中
.fcc {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 行内所有元素居中
.ifcc {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

// 垂直居中,两端对齐
.flex-sb {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

// 垂直居中,分散对齐
.flex-sa {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

// 剩余空间分配
.fg1 {
    flex-grow: 1;
}

.fg2 {
    flex-grow: 2;
}

// 纵向排列
// 所有元素垂直居中
.fdcc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

// 单个组合模式:
// 进入弹性布局模式:
.flex {
    display: flex;
}

// 默认情况下就是这个垂直靠左
.fdc {
    display: flex;
    flex-direction: column;
}

// 原点
.jc-start {
    justify-content: flex-start;
}

.jc-end {
    justify-content: flex-end;
}

// 水平居中
.jc-center {
    justify-content: center;
}

// 两端对齐
.jc-sb {
    justify-content: space-between;
}

// 水平分散
.jc-sa {
    justify-content: space-around;
}

// 垂直居中
.ai-center {
    align-items: center;
}
// 文本超出就隐藏并且显示省略号
.hen{
    //超出的文本隐藏
    overflow:hidden;
    //溢出用省略号显示
    text-overflow:ellipsis; 
     //溢出不换行 
     white-space:nowrap;
}