.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.col-2.gap20 > li {width:calc(50% - 10px)}
.flex.col-2.gap20 > div {width:calc(50% - 10px)}

.flex img {max-width:100%}

.box_100 {width:100%; display:block}
.bg_box { background-color:#f1f1f1; display:inline-block;  padding:20px; box-sizing:border-box}
.bg_box2 { background-color:#fff; border:3px solid var(--main_c); display:inline-block;  padding:20px; box-sizing:border-box}

.t_color {color:var(--main_c); }
.s_t {font-size:.9em;}
.red {color:red}

.in {width:100%; margin:0 auto; max-width:1200px; }


 @media all and (max-width:1241px) {

  .in {padding:0 4%; box-sizing:border-box }

}


 @media all and (max-width:900px) {

   .flex {flex-wrap:wrap}
   .flex.col-2 > li {width:100%}

}



.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
}


 
.rgba_bg {width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,.3); display:inline-block}

.border_list {gap:20px}
.border_list li {border:1px solid #ddd; padding:20px; text-align:center }


ul.basic li {width:100%; display:flex; gap:10px; margin-bottom:3px}
ul.basic li:last-child {margin-bottom:0}
ul.basic li:before {flex-shrink:0; content:''; margin-top:11px; width:5px; height:5px; display:inline-block; background-color:var(--main_c); }
 

 a.basic_btn {background-color: var(--main_c); margin-top:40px; font-weight:400;  color:#fff; width:200px; text-align:center; font-size:1.1em; line-height:55px; display:inline-block; border-radius:50px}



 @media all and (max-width:900px) {

  ul.basic li:before {  margin-top:9px;   }

}