.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 {display:block}
.bg_box { background-color:#f1f1f1; display:inline-block;  padding:20px; box-sizing:border-box}

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

.p_re {position:relative; z-index:99}

a { transition: all 0.3s ease-out;}

@media all and (max-width:900px) {
	.flex {flex-wrap:wrap}
	.no_w {flex-wrap:nowrap}


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

	.flex.col-2 > div {width:100%}
	.flex.col-3 > div {width:100%}
    .flex.col-4 > li {width:50%}
   .flex.col-2.gap20 > div {width:100%}


}

.btn_wrap {
    width: 100%;
    display: flex ;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.basic_btn {border:1px solid var(--main_c); background-color:#fff; font-weight:400;  font-size:1.07em; box-sizing:border-box;  white-space:nowrap; padding:0;  width:40%; max-width:150px; line-height:47px; color:var(--main_c);  border-radius:0px; display:flex; justify-content:Center;  transition: all 0.3s ease-out; }
 
.basic_btn:hover {background-color:var(--main_c); color:#fff} 
.basic_btn + .basic_btn {margin-left:5px}

.basic_btn2 {  background-color:var(--main_c); font-weight:400;  font-size:1.1em; box-sizing:border-box;  white-space:nowrap; padding:0;  width:40%; max-width:180px; line-height:53px; color:#fff;  border-radius:50px; display:flex; justify-content:Center;  transition: all 0.3s ease-out; }
.basic_btn2:hover {border-radius:0}

.box_list {width:100%; display:flex; gap:30px}
.box_list li {width:50%; border:1px solid #ddd; text-align:center; box-sizing:border-box; padding:15px} 
.box_list.type2 li {border-top:4px solid var(--main_c); padding:20px 15px}
 
@media all and (max-width:900px) {
 .box_list {flex-wrap:wrap}
 .box_list li {width:100%} 

} 

.custom-btn {
  display: inline-flex;
  align-items: center;
  gap:10px;
  padding: 10px 20px;
  font-size: 1em;
  color: #333;
  background-color: transparent;
  border: 1px solid #333;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-btn:hover {gap:20px}
 

.icon_one {width:60px; height:60px; margin:0 auto; border-radius:50%; border:1px solid #ddd; display:flex; align-items:center; justify-content:Center;}
 

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

 


.swiper-button-prev.sub_left,
.swiper-button-next.sub_right {
	background: transparent;
	width: 45px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	background-color:#fff; 
	border-radius: 50px;
	opacity: .8;
	box-shadow:2px 2px 10px rgba(0,0,0,.5); 
     
	transition: all .3s ease;
}
.swiper-button-prev.sub_left:hover,
.swiper-button-next.sub_right:hover {
	opacity: 1
}

.swiper-button-next.sub_right:after,
.swiper-button-prev.sub_left:after {
	font-size: 20px;
	color: #111;
	  
}
.swiper-button-prev.sub_left   {left:20px}
.swiper-button-next.sub_right  {right:20px}
.swiper-pagination-bullet-active {background-color:var(--main_c);}

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

	.swiper-button-prev.sub_left,
	.swiper-button-next.sub_right { width:30px; height:30px; line-height: 30px; }
	.swiper-button-next.sub_right:after,
	.swiper-button-prev.sub_left:after { font-size: 15px; }

 
}