.position-r{position: relative;}
.position-a{position: absolute;}
.box-sizing-content{box-sizing:content-box;}
.d-inline-block{display: inline-block;}
.d-block{display: block;}

.justity-content{display: flex;flex-direction: column;justify-content: center;}

.flo-l{float: left;}
.flo-r{float: right;}
.clear{clear: both;}
.white{color:#fff}

.black{color:  #000;}
.grey{color:#666666}
.black{color: #333;}
.active{color:#44A8F2 ;}
.red{color:#f93337;}

.border-r{border-radius: 5px;}

.bg-white{background: #fff;}
.bg-blue{background:#ddf0fe} 

.text-c{text-align: center;}
.text-l{text-align: left;}
.text-r{text-align: right;}

.font-18{font-size: 18px;}
.font-24{font-size: 24px;}
.letter-sp-2{letter-spacing: 2px;}
.letter-sp-4{letter-spacing: 4px;}

.overflow{ overflow: hidden; text-overflow: ellipsis;-o-text-overflow: ellipsis; white-space: nowrap;}

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

.font-weight{font-weight: bold;}
.p-2{padding-left: 20px;padding-right: 20px;padding-top: 20px;padding-bottom: 20px;}

.px-1 {padding-left: 10px;padding-right: 10px;}
.px-2 {padding-left: 20px;padding-right: 20px;}

.py-1 {padding-top: 10px;padding-bottom: 10px;}
.py-2 {padding-top: 20px;padding-bottom: 20px;}
.py-3 {padding-top: 30px;padding-bottom: 30px;}
.py-4 {padding-top: 40px;padding-bottom: 40px;}
.pt-1{padding-top: 10px;}
.pt-2{padding-top: 20px;}
.pr-2{padding-right: 20px;}
.pl-2{padding-left: 40px;}
.pb-2{padding-bottom: 20px;}

.mx-1{margin-left: 10px;margin-right: 10px;}
.mx-2{margin-left: 20px;margin-right: 20px;}
.mx-4{margin-left: 40px;margin-right: 40px;}
.my-4{margin-top: 40px;margin-bottom: 40px;}

.mt-1{margin-top: 10px;}
.mt-2{margin-top: 20px;}
.ml-1{margin-left: 10px;}
.ml-2{margin-left: 20px;}
.ml-3{margin-left: 30px;}
.ml-4{margin-left: 40px;}
.mr-1{margin-right: 10px;}

.mb-2{margin-bottom: 20px;}
.mb-4{margin-bottom: 40px;}
.mb-5{margin-bottom: 50px;}


.w-33{width:33%}
.w-50{width:50%}
.w-100{width:100%}
.h-100{height:100%}