what is this ?

Just css below, that is all.

/* color */
.c_fff { color: #fff; }
.c_000 { color: #000; }
.bc_fff { background-color: #fff; }
.bc_000 { background-color: #000; }

/*
    .c_l { color: #343a40; }
    .c_m { color: #212529; }
    .c_s { color: #999; }
    .c_xs { color: #999; }
    .c_success { color: green; }
    .c_danger { color: red; }
    .c_warning { color: yellow; }
    .c_primary { color: blue; }
*/

/* display */
.di { display: inline; }
.db { display: block; }
.dn { display: none; }
.dib { display: inline-block; }

/* font */
.fs0{ font-size: 0; }
.fw400 { font-weight: 400; }
.fw700, .fwb { font-weight: 700; }
.fsi { font-style: italic; }
.wsn { white-space: nowrap; }
.wwbw { word-wrap: break-word; word-break: break-all; }
.lh1d5 { line-height: 1.5; }
.lh1d8 { line-height: 1.8; }
.vam { vertical-align: middle; }

/* text */
.tar { text-align: right; }
.tac { text-align: center; }
.tal { text-align: left; }
.ttu { text-transform: uppercase; }
.ttc { text-transform: capitalize; }
.ttn { text-transform: none; }
.ttl { text-transform: lowercase; }

/* float */
.fl { float: left; display: inline; }
.fr { float: right; }

/* positon */
.pr { position: relative; }
.pf { position: fixed; }
.pa { position: absolute; }
.t0 { top: 0; }
.r0 { right: 0; }
.b0 { bottom: 0; }
.l0 { left: 0; }
.t50p { top: 50%; }
.l50p { left: 50%; }
.l100p { left: 100%; }
.t100p { top: 100%; }
.w100p { width: 100%; }
.h100p { height: 100%; }

/* others */
.oh { overflow: hidden; }
.vh { visibility: hidden; }
.z1 { z-index: 1; }
.br100p { border-radius: 100%; }

/* custome */
.auto { margin-left: auto; margin-right: auto; }
.clearfix:after { content: ""; display: block; overflow: hidden; height: 0; clear: both; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ell2row { display: -webkit-box; overflow: hidden; word-wrap: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ell2row.lh1d5 { max-height: 3em; }
.ell2row.lh1d8 { max-height: 3.6em; }
.i { display: inline-block; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; vertical-align: middle; }
.trans { transition: 300ms; }

/* flex */
.df { display: flex; }
.f1 { flex: 1; }
.aic { align-items: center; }
.jcc { justify-content: center; }
.fdr { flex-direction: row; }
.fdc { flex-direction: column; }

/* mobile */
.pa_vc { position: absolute; top: 50%; transform: translateY(-50%); }
.pa_auto { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }