/* =============================================
   content.css — 통합 스타일시트
   ============================================= */

/* === 전역 변수 === */
:root {
  --orange:       #ffa336;
  --orange-dark:  #e8971a;
  --blue:         #2B7BBE;
  --blue-dark:    #1c75c1;
  --green:        #77b633;
  --white:        #ffffff;
  --text-dark:    #333333;
  --border-color: #e2e2e2;
  --bg-light:     #f9f9f9;
}

/* === 유틸리티 === */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* =============================================
   BIZ INFO WRAP / BOX
   ============================================= */
.biz_info_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  margin: 0;
}

.biz_info_wrap .biz_info_box {
  flex: 0 0 calc((100% - 20px) / 2);
  border: 1px solid var(--border-color);
  padding: 0;
  margin: 0;
}

.biz_info_wrap .biz_info_box .title {
  padding: 13px 0;
  color: var(--white);
  text-align: center;
  font-size: 22px;
  font-weight: 500;
}
@media( max-width:768px ){
	.biz_info_wrap .biz_info_box .title {
	  font-size: clamp(16px, 2vw, 20px);
	}
}
@media( max-width:650px ){
	.biz_info_wrap {
	  gap: 10px;
	}
	.biz_info_wrap .biz_info_box {
	  flex: 0 0 100%;
	}
}

.biz_info_wrap .biz_info_box:nth-child(1) .title { background: var(--orange); }
.biz_info_wrap .biz_info_box:nth-child(2) .title { background: var(--green); }

.biz_info_wrap .biz_info_box2 {
  flex: 0 0 100%;
  border: 1px solid var(--border-color);
  padding: 0;
  margin: 0;
}

.biz_info_wrap .biz_info_box2 .title {
  padding: 13px 0;
  color: var(--white);
  background: var(--green);
  text-align: center;
  font-size: 22px;
  font-weight: 500;
}
@media( max-width:768px ){
	.biz_info_wrap .biz_info_box2 .title {
	  font-size:clamp(16px, 2vw, 20px);
	}
}

.biz_info_wrap .biz_info_box3 {
  flex: 0 0 100%;
  border: 0px solid var(--border-color);
  padding: 0;
  margin: 0;
}

.biz_info_wrap .biz_info_box3 .title {
  padding: 13px 0;
  color: var(--white);
  background: var(--orange);
  text-align: center;
  font-size: 22px;
  font-weight: 500;
}
@media( max-width:768px ){
	.biz_info_wrap .biz_info_box3 .title {
	  font-size:clamp(16px, 2vw, 20px);
	}
}

/* =============================================
   PERSON / 자활사업 참여대상자 레이아웃
   ============================================= */

/* [기존 유지 및 보완] 2단 flex 래퍼 */
.personwrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 !important;
  margin: 0;
  background: #f2f7fd;
  box-sizing: border-box;
  border-radius:0.5rem;
}

/* 각 컬럼 공통 */
.personwrap .person_li {
  flex: 0 0 100%;
  padding: 35px 35px;
  margin: 0;
  font-size: clamp(14px, 2.3vw, 19px);
  color: #555;
  position: relative;
  box-sizing: border-box;
}

/* ★수정: 우측 설명 박스의 실제 리스트(li)에만 오렌지색 점이 나오도록 한정 */
.personwrap .Right_box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.personwrap .Right_box li {
  padding: 0 0 0 17px;
  margin: 0 0 12px; /* 간격 살짝 넓힘 */
  font-size: 18px;
  color: #555;
  position: relative;
  line-height: 1.4;
}
@media( max-width:768px ){
	.personwrap .Right_box li {
	  font-size: clamp(14px, 1.7vw, 16px);
	}
}
.personwrap .Right_box li:before {
  content: '';
  position: absolute;
  width: 5px !important;
  height: 5px !important;
  background: var(--orange) !important;
  left: 3px !important;
  top: 10px !important;
  border-radius: 10px;
}

/* 좌측 컬럼 — 우측 구분선 */
.personwrap .person_li:first-child {
  border-right: 0px solid var(--border-color);
}

/* 좌측 서브 타이틀 "자활사업 대상자" */
.personwrap .person_li > p {
  background-color: var(--orange);
  color: var(--white);
  font-size: clamp(14px, 2.3vw, 19px);
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  margin: 0 0 16px;
  border-radius: 2px;
}
@media( max-width:768px ){
	.personwrap .person_li > p {
	  font-size: clamp(14px, 1.7vw, 16px);
	}
}

/* -----------------------------------------------
   새로 추가/보완된 좌측 영역 내부 레이아웃
-------------------------------------------------- */
.listwrap {
  margin-top: 4px;
}

/* 4분할 그리드 영역 */
.list1 {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  gap: 10px;
}

/* 상단 ①, ② 및 하단 큰 박스 공통 */
.list1 .item {
  background-color: #1c75c1; /* 파란색 배경 (디자인 가이드 색상으로 매칭하세요) */
  color: #fff;
  padding: 12px;
  text-align: center;
  font-size: clamp(14px, 2.3vw, 19px);
  font-weight: 500;
  box-sizing: border-box;
}
@media( max-width:768px ){
	.list1 .item {
	  font-size: clamp(14px, 1.7vw, 16px);
	}
}
.list1 .item.first, .list1 .item.second {
  flex: 0 0 calc(50% - 5px); /* 반반 정렬 */
}
.list1 .item.last {
  flex: 0 0 100%; /* 하단은 전체 너비 */
  display: flex;
  padding: 10px;
  background-color: #1c75c1;
}

/* 하단 내부 ③,④ / ⑤,⑥ 분할 */
.sub_item_box {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding-left: 10px;
}
.sub_item_box.second {
  border-left: 1px solid rgba(255, 255, 255, 0.3); /* 내부 보이지 않는 구분선 */
}
.sub_item {
  font-size: clamp(14px, 2.3vw, 19px);
}

/* 중앙 플러스(+) 아이콘 스타일링 */
.plus_icon {
  position: absolute;
  top: 65px; /* 중앙 위치 조절 */
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--orange);
  color: #fff;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  line-height: 28px;
  font-weight: 400;
  font-size: 35px;
  z-index: 10;
}

/* 하단 정보 텍스트 라인 */
.list2 {
  margin-top: 20px;
  font-size: 15px;
}
.list2 .info_row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
}


/* 동그라미 번호 아이콘들 스타일 공통 정의 */
.num {
  display: inline-block;
  font-style: normal;
  font-size:clamp(16px, 2.3vw, 24px);
  font-weight:400;
  vertical-align:-2px;
}
/* 하단 채워진 원형 숫자 아이콘 (필요시 설정) */
.list2 .num {
  background: #1e73be;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  margin: 0 2px;
  display: inline-block;
}

/* =============================================
   LIST1 — 파란 박스 (① ~ ⑥)
   ============================================= */
.list1 {
  list-style: none !important;
  margin: 0;
  padding: 0;
  position: relative; /* "+" 배지 기준점 */
}

/* 상단 두 칸: ① 조건부 수급자 / ② 자활급여 특례자 */
.list1 > li.first,
.list1 > li.second {
  float: left;
  width: 50%;
  background-color: var(--blue);
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  padding: 12px 0 !important;
  box-sizing: border-box;
}

.list1 > li.second {
  border-left: 2px solid var(--white);
}

/* "+" 오렌지 원형 배지 — list1 중앙에 절대 배치 */
.list1 > li.first::after {
  content: "+";
  position: absolute;
  left: 50%;
  top: 24px;                    /* (padding 16px + 약 8px) */
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background-color: var(--orange);
  color: var(--white);
  font-size: 16px;
  font-weight: bold;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  z-index: 10;
}

/* 하단 박스: ③④ / ⑤⑥ */
.list1 > li.last {
  clear: both;
  background-color: var(--blue);
  color: var(--white);
  display: flex;
  flex-direction: row;
  border-top: 2px solid var(--white);
  padding: 0;
}

.list1 > li.last > ul {
  list-style: none;
  margin: 0;
  padding: 12px 0 12px 16px;
  flex: 1;
  font-size: 14px;
  font-weight: bold;
  line-height: 2;
  box-sizing: border-box;
}

.list1 > li.last > ul.second {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  padding-left: 16px;
}

.list1 > li.last > ul li {
  display: block;
}

/* 번호 스팬 */
.list1 .num {
  display: inline-block;
  margin-right: 3px;
}

/* =============================================
   LIST2 — 하단 참여 정보 (의무참여·희망참여 등)
   ============================================= */
.list2 {
  list-style: none;
  margin: 14px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: clamp(13px, 2vw, 17px);
  color: var(--text-dark);
  align-items: center;
}

.list2 > li {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 16px;
  flex-wrap: nowrap;
}

.list2 > li.first  { flex: 0 0 auto; }
.list2 > li.second { flex: 0 0 auto; }
.list2 > li.third  { flex: 0 0 auto; padding-right: 0; }
.list2 > li.last   { flex: 0 0 100%; padding-right: 0; gap: 3px; }

/* 번호 원형 배지 공통 */
.list2 .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
  color: var(--white);
  flex-shrink: 0;
  vertical-align:2px;
}

/* 번호별 색상 */
.list2 .num1 { background-color: var(--orange); }
.list2 .num2 { background-color: var(--blue); }
.list2 .num3 { background-color: var(--blue); }
.list2 .num4 { background-color: var(--blue); }
.list2 .num5 { background-color: var(--blue); }
.list2 .num6 { background-color: var(--blue); }

.list2 .num.left { margin-left: 2px; }

/* 불릿 색상 */
.list2 > li::before {
  content: "▪";
  color: var(--orange);
  font-size: 14px;
  margin-right: 2px;
  flex-shrink: 0;
}

/* =============================================
   우측 조건 설명 리스트 (.condition)
   ============================================= */
.condition {
  list-style: none;
  margin: 0;
  padding: 0;
}

.condition li {
  position: relative;
  padding-left: 14px;
  padding-bottom: 14px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-dark);
  word-break: keep-all;
}

.condition li::before {
  content: '';
  position: absolute;
  width: 5px !important;
  height: 5px !important;
  background: color: var(--orange) !important;;
  left: 3px !important;
  top: 11px !important;
}

/* =============================================
   PERSON 리스트 (다른 섹션용)
   ============================================= */
.person {
  display: flex;
  flex-wrap: wrap;
  gap: 10px !important;
  padding: 30px 40px !important;
  margin: 0;
  list-style: none;
}

.person li {
  flex: 0 0 calc((100% - 10px) / 2);
  padding: 0 0 0 17px !important;
  margin: 0 !important;
  font-size: 18px;
  color: #555;
  position: relative;
}

.person li::before {
  content: '';
  position: absolute;
  width: 5px !important;
  height: 5px !important;
  background: var(--orange) !important;
  left: 3px !important;
  top: 11px !important;
}

.person p {
  font-size: 18px;
  color: #555;
  padding: 35px 0 0;
}

@media( max-width:768px ){
	.person {
	  display: block;
	  padding: 20px 10px 20px 25px !important;
	}
	.person li {
	  flex: 0 0 100%;
	  font-size: clamp(14px, 1.7vw, 16px);
	}
	.person p {
	  font-size:  clamp(13px, 1.5vw, 15px);
	  padding: 20px 0 0;
	}
}

/* =============================================
   CONTENTS 리스트
   ============================================= */
.contents {
  display: block;
  gap: 10px !important;
  padding: 30px 40px !important;
  margin: 0;
  list-style: none;
}

.contents li {
  padding: 0 0 0 17px!important;
  margin: 0 !important;
  font-size: 18px;
  color: #555;
  position: relative;
}

.contents li::before {
  content: '';
  position: absolute;
  width: 5px !important;
  height: 5px !important;
  background: var(--green) !important;
  left: 3px !important;
  top: 11px !important;
}

@media( max-width:768px ){
	.contents {
	  padding: 20px 25px !important;
	}
	.contents li {
	  font-size: clamp(14px, 1.7vw, 16px);
	}
}

/* =============================================
   CONTENTS + 사진 2단 레이아웃
   ============================================= */
.contents_wrap {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 30px 40px;
  margin: 0;
}

/* 래퍼 안에서는 리스트 자체 padding 제거 (래퍼가 padding 담당) */
.contents_wrap .contents {
  flex: 1 1 0;
  padding: 0 !important;
}

/* 사진 칸은 이미지 크기에 맞춰 줄어듦 (남는 여백 제거) */
.contents_wrap .biz_photo {
  flex: 0 0 auto;
  margin: 0;
}

/* 이미지 크기는 width 값으로 직접 조절 (예: 280px → 키우거나 줄이기) */
.contents_wrap .biz_photo img {
  display: block;
  width: 280px !important;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

@media( max-width:768px ){
	.contents_wrap {
	  flex-direction: column;
	  align-items: stretch;
	  gap: 20px;
	  padding: 20px 25px;
	}
	.contents_wrap .biz_photo img {
	  width: 100% !important;
	}
}

/* =============================================
   CONT_LIST
   ============================================= */
.cont_list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  gap: 20px;
  list-style: none !important;
}

.cont_list li {
  flex: 0 0 calc((100% - 40px) / 3);
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  background: var(--white);
  text-align: center;
  position: relative;
}

.cont_list li p {
  padding: 12px 0 50px;
  font-size: 20px;
  letter-spacing: -0.025em;
  font-weight: 500;
  font-family: 'Pretendard';
}

.cont_list li img {
  padding: 50px 0 0;
}

.cont_list li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 65px;
  height: 3px;
  background: #1c75c1;
}
@media( max-width:768px ){
	.cont_list {
	  gap: 10px;
	}
	.cont_list li {
	  flex: 0 0 calc((100% - 20px) / 3);
	}
	.cont_list li img {
	  padding: 30px 0 0;
	  width:clamp(65%, 25vw, 50%);
	}
	.cont_list li p {
	  padding: 12px 0 30px;
	  font-size: 17px;
	}
	.cont_list li::after {
	  width: 45px;
	}
}
@media( max-width:420px ){
	.cont_list li p {
	  font-size: 15px;
	}
}

/* =============================================
   PROCESS
   ============================================= */
.process {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  padding: 0;
  margin: 0;
}

.process .list {
  flex: 0 0 calc((100% - 135px) / 4);
  border: 1px solid #7c7c7c;
  position: relative;
  padding: 5px 10px;
  margin: 0;
  box-sizing: border-box;
  font-size: 17px;
  color: #333;
}

.process .list:nth-child(2) { background: #e2ebf2; }
.process .list:nth-child(3) { background: #ccdeed; }
.process .list:nth-child(4) { background: #a0c4e2; }
.process .list:nth-child(5) { background: #74a9d7; color: var(--white); }
.process .list:nth-child(6) { background: #488fcc; color: var(--white); }
.process .list:nth-child(7) { background: #1c75c1; color: var(--white); }

.process .list::before {
  display: block;
  content: "▶";
  position: absolute;
  top: 50%;
  right: -10%;
  margin-top: -6px;
  width: 7px;
  height: 12px;
  color: #333;
  font-size: 10px;
}
.process .list:last-child::before {
  display:none;
}

.process .list dl {
  vertical-align: middle;
  display: table-cell;
  height: 65px;
  padding: 0 0 0 65px;
  position: relative;
}

.process .list dl .num {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translate(0, -50%);
  width: 25px;
  height: 25px;
  background: #333;
  color: var(--white);
  border-radius: 100%;
  text-align: center;
}

@media( max-width:860px ){
	.process .list {
	  flex: 0 0 calc((100% - 40px) / 2);
	}
	.process .list::before {
	  right: -7%;
	}
	.process .list dl {
	  padding: 0 0 0 45px;
	}
}
@media( max-width:600px ){
	.process {
	  gap: 10px 20px;
	}
	.process .list {
	  flex: 0 0 calc((100% - 20px) / 2);
	  font-size: 15px;
	  padding: 5px;
	}
	.process .list::before {
	  right: -5%;
	}
}
@media( max-width:430px ){
	.process {
	  gap: 10px 10px;
	}
	.process .list {
	  flex: 0 0 calc((100% - 10px) / 2);
	  font-size: 14px;
	}
	.process .list::before {
	  right: -5%;
	}
	.process .list dl {
	  padding: 0 0 0 35px;
	}
	.process .list dl .num {
	  width: 20px;
	  height: 20px;
	  left: 5px;
	}
}

/* =============================================
   COMPANY 카드
   ============================================= */
.company {
  border: 1px solid var(--border-color) !important;
  display: block;
  padding: 30px;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.company::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 80%;
  left: 27%;
  top: 10%;
  background: var(--border-color);
}

.company .companyimg {
  width: 30%;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
}

.company .companyinfo {
  width: 70%;
  float: right;
  display: block;
  padding: 0;
  margin: 0;
}

.company .companyinfo h5 {
  color: #1c75c1 !important;
  margin: 0 0 15px !important;
}

.company .companyinfo .info {
  font-size: 17px;
  display: block;
  overflow: hidden;
  padding: 0;
  margin: 0 0 10px;
}

.company .companyinfo .info dt {
  position: relative;
  float: left;
  display: block;
  width: 15%;
  padding: 0 0 0 3px;
  margin: 0;
  font-weight: 600;
  box-sizing: border-box;
  overflow: hidden;
}

.company .companyinfo .info dt i {
  color: #1c75c1;
  width: 17%;
  float: left;
  display: block;
  padding: 3px 0 0;
  margin: 0 auto;
}

.company .companyinfo .info dt span {
  width: 78%;
  float: right;
  display: block;
  color: #212121;
}

.company .companyinfo .info dd {
  display: block;
  float: right;
  margin: 0;
  padding: 0;
  width: 85%;
  color: #555;
  font-weight: 400;
  box-sizing: border-box;
}

@media( max-width:1024px ){
	.company .companyimg {
	  width: 35%;
	}
	.company .companyinfo {
	  width: 65%;
	}
	.company::before {
	  left: 31.5%;
	}
	.company .companyinfo .info dt i {
	  width: 20%;
	  padding: 3px 0 0;
	}
	.company .companyinfo .info dt span {
	  width: 70%;
	}
	.company .companyinfo .info dd {
	  width: 80%;
	}
}
@media( max-width:768px ){
	.company .companyimg {
	  width: 40%;
	}
	.company .companyinfo {
	  width: 60%;
	}
	.company::before {
	  display:none;
	}
	.company .companyinfo .info {
	  font-size: clamp(14px, 2vw, 17px);
	}
	.company .companyinfo .info dt {
	  width: 20%;
	}
	.company .companyinfo .info dt i {
	  width: 20%;
	  padding: 3px 0 0;
	}
	.company .companyinfo .info dt span {
	  width: 70%;
	}
	.company .companyinfo .info dd {
	  width: 75%;
	}
}
@media( max-width:650px ){
	.company .companyimg {
	  width: 100%;
	}
	.company .companyimg img {
	  width: 100%;
	  max-width:100%;
	}
	.company .companyinfo {
	  width: 100%;
	  margin: 20px 0 0;
	}
}
@media( max-width:450px ){
	.company .companyinfo .info dt {
	  width: 25%;
	}
	.company .companyinfo .info dd {
	  width: 70%;
	}
}
@media( max-width:380px ){
	.company .companyinfo .info dt {
	  width: 30%;
	}
	.company .companyinfo .info dd {
	  width: 65%;
	}
}

/* =============================================
   LOCATION 태그 / 기타
   ============================================= */
.location {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  font-size: 15px;
  padding: 3px 20px;
  text-align: center;
  color: var(--sub-color);
  font-weight: 500;
  border: 1px solid var(--sub-color);
  border-radius: 20px;
  margin: 0 0 0 5px;
}

.biz_txt {
  color: #333;
  font-weight: 500;
}

.biz_txt b {
  font-size: clamp(17px 2vw, 22px);
  font-weight: 600;
}

/* =============================================
   반응형 — 768px 이하
   ============================================= */
@media (max-width: 768px) {
  .personwrap {
    flex-direction: column;
  }

  .personwrap .person_li {
    flex: 0 0 100%;
    padding: 20px 16px;
  }

  .personwrap .person_li:first-child {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .condition i.pc_block {
    display: inline;
  }
}


.care_li {
  display:flex;
  flex-wrap:wrap;
  padding:0;
  margin:25px 0 0;
  gap:20px;
}
.care_li dl {
  flex:0 0 calc((100% - 40px) / 3);
  display:block;
  padding:0;
  margin:0;
  position:relative;
}

/* 하늘색 박스: 원 중앙(55px) 지점부터 시작 → 고정값 */
.care_li dl:before {
  content:'';
  position:absolute;
  top:85px;
  left:0;
  right:0;
  bottom:0;
  background:#e4effa;
  border-radius:2rem 2rem 0.5rem 0.5rem;
}

/* 원이 박스 위 절반, 아래 절반 걸치도록 top:0 고정 */
.care_li dl .num_circle {
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:175px;
  height:175px;
  background:#1c75c1;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:2;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}
.care_li dl .num_circle span {
  color:#fff;
  font-size:clamp(14px, 2.5vw, 17px);
  font-weight:700;
  line-height:1.2;
}
.care_li dl .num_circle .tit {
  color:#fff;
  font-size:clamp(16px, 3vw, 22px);
  font-weight:600;
  line-height:1.3;
  margin-top:2px;
  white-space:nowrap;
}

/* 내용(li)은 원(110px) 아래에서 시작하도록 margin-top 고정 */
.care_li dl ul {
  margin-top:195px;
  padding:0 35px 35px !important;
}

@media( max-width:768px ){
	.care_li dl {
	  flex:0 0 calc((100% - 20px) / 2);
	}
}
@media( max-width:500px ){
	.care_li dl {
	  flex:0 0 100%;
	}
}

.gateway_wrap{display:flex; flex-wrap:wrap; gap:40px; list-style:none; padding:0; margin:25px 0 0;}
.gateway_wrap li{flex:0 0 calc((100% - 50px) / 2); position:relative; padding:0; margin:0;}
.gateway_wrap li:before{content:'\f0da'; position:absolute; font-family:'fontawesome'; width:25px; height:25px; color:#c2ddf5; right:-32px; top:42%; transform: translate(0, -42%); font-size:45px;}
.gateway_wrap li:last-of-type:before{display:none;}

@media( max-width:900px ){
	.gateway_wrap{width:65%; margin:15px 0 0;}
	.gateway_wrap li{flex:0 0 100%;}
	.gateway_wrap li:before{content:'\f0d7'; right:46%; top:94%; transform: translate(-50%, 0);}
}

@media( max-width:650px ){
	.gateway_wrap{width:100%;}
}
@media( max-width:430px ){
	.gateway_wrap li:before{right:43%; top:96%; transform: translate(-50%, 0); font-size:35px;}
}