.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.gap30 {gap:30px}
.flex.gap40 {gap:40px}
.flex.gap50 {gap:50px}

 
.flex img {max-width:100%}

@media all and (max-width:800px) {
	.flex {flex-wrap:wrap}
	.flex.gap10 {gap:15px 0}
	.flex.gap20 {gap:15px 0}
	.flex.gap30 {gap:15px 0}
	.flex.gap40 {gap:15px 0} 
	.flex.gap50 {gap:15px 0}

 	.flex.col-3  {justify-content:space-between }
	.flex.col-3 > div  {width:48%}
 
}





.t_color {color:var(--main_c)}
.t_link:hover {text-decoration:underline}
 
.rgba_bg {width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,.4);}

 
ul.basic {display:flex; flex-direction:column; gap:3px}

ul.basic_list li {display:flex; align-items:flex-start;  gap:8px}
ul.basic_list li:before {content:''; flex-shrink:0; margin-top:8px; width:5px; height:5px; background-color:var(--main_c); display:inline-block; }

.table_wrap {width:100%; overflow-x:auto; }
table.basic {width:100%}
table.basic th {background-color:#333; color:#fff; border:1px solid #fff;  font-weight:500; padding:13px}
table.basic td {color:#111; font-size:1em; border:1px solid #ddd;   padding:13px}
table.basic td strong {font-weight:600}
table.basic td.td_bg {background-color:#f9f9f9}
 
 
 
.arrow { position: absolute;   }
.arrow::after {
	position: absolute;
    right:0; 
	top: 30%;
	content: '';
	width: 35%;  
	height: 35%; 
	border-top: 2px solid #fff; 
	border-right: 2px solid #fff; 
		transform: rotate( 45deg );

} 
.arrow::before {
  content:'';
  width:80%;
  height:2px;
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
  background:#fff
}

 
  
a.basic_btn {background-color:yellow; text-align:center; margin-top:15px; display:inline-block }
 .more_btn {border:1px solid #333; padding:10px 20px; font-size:14px; color:#333; display:flex; align-items:center; border-radius:50px; gap:30px }


.dot_p {display:flex; gap:10px;}
.dot_p:before {width:6px; height:6px; border-radius:50%;  margin-top:8px; flex-shrink:0;  background-color:var(--main_c); content:''; display:inline-block}




 button {
  background: none;
  border: 0;
  box-sizing: border-box;
 
  padding: 1em 2em;
  box-shadow: inset 0 0 0 2px #333;
  color: #333;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
}
button::before, button::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
button.white {color:#fff;  box-shadow: inset 0 0 0 2px #fff; }
.draw {
  transition: color 0.25s;
}
.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover {
  color: yellow;
}
.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: yellow;
  border-right-color: yellow;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
  border-bottom-color: yellow;
  border-left-color: yellow;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.meet:hover {
  color: var(--main_c);
}
.meet::after {
  top: 0;
  left: 0;
}
.meet:hover::before {
  border-top-color: var(--main_c);
  border-right-color: var(--main_c);
}
.meet:hover::after {
  border-bottom-color: var(--main_c);
  border-left-color: var(--main_c);
  transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}