.flex {display:flex; }
.flex.gap10 {gap:10px}
.flex.gap20 {gap:20px}
.flex.gap30 {gap:30px}
.ac {align-items:center !important; }
.as {align-items:flex-start !important; }
.ad {align-items:flex-end !important; }
.jt {justify-content:flex-start !important; }
.jc {justify-content:center !important; }
.js {justify-content:space-between !important; }
.t_color {color:var(--main_c) !important; }
.eng {font-family: "Outfit"}
 

.s_t {font-size:16px; color:#6F6F6F}

.box_100 {width:100%; display:inline-block}

.border_10 {border-radius:10px}
.border_20 {border-radius:20px}

.border_box {border:1px solid #ddd; box-sizing:border-box; padding:15px; border-radius:10px}
hr.line_hr {border-bottom:1px solid #777; width:100%; margin:35px 0 45px 0}

.t_ani_box {overflow: hidden; }
.cm-overflow-box {overflow: hidden;   display: block;}
.cm-overflow-inner {display: block; font-size:inherit; font-weight:inherit; color:inherit; opacity:0; filter:Alpha(opacity=0); transform: translateY(100%);}

 .cm-overflow-box .cm-overflow-inner{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
 
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		transform: translateY(100%); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		transform: translateY(0); 
	}
}

 



a.basic_btn {background-color:var(--main_c); color:#fff; border-radius:10px; padding:20px 50px; margin-top:50px; display:inline-block; font-size:1em; font-weight:500; transition: all 0.3s ease-out;}
a.basic_btn:hover {background-color:#2F2F2F; color:var(--main_c); }
   

a.write_btn {background-color:var(--main_c); color:#fff; border-radius:50px; padding:17px 50px; min-width:130px;  margin-top:50px; display:inline-block; font-size:1.11em; font-weight:500}
a.write_btn:hover {background-color:#2F2F2F; color:var(--main_c); }
a.write_btn:hover svg {background-color:var(--main_c);  }

a.s_btn { border:1px solid #626262;  white-space:nowrap; border-radius:5px; padding:9px 20px; display:inline-flex; align-items:center;  justify-content:Center; font-size:16px; font-weight:400; gap:10px; color:#626262; font-size:.89em; transition: all 0.3s ease-out; }
a.s_btn:hover {background-color:var(--main_c); border:1px solid var(--main_c); color:#fff}
a.s_btn:hover svg path {stroke: #fff;}

.arrow_span {border:2px solid #fff; width:16px; height:16px; display:flex; align-items:center; justify-content:center; border-radius:5px; margin-left:10px; }
.arrow_span svg path {stroke:#fff; }


.more_btn {cursor:pointer; display:inline-flex; width:auto; align-items:center; flex-shrink:0;  transition: all 0.3s ease-out;  }
.more_btn:hover   {color:var(--main_c);  }
.more_btn .arrow_span {transition: all 0.3s ease-out;  }
.more_btn:hover .arrow_span {border:2px solid var(--main_c);  }
.more_btn:hover .arrow_span svg path {stroke:var(--main_c) }


.icon_one {background-color:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; width:126px; height:126px; border-radius:50%}

ul.basic {width:100%;}
ul.basic > li {display:flex; margin-bottom:3px; }
ul.basic > li:last-child { margin-bottom:0; }
ul.basic > li:before {content:'·'; flex-shrink:0;  margin-right:10px; box-sizing:border-box; border-radius:50%; }
 
ul.basic2 {width:100%;}
ul.basic2 > li {display:flex; margin-bottom:15px; color:#646464; line-height:1.4 }
ul.basic2 > li:last-child { margin-bottom:0; }
ul.basic2 > li:before {content:' '; width:8px; height:8px; background-color:var(--main_c); flex-shrink:0;  margin-right:18px; box-sizing:border-box; border-radius:50%; margin-top:7px}

ul.bg_box_list {gap:20px;}
ul.bg_box_list li {width:33%; background-color:#F5F5F5; box-sizing:border-box; padding:30px; border-radius:10px}
ul.bg_box_list li ul {margin-top:40px}
ul.bg_box_list li ul li  {width:100%; padding:0; margin-bottom:30px}
ul.bg_box_list li ul li:last-child  {margin-bottom:0}

.tab {display:flex; flex-wrap:wrap; gap:10px}
.tab li {cursor:pointer; white-space:nowrap;  border:1px solid #fff;  padding:7px 25px; border-radius:50px; transition: all 0.3s ease-out;}
.tab li.ov {background:var(--main_c); border:1px solid var(--main_c)}
.tab li:hover {background-color:#000; border:1px solid #fff;  color:#fff}


.tab2  {display:flex; gap:10px; flex-wrap:wrap}
.tab2 li {cursor:pointer; white-space:nowrap;  padding:13px 30px; border:1px solid #6C6C6C; color:#6C6C6C; border-radius:100px; transition: all 0.3s ease-out;}
.tab2 li.ov {background-color:var(--main_c); color:#fff; border:1px solid var(--main_c)}
/* .tab2 li:hover {background-color:#000; border:1px solid #fff; color:#fff}
 */
ul.no_list {display:flex; gap:20px; }
ul.no_list li {width:25%; background-color:#fff; border-radius:10px; box-sizing:border-box; padding:25px 15px 70px 15px;  }
ul.no_list li h5:before {content:'01'; display:block; font-size:20px; color:#2F2F2F; margin-bottom:30px }
ul.no_list li:nth-child(2) h5:before {content:'02'; }
ul.no_list li:nth-child(3) h5:before {content:'03'; }
ul.no_list li:nth-child(4) h5:before {content:'04'; }
ul.no_list li h5 {color:var(--main_c); font-size:28px;margin-bottom:40px}

ul.no_list.type2   {flex-wrap:wrap }
ul.no_list.type2 li {width:calc(50% - 10px); background-color:#F5F5F5; padding:30px  }
ul.no_list.type2 li h5:before {  color:var(--main_c);  }
ul.no_list.type2 li h5 { color:#2B2B2B; margin-bottom:15px}

ul.procss_list {display:flex; position:relative; padding:0 7%; box-sizing:border-box; width:100%; margin-top:80px}
ul.procss_list:after {content:''; width:100%; height:5px; background: linear-gradient(90deg, #007DFF 0%, #052E7B 100%); position:absolute; left:0; bottom:0}
ul.procss_list li {width:25%;  border-left:2px dotted #B8B8B8; box-sizing:border-box;  padding:0 20px 80px 20px;  position:relative;  z-index:999 }
ul.procss_list li:after {content:''; border-radius:50%; border:5px solid #fff; width:20px; height:20px; position:absolute; left:-14px; bottom:-12px; background-color:var(--main_c); z-index:999}
ul.procss_list li h5 {color:#2B2B2B; font-size:28px; margin-bottom:20px; margin-top:30px}
ul.procss_list li p.basic_t {color:#757575}

  @media all and (max-width:900px) {
		.flex {flex-wrap:wrap;  }
		.flex.m_no_wrap {flex-wrap:nowrap;  }
		ul.bg_box_list li {width:100%}
		ul.bg_box_list li div.flex {  flex-wrap:nowrap}
		ul.bg_box_list li div.flex.gap30 {gap:20px}
		.icon_one {  width:100px; height:100px;  }
		.icon_one img { width:50px  }


		ul.no_list {flex-wrap:wrap}
		ul.no_list li {width:100%; padding:30px 20px }
		ul.no_list li h5 { font-size:24px;margin-bottom:20px}
		ul.no_list.type2 li {width:100%}

		ul.procss_list {flex-wrap:wrap;   margin-top:0}
		ul.procss_list li {width:100%; padding:50px 20px }
		ul.procss_list:after {display:none}
		ul.procss_list li:before {content:''; width:100vw;   height:5px; background: linear-gradient(90deg, #007DFF 0%, #052E7B 100%); position:absolute; left:-7vw; bottom:0}
		ul.procss_list li h5  {font-size:22px; margin-bottom:10px}

		ul.bg_box_list li ul li {margin-bottom:15px}

		.border_20 {border-radius:10px}

		.tab2  {  gap:8px;  }
		.tab2 li {   padding:12px 20px; font-size:.98em}


 
}