.flex {display:flex}
.ac {align-items:center !important; }
.as {align-items:flex-start !important; }
.ad {align-items:flex-end !important; }
.jt {justify-content:flex-start !important; }
.jd {justify-content:flex-end !important; }
.jc {justify-content:center !important; }
.js {justify-content:space-between !important; }

.flex.col-2 > li {width:50%}
.flex.col-3 > li {width:33%}
.flex.col-4 > li {width:25%}
.flex.col-5 > li {width:20%}

.flex.col-2 > div {width:50%}
.flex.col-3 > div {width:33%}
.flex.col-4 > div {width:25%}
.flex.col-5 > div {width:20%}

.flex.col-4 > ul {width:25%}


.flex.wrap {flex-wrap:wrap}
.flex.gap10 {gap:10px}
.flex.gap20 {gap:20px}
.flex.gap50 {gap:50px}

 
.flex img {max-width:100%}

.t_color {color:var(--main_c)}

 
.rgba_bg {width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,.4);}

  
a.basic_btn {background-color:var(--main_c);   font-size:1rem; box-sizing:border-box; padding:0 20px; width:170px; line-height:50px; color:#fff; border-radius:5px; display:flex; transition: all 0.3s ease-out; }
a.basic_btn:after {content:'→'; margin-left:auto}
 a.basic_btn + a.basic_btn {margin-left:5px}
 
ul.basic_list li {display:flex; align-items:center;  gap:8px}
ul.basic_list li:before {content:''; width:4px; height:4px; background-color:var(--main_c); display:inline-block; }

.plus {width:50px; height:50px; border-radius:10px; display:flex; align-items:Center; justify-content:center; border:1px solid #999}
.plus span {font-size:40px;  font-weight:200}

table.basic {width:100%}
table.basic th {background-color:var(--main_c); color:#fff; border:1px solid #fff;  font-weight:500; padding:13px}
table.basic td {color:#111; font-size:.95em; border:1px solid #ddd; text-align:Center;  padding:13px}

 
.bl_p  {width:100%; display:flex; gap:10px }
.bl_p:before {content:''; flex-shrink:0; width:6px; height:6px; margin-top: 8px; background-color:var(--main_c); display:inline-block }
 
 
 @media all and (max-width:800px) {
   .flex {flex-wrap:Wrap}

}