@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
 
 .eng { font-family: "Montserrat" }
  
 .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%}

 
@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%}


}


.p_re {position:relative;  }

hr {height:100px}
hr.line_hr {border-top:1px solid #ddd; margin-top:100px; height:0; margin-bottom:100px}
 
.s_t {font-size:.9em}
.s_t2 {font-size:.96em; color:#111}
.basic_t {font-size:1.05em;  } 

a.t_link {color:var(--main_c)}
a.t_link:hover {text-decoration:underline}

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

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

.btn_wrap_c {width:100%; display:flex; justify-content:Center; align-items:center; margin-top:55px; gap:10px}
	
.basic_btn {border:1px solid var(--main_c); font-weight:400;  font-size:1.07em; box-sizing:border-box;  white-space:nowrap; padding:0;  width:40%; max-width:180px; line-height:53px; 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}

@media all and (max-width:900px) {
  .basic_btn {width:48%; font-size:1em; }

}

.tab {display:flex;  width:100%; box-sizing:border-box; gap:15px; position:relative; flex-wrap:wrap; align-items:center}
.tab  * {transition: all 0.2s ease-out; }

.tab li {background-color: var(--bg1);  font-size:1.07em;   font-weight:400;text-align:center; position:relative; z-index:99; cursor:pointer}
.tab li a {  color:#333; display:inline-block;  padding:11px 30px;  }
.tab li:hover { background-color:var(--main_c); }
.tab li:hover a { color:#fff }
.tab li.on {background-color:var(--main_c); }
.tab li.on a {color:#fff}
 

table.basic {width:100%}
table.basic th {padding:5px; font-weight:400; background-color:var(--main_c); color:#fff; border:1px solid #fff;  text-align:center}
table.basic td {padding:5px; border:1px solid #ddd; text-align:center}



.accordion {
  width:100%; 
  border-top: 1px solid #ddd;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-btn {
  width: 100%;
  padding: 15px;
  text-align: left;
  font-size: 1.1em;
   background: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  color:#222;
}

.accordion-btn .symbol {
  font-size: 20px;
  transition: transform 0.3s ease;
}

.accordion-content {
		display: none;
		padding:30px; 
		box-sizing:border-box; 
		background-color: #f9f9f9;
		 
		color: #333;
}
 
.accordion-content ul.flex.img_list {flex-shrink:0;  gap:20px}
.accordion-content ul.flex.img_list li {border:1px solid #ddd; display:flex; flex-direction:column; background-color:#fff;   }
.accordion-content ul.flex.img_list li img {margin-bottom:10px}
.accordion-content ul.flex.img_list li p {margin-bottom:10px}

@media all and (max-width:900px) {
 .accordion-content  {padding:20px}
 .accordion-content ul.flex.img_list {gap:20px 0}
 .accordion-content ul.flex.img_list li {padding-bottom:0}
 
}


.border_box {border:2px solid var(--main_c); box-sizing:border-box; padding:20px}
.bg_box {background-color: var(--bg1);; box-sizing:border-box; padding:30px; width:100%; display:inline-block}
.rgba_bg {width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,.2); }


ul.basic {width:100%; display:flex; flex-direction:column;  gap:5px 0}
ul.basic.col-2 { flex-direction:row; }
ul.basic li {display:flex; align-items:flex-start; gap:10px;  box-sizing:border-box}
ul.basic li:before {content:''; width:4px; height:4px; flex-shrink:0; background-color:var(--main_c); margin-top:9px; display:inline-block;  }
ul.basic.type2 li:before {  content:'\f00c';
  font-family:"Font Awesome 5 Free"; 
  font-weight:600;  
 background:none; margin-top:0; width:20px; height:auto}

.dot {display:flex; gap:10px}
.dot + .dot  {margin-top:5px}
.dot:before {content:'·'; font-size:20px; line-height:1; font-weight:800}

 
ul.no_list {gap:10px;  counter-reset: item;}
ul.no_list li {position: relative; display:flex; padding:15px 10px; box-sizing:border-box;  align-items:center; gap:10px; border-radius:50px; border:2px solid #4e7eae; padding-right:50px; text-align:left; width:100%}
ul.no_list li:before {width:50px; height:50px; display:flex; align-items:center; justify-content:Center; background-color:var(--main_c); color:rgba(255,255,255,.9); border-radius:50%;  counter-increment: item;  content: counter(item, decimal-leading-zero); flex-shrink:0;   font-family: "Montserrat" ; font-weight:400; font-size:19px; letter-spacing:0}
ul.no_list.col-2 li {width:calc(50% - 5px)}

@media all and (max-width:900px) {
 ul.no_list li {padding:10px 6px}
 ul.no_list li:before {width:40px; height:40px; font-size:17px}


}

.info_flex {gap:0; width:100%}
.info_flex .img {width:50%;  flex-shrink:0;   background-size:cover !important}
.info_flex .img .swiper {width:100%; height:100%; }
.info_flex .img .swiper-slide {width:100%; height:100%; overflow:hidden;   }
.info_flex .img .swiper-slide img {min-width:100%; min-height:100%;  max-width:none; position:absolute; left:50%; top:50%;  transform:translate(-50%, -50%); }
.info_flex .text {width:50%;   display:flex; flex-direction:column; justify-content:center;  height:400px; box-sizing:border-box; padding:20px 50px; color:#222 }
 .info_flex .text h4 {margin-bottom:20px; font-size:1.5em; font-weight:600; }
.info_flex .text h5 { color:var(--main_c); font-size:24px; white-space:nowrap; display:flex; align-items:center; gap:15px; margin-bottom:25px}
.info_flex:nth-child(2n) .img {order:2}
.info_flex:nth-child(2n) .text {order:1}
.info_flex .text h6 { margin-bottom:20px}


@media all and (max-width:900px) {
		.info_flex .img {width:100%; height:300px}
		.info_flex .text {width:100%; margin-top:30px; height:auto; padding:0}
		.info_flex:nth-child(2n) .img {order:1}
		.info_flex:nth-child(2n) .text {order:2}
		.info_flex + .info_flex {margin-top:50px}
		.info_flex .text h5 {   font-size:1.3em;  margin-bottom:15px;}
		.info_flex .img  {height:50vw; }
		
		.info_flex .img .swiper-slide img {width:100%; min-height:auto; }


}
.box_list {display:flex; flex-wrap:wrap; gap:20px}
.box_list li { width:calc(25% - 15px); padding:25px 20px; box-sizing:border-box; display:flex; align-items:flex-start;  justify-content:center; background-color: var(--bg1);  text-align:center;  }
.box_list li h6 {font-size:1.13em; margin-bottom:10px}
.box_list.col-2 li {width:calc(50% - 10px)}
.box_list.col-3 li {width:32%}
.box_list.col-4 li {width:calc(25% - 15px);}

.box_list.type2 li {border:1px solid var(--main_c); border-left:5px solid  var(--main_c); padding:25px 20px; background-color:#fff;}
.box_list.type2 li {font-size:1.05em}
.box_list.type2 li div {width:100%  }  
.box_list.type2 li div p {font-weight:300; font-size:16.5px; color:#222}  

.box_list.left li {text-align:left}

.box_list.type3 li {padding:30px 20px; }
.box_list.type3 li h6 {  font-weight:600; color:var(--main_c)}

 
.box_list.type4 li {padding:20px 20px }
.box_list.type4 li h6 {  font-weight:600; color:var(--main_c)}
.box_list.type4 li div {width:100%; text-align:left }


@media all and (max-width:900px) {
		.box_list {gap:18px 0; justify-content:space-between}
		.box_list li { width:48%; }
		.box_list.col-2 li {width:100%}
		.box_list.col-3 li {width:100%}
		.box_list.col-4 li {width:48%}
		.box_list.type2 li {padding:18px 15px; display:flex; align-items:center; justify-content:center }

}

.bg_box_list {display:flex; gap:20px; flex-wrap:wrap}
.bg_box_list > li {width:calc(33% - 15px); padding:50px 40px 50px 40px; box-sizing:border-box; color:#fff; position:relative;  height:570px;  overflow:hidden}
.bg_box_list  > li:after {width:100%; height:100%; position:absolute; left:0; top:0; content:''; background:rgba(0,0,0,.6); transition: all 0.3s ease-out;}
.bg_box_list  > li:hover:after {  background:rgba(0,0,0,.9); }
.bg_box_list li div {position:relative; z-index:9; height:100%; display:flex; flex-direction:column;}
.bg_box_list li h5 {font-size:1.4em; margin-bottom:30px; color:#fff}
.bg_box_list li li { margin-top:20px; display:flex; gap:15px }
.bg_box_list li li:before {content:' '; width:5px; height:5px; flex-shrink:0;  background-color:#fff; margin-top:10px}
.bg_box_list li li div {color:rgba(255,255,255,.6)}
.bg_box_list li b { color:#fff; display:block; margin-bottom:5px;  font-size:1.15em; font-weight:600}
.bg_box_list li ul {margin-top:auto;  }


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

  .bg_box_list > li {width:100%}

}
ul.w_bg li {background-color:#fff}


span.no {border-radius:50px;   background: rgba(0, 0, 0, .1); 
    -webkit-backdrop-filter: blur(20px);  backdrop-filter: blur(20px);  padding:5px 20px; font-size:17px; letter-spacing:0.2px; color:#fff; position:Absolute; left:15px; top:15px;}
span.label {
    width:130px; text-align:center;
    color: #fff;  box-sizing:border-box; 
     background-color:var(--main_c); 
    cursor: pointer;  
    line-height:35px;  
	display:block;
  
}
span.label.color2 { background-color:var(--main_c2); }
.icon_one {width:60px; height:60px; margin:0 auto; margin-bottom:15px; border-radius:50%;  display:flex; align-items:center; justify-content:center;   background-color:#f1f4fa }
.icon_one i {font-size:25px;}

.icon_one2 {width:70px; height:70px; display:flex; align-items:center; justify-content:center; flex-shrink:0   }
.icon_one2  img {max-width:90%}


.btn_wrap {width:100%; display:flex; align-items:center;  justify-content:center; gap:20px; margin-top:40px }
 
.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}


 
.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-pagination-bullet-active {background-color:var(--main_c);}

.swiper-button-prev.sub_left   {left:20px}
.swiper-button-next.sub_right  {right:20px}


@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; }

 
}