/*外边距*/
.margin-auto{
    margin: auto;
}
.margin-top-5{
    margin-top: 5px;
}

.margin-top-10{
    margin-top: 10px;
}
.margin-top-15{
    margin-top: 15px;
}
.margin-top-20{
    margin-top: 20px;
}
.margin-top-40{
    margin-top: 40px;
}
.margin-top-135{
    margin-top: 135px;
}

.margin-tb-15{
    margin-top: 15px;
    margin-bottom: 15px;
}
.margin-tb-20{
    margin-top: 20px;
    margin-bottom: 20px;
}

.margin-top-b3{
    margin-top: 3%;
}

.margin-top-b5{
    margin-top: 5%;
}
/*默认样式-隐藏*/
.variation{
    display: none;
}
/*左间距百分比*/

.margin-l-2{
    margin-left:2% !important;
}

.margin-l-4{
    margin-left:4% !important;
}

.margin-l-5{
    margin-left:5% !important;
}
.margin-l-10{
    margin-left:10% !important;
}

.margin-l-12{
    margin-left:12% !important;
}
.margin-l-14{
    margin-left:14% !important;
}
/*右间距百分比*/
.margin-r-2{
    margin-right:2% !important;
}
.margin-r-10{
    margin-right:10% !important;
}

/*左右间距百分比*/

.margin-lr-1{
    margin-left:1% !important;
    margin-right:1% !important;
}
.margin-lr-2{
    margin-left:2% !important;
    margin-right:2% !important;
}

.margin-lr-5{
    margin-left:5% !important;
    margin-right:5% !important;
}

/*左右间距百分比*/
.margin-lr-10{
    margin-left:10% !important;
    margin-right:10% !important;
}
/*图片上下居中*/
.img-midd{
    display: inline-block;
    vertical-align: middle;
}
/*文字居左*/
.text-left{
    text-align: left;
}
/*文字居中*/
.text-center{
    text-align: center;
}
/*文字居中*/
.text-right{
    text-align: right;
}
/*浮动*/
.float-l{
    float: left;
}
.float-r{
    float: right;
}
/*边框*/
.border{
    border: 1px solid #e3e6ea;
}

.border-1-4d{
    border: 1px solid #23b4cb;
}

/*边框圆角*/
.border-ra-5{
    border-radius: 5px;
}

.border-ra-8{
    border-radius: 8px;
}

/*边框左圆角*/
.border-ra-l-5{
    border-radius: 5px 0 0 5px;
}

/*边框又圆角*/
.border-ra-r-5{
    border-radius: 0 5px 5px 0;
}

.border-ra-20-px{
    border-radius: 20px;
}

.border-ra-50{
    border-radius: 50%;
}
/*左边框*/
.border-l{
    border-left: 1px solid #e3e6ea;
}
/*右边框*/
.border-r{
    border-right: 1px solid #e3e6ea;
}

/*右边框-占位*/
.border-r-z{
    border-right: 1px solid #f3f6f6;
}

/*左右边框*/
.border-lr{
    border-left: 1px solid #e3e6ea;
    border-right: 1px solid #e3e6ea;
}
 /*上边框*/
 .border-t{
     border-top: 1px solid #e3e6ea;
 }

/*上边框*/
.border-t-f3{
    border-top: 1px solid #f3f6f6;
}

/*下边框*/
.border-b{
    border-bottom: 1px solid #e3e6ea;
}
/*上下边框*/
.border-tb{
    border-top: 1px solid #e3e6ea;
    border-bottom: 1px solid #e3e6ea;
}

/*上左边框*/
.border-tl{
    border-top: 1px solid #e3e6ea;
    border-left: 1px solid #e3e6ea;
}
/*下右边框*/
.border-br{
    border-bottom: 1px solid #e3e6ea;
    border-right: 1px solid #e3e6ea;
}
/*ul 下面的 li 居中*/
.li-text-center li{
    text-align: center;
}

/*ul 下面的 li 倒圆角*/
.li-border-ra li{
    border-radius: 50%;
}

/*ul 下面的 li 宽度占比*/

.li-w-10 li{
    width: 10%;
}

.li-w-15 li{
    width: 15%;
}
.li-w-20 li{
    width: 20%;
}

.li-w-22 li{
    width: 22%;
}

.li-w-24 li{
    width: 24%;
}

.li-w-25 li{
    width: 25%;
}

.li-w-30 li{
    width: 30%;
}

.li-w-313 li{
    width: 31.33%;
}

.li-w-32 li{
    width: 32%;
}

.li-w-33 li{
    width: 33%;
}

.li-w-33-3 li{
    width: 33.33%;
}
.li-w-50 li{
    width: 50%;
}

/*ul 下面的 三个li  左下margin  */

.li-m-lb-3 li{
    margin: 0 0 0.33% 0.33%;
}

/*ul 下面的 li  的高度*/
.li-h-30 li{
    height: 30px;
    line-height: 30px;
}

.li-h-40 li{
    height: 40px;
    line-height: 40px;
}


/*ul 下面的 li  border*/
.li-b li{
    border: 1px solid #e1e8e8;
}
/*ul 下面的 li 上 border*/
.li-b-t li{
    border-top: 1px solid #e1e8e8;
}
/*ul 下面的 li 下 border*/
.li-b-b li{
    border-bottom: 1px solid #e1e8e8;
}

/*ul 下面的 li 上下 border*/
.li-b-tb li{
    border-top: 1px solid #e1e8e8;
    border-bottom: 1px solid #e1e8e8;
}

/*ul 下面的 li 左 border*/
.li-b-l li{
    border-left: 1px solid #e1e8e8;
}

/*ul 下面的 li 右 border*/
.li-b-r li{
    border-right: 1px solid #e1e8e8;
}

/*ul 下面的 li 左右 border*/
.li-b-lr li{
    border-left: 1px solid #e1e8e8;
    border-right: 1px solid #e1e8e8;
}

/*ul 下面的 li margin  占比*/

/*ul 下面的 li 左margin  占比*/
.li-m-l-1 li{
    margin-left: 1%;
}
.li-m-l-2 li{
    margin-left: 2%;
}

/*ul 下面的 li 右margin  占比*/
.li-m-r-1 li{
    margin-right: 1%;
}
.li-m-r-2 li{
    margin-right: 2%;
}


/*ul 下面的 li 上margin  占比*/
.li-m-t-1 li{
    margin-top: 1%;
}
.li-m-t-2 li{
    margin-top: 2%;
}

.li-m-t-5 li{
    margin-top: 5%;
}


/*ul 下面的 li padding  占比*/

/*ul 下面的 li 左padding  占比*/

.li-p-l-1 li{
    padding-left: 1%;
}

.li-p-l-2 li{
    padding-left: 2%;
}

.li-p-l-5 li{
    padding-left: 5%;
}

/*ul 下面的 li 右padding  占比*/
.li-p-r-1 li{
    padding-right: 1%;
}

.li-p-r-2 li{
    padding-right: 2%;
}

/*ul 下面的 li 左右padding  占比*/
.li-p-lr-1 li{
    padding-left: 1%;
    padding-right: 1%;
}

.li-p-lr-2 li{
    padding-left: 2%;
    padding-right: 2%;
}
.li-p-lr-5 li{
    padding-left: 5%;
    padding-right: 5%;
}


/*ul 下面的 li 上padding*/
.li-p-t-10 li{
    padding-top: 10px;
}

/*ul 下面的 li 下padding*/
.li-p-b-10 li{
    padding-bottom: 10px;
}

/*ul 下面的 li 上下padding*/
.li-p-tb-10 li{
    padding-top: 10px;
    padding-bottom: 10px;
}
/*ul 下面的 li 上下padding*/
.li-p-tb-15 li{
    padding-top: 15px;
    padding-bottom: 15px;
}

/*ul 下面的 li 上下padding*/
.li-p-tb-20 li{
    padding-top: 20px;
    padding-bottom: 20px;
}

/*ul 下面的 li 上下padding 占比*/
.li-p-tb-b1 li{
    padding-top: 1%;
    padding-bottom: 1%;
}

.li-p-tb-b10 li{
    padding-top: 6.5%;
    padding-bottom: 6.5%;
}

/*ul 下面的 li 左浮动*/
.li-float-l li{
    float: left;
}

/*ul 下面的 li 右浮动*/

.li-float-r li{
    float: right;
}
/*ul 下面的 li 背景*/
.li-col-bg-ff li{
    background: #ffffff;
}





/*padding  占比*/

/*左padding 占比*/
.pad-l-1{
    padding-left: 1%;
}
.pad-l-2{
    padding-left: 2%;
}
.pad-l-3{
    padding-left: 3%;
}
.pad-l-4{
    padding-left: 4%;
}
.pad-l-5{
    padding-left: 5%;
}
.pad-l-10{
    padding-left: 10%;
}

/*右padding 占比*/
.pad-r-1{
    padding-right: 1%;
}
.pad-r-2{
    padding-right: 2%;
}

.pad-r-4{
    padding-right: 4%;
}

.pad-r-5{
    padding-right: 5%;
}
.pad-r-10{
    padding-right: 10%;
}
/*左右padding 大小*/
.pad-lr-1-px{
    padding-left: 1px;
    padding-right: 1px;
}
.pad-lr-2-px{
    padding-left: 2px;
    padding-right: 2px;
}

.pad-lr-5-px{
    padding-left: 5px;
    padding-right: 5px;
}

.pad-lr-10-px{
    padding-left: 10px;
    padding-right: 10px;
}


/*左右padding 占比*/
.pad-lr-1{
    padding-left: 1%;
    padding-right: 1%;
}
.pad-lr-2{
    padding-left: 2%;
    padding-right: 2%;
}
.pad-lr-4{
    padding-left: 4%;
    padding-right: 4%;
}
.pad-lr-5{
    padding-left: 5%;
    padding-right: 5%;
}
.pad-lr-10{
    padding-left: 10%;
    padding-right: 10%;
}

/*padding  大小*/

/*上padding大小*/

.pad-t-5{
    padding-top: 5px;
}

.pad-t-10{
    padding-top: 10px;
}
.pad-t-15{
    padding-top: 15px;
}
.pad-t-20{
    padding-top: 20px;
}

.pad-t-40{
    padding-top: 40px;
}

.pad-t-50{
    padding-top: 50px;
}

.pad-t-60{
    padding-top: 60px;
}

.pad-t-70{
    padding-top: 70px;
}

/*上padding大小 占比*/
.pad-t-b1{
    padding-top: 1%;

}
.pad-t-b2{
    padding-top: 2%;

}



/*右padding大小*/
.pad-r-5-px{
    padding-right:5px;
}


/*下padding大小*/
.pad-b-5{
    padding-bottom: 5px;
}

.pad-b-10{
    padding-bottom: 10px;
}

.pad-b-15{
    padding-bottom: 15px;
}


.pad-b-20{
    padding-bottom: 20px;
}
.pad-b-40{
    padding-bottom: 40px;
}
/*上下padding大小*/
.pad-tb-1{
    padding-top: 1px;
    padding-bottom: 1px;
}
.pad-tb-2{
    padding-top: 2px;
    padding-bottom: 2px;
}
.pad-tb-5{
    padding-top: 5px;
    padding-bottom: 5px;
}
.pad-tb-10{
    padding-top: 10px;
    padding-bottom: 10px;
}

.pad-tb-20{
    padding-top: 20px;
    padding-bottom: 20px;
}

.pad-tb-50{
    padding-top: 50px;
    padding-bottom: 50px;
}
/*下padding大小 占比*/
.pad-b-b1{
    padding-top: 1%;
    padding-bottom: 1%;
}

.pad-b-b2{
    padding-bottom: 2%;
}
/*上下padding大小 占比*/
.pad-tb-b1{
    padding-top: 1%;
    padding-bottom: 1%;
}

.pad-tb-b2{
    padding-top: 2%;
    padding-bottom: 2%;
}
.pad-tb-b4{
    padding-top: 4%;
    padding-bottom: 4%;
}

.pad-tb-b5{
    padding-top: 5%;
    padding-bottom: 5%;
}
.pad-tb-b8{
    padding-top: 8%;
    padding-bottom: 8%;
}

.pad-tb-b10{
    padding-top: 10%;
    padding-bottom: 10%;
}


.pad-tb-b13{
    padding-top: 13%;
    padding-bottom: 13%;
}
.pad-tb-40{
    padding-top: 40px;
    padding-bottom: 40px;
}
.pad-tb-60{
     padding-top: 60px;
     padding-bottom: 60px;
 }
.pad-tb-30{
    padding-top: 30px;
    padding-bottom: 30px;
}

/*底部footer border 样式*/
footer .border-l{
    border-left: 1px solid #191d1e;
}

footer .border-r{
    border-right: 1px solid #191d1e;
}

/*宽度占比*/

.w-4{
    width: 4%;
}

.w-5{
    width: 5%;
}
.w-6{
    width: 6%;
}
.w-10{
    width: 10%;
}

.w-11{
    width: 11%;
}

.w-14{
    width: 14%;
}

.w-15{
    width: 15%;
}
.w-20{
    width: 20%;
}
.w-25{
    width: 25%;
}
.w-30{
    width: 30%;
}
.w-35{
     width: 35%;
 }
.w-40 {
    width: 40%;
}

.w-45{
    width: 45%;
}
.w-48{
    width: 48%;
}
.w-50{
    width: 50%;
}
.w-55{
    width: 55%;
}
.w-60{
    width: 60%;
}
.w-65{
    width: 65%;
}
.w-70{
    width: 70%;
}
.w-75{
    width: 75%;
}

.w-80{
    width: 80%;
}
.w-85{
    width: 85%;
}
.w-90{
    width: 90%;
}

.w-95{
    width: 95%;
}

.w-96{
    width: 96%;
}
.w-99{
    width: 99%;
}

.w-100{
    width: 100%;
}
/*宽度*/
.w-40-px{
    width: 40px;
}

.he-20-px{
    height: 20px;

}
/*高度*/
.he-40-px{
    height: 40px;
}
.he-50-px{
    height: 50px;
}

.he-80-px{
    height: 80px;
}

.he-148-px{
    height: 148px;
}

.he-180-px{
    height: 180px;
}


/*高度*/
.h-105-px{
    height: 105px;
    line-height: 105px;
}

/*高度占比*/
.h-50{
    height: 50%;
}

.h-80{
    height: 80%;
}

.h-100{
    height: 100%;
}

/*高度*/

/*行高*/

.line-h-15{
    line-height: 15px;
}
.line-h-20{
    line-height: 20px;
}

.line-h-24{
    line-height: 24px;
}

.line-h-25{
    line-height: 25px;
}

.line-h-30{
    line-height: 30px;
}

.line-h-50{
    line-height: 50px;
}

.line-h-70{
    line-height: 70px;
}

.line-h-90{
    line-height: 90px;
}

/*高度 上下居中*/
.h-20-px{
     height: 20px;
     line-height: 20px;
 }

.h-22-px{
    height: 22px;
    line-height: 22px;
}


.h-23-px{
    height: 23px;
    line-height: 23px;
}

.h-24-px{
    height: 24px;
    line-height: 24px;
}


.h-25-px{
    height: 25px;
    line-height: 25px;
}
.h-27-px{
    height: 27px;
    line-height: 27px;
}

.h-28-px{
    height: 28px;
    line-height: 28px;
}

.h-30-px{
    height: 30px;
    line-height: 30px;
}

.h-35-px{
    height: 35px;
    line-height: 35px;
}
.h-40-px{
    height: 40px;
    line-height: 40px;
}

.h-50-px{
    height: 50px;
    line-height: 50px;
}
.h-60-px{
    height: 60px;
    line-height: 60px;
}
.h-80-px{
    height: 80px;
    line-height: 80px;
}

/*字体大小*/

.font-s-12{
    font-size: 12px;
}
.font-s-13{
    font-size: 13px;
}

.font-s-14{
    font-size: 14px;
}
.font-s-16{
    font-size: 16px;
}
.font-s-18{
    font-size: 18px;
}
.font-s-20{
    font-size: 20px;
}
.font-s-21{
    font-size: 21px;
}
.font-s-22{
    font-size: 22px;
}
.font-s-24{
    font-size: 24px;
}
.font-s-28{
    font-size: 28px;
}
.font-s-26{
    font-size: 26px;
}
.font-s-32{
    font-size: 32px;
}
.font-s-36{
    font-size: 36px;
}
/*背景颜色*/

.bg-04{
    background:#040706;
}
.bg-4d{
    background: #23b4cb;
}
.bg-ff{
    background: #ffffff;
}

.bg-f3{
     background: #f3f6f6;
 }

.bg-ff0{
    background: #ff0d2b;
}

.bg-51{
    background: #51636d;
}

.bg-b6{
    background: #b6c6c8;
}

.bg-eb{
    background: #ebf0f0;
}




/*文本颜色*/
.color-4d{
    color: #23b4cb;
}

.color-ff{
    color: #ffffff;
}

.color-51{
    color: #51636d;
}
.color-59{
    color: #23b4cb;
}

.color-04{
    color:#040706;
}
.color-0e{
    color:#0e1212;
}

.color-bf{
    color:#bfced0;
}
.color-ff0{
    color:#ff0b01;
}

.color-08{
    color:#080c0b;
}

.color-f3{
    color: #f3f6f6;
}

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





.absolute-lt-tr-50{
    position: absolute;
    left: 50%;
    top:  50%;
    transform:translate(-50%,-50%);
}

.absolute-l-24-t-50-lr-24-tr-50{
    position: absolute;
    left: 24%;
    top:  50%;
    transform:translate(10%,-50%);
}

.absolute-l-30-t-50-lr-10-tr-50{
    position: absolute;
    left: 30%;
    top:  50%;
    transform:translate(10%,-50%);
}