@charset "UTF-8";

* {box-sizing:border-box}

/* @font-face {
  font-family: 'S-CoreDream';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
} */

/* 탭*/
.tabs-tit {padding: 0 20px;}
.tabs-tit > li {border: 1px solid  #D7E2EA;}
.tabs-tit > li > a { color: #888; ;font-weight: 600;padding: 10px 0; display: block; background: #fff; text-align: center; text-decoration: none; font-size: 15px; line-height: 20px; border-bottom: 2px solid transparent; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.tabs-tit > li.active > a { color: #ffffff; background-color: #003882;}


/* 단계별 상태 스타일 */
.step-box {
  width: 1200px;
  margin: 0 auto;

}
.step-state {
  /* padding:10px 0 15px; */
  /* margin-top:15px; */
  margin: 5px 0;
  
}


.step-state ul {
 
  display: flex;
  flex-direction: row;
  align-items: center;
  clear:both
}
.step-state ul li {
  position:relative;
  width: 100%; /* 8개 진행바를 8등분 */
  /* padding-top:50px; 진행바 영역 확보 */
  font-size:15px;
  font-weight: 600;
  text-align:center;
  color:#666;
  border-top: 1px solid #d4e8ef;
}

.step-state ul li:first-child {
  flex:none;
  width:150px;
  border: none;
}
.step-state ul li p{
  padding: 8px 0;
  height: 60px;
  border-right: 1px solid #d4e8ef;
  border-left: 1px solid #d4e8ef;
  margin: 0 5px;
}


.step-state ul li:first-child p{
  margin: 0;
  background-color: #ff889b;
  line-height: 40px;
  border: 1px solid #ff889b;
  color: #ffffff;
  border-radius: 10px 0 0 10px;
  
}
.step-state.red-thema ul li:first-child p{
  margin: 0;
  background-color: #b10132;
  line-height: 40px;
  border: 1px solid #b10132;
}
.step-state.blue-thema ul li:first-child p{
  background-color: #1c3da8;
  border: 1px solid #1c3da8;
}
.step-state.green-thema ul li:first-child p{
  margin: 0;
  background-color: #0a6c3b;
  line-height: 40px;
  border: 1px solid #0a6c3b;
}
.step-state.yellow-thema ul li:first-child p{
  margin: 0;
  background-color: #ffa500;
  line-height: 40px;
  border: 1px solid #ffa500;
}
.step-state.purple-thema ul li:first-child p{
  margin: 0;
  background-color: #520089;
  line-height: 40px;
  border: 1px solid #520089;
}
.step-state ul li:nth-child(2) p{
  margin-left: 0;
}

.step-state ul li:last-child p{
  
  margin-right: 0;
}

/* 도전중, 달성 텍스트 영역 */
.step-state ul li p:after {
  position:absolute; /* absolute 기준은 li 영역 */
  width:41px;
  height:24px;
  margin-right:-20px;
 
  background-size:auto 24px;
  background-position:-58px 0;
  top:0;
  right:0;
  color:#fff;
  font-size:11px;
  line-height:16px;
  letter-spacing:-.5px;
}


.step-state ul li span {
  display:block;
  margin-top:2px;
  font-weight:400;
  color:#01426c;
  font-size:14px
}
.step-state ul li span:last-child {
  color:#333333;
}
/* 회색 진행바 생성 */
.step-state ul li:before {
  position:absolute;
  top:91%;
  left:0;
  right:0;
  height:5px;
  background:#d4e8ef;
  content:''
}
/* 첫 번째 진행바 반만 생성*/
.step-state ul li:nth-child(1):before {
  left:50%
}
/* 마지막 진행바 반만 생성*/
.step-state ul li:nth-child(9):before {
  right:50%
}

/* 지나간일자 색상으로 표현 */
.step-state.red-thema.step1 ul li:nth-child(1),
.step-state.red-thema.step2 ul li:nth-child(-n+2),
.step-state.red-thema.step2-ing ul li:nth-child(-n+2),
.step-state.red-thema.step3 ul li:nth-child(-n+3),
.step-state.red-thema.step3-ing ul li:nth-child(-n+3),
.step-state.red-thema.step4 ul li:nth-child(-n+4),
.step-state.red-thema.step4-ing ul li:nth-child(-n+4),
.step-state.red-thema.step5 ul li:nth-child(-n+5),
.step-state.red-thema.step5-ing ul li:nth-child(-n+5),
.step-state.red-thema.step6 ul li:nth-child(-n+6),
.step-state.red-thema.step6-ing ul li:nth-child(-n+6),
.step-state.red-thema.step7 ul li:nth-child(-n+7),
.step-state.red-thema.step7-ing ul li:nth-child(-n+7), 
.step-state.red-thema.step8 ul li:nth-child(-n+8),
.step-state.red-thema.step8-ing ul li:nth-child(-n+8) {
  background: #fff0f4;
}
.step-state.blue-thema.step1 ul li:nth-child(1),
.step-state.blue-thema.step2 ul li:nth-child(-n+2),
.step-state.blue-thema.step2-ing ul li:nth-child(-n+2),
.step-state.blue-thema.step3 ul li:nth-child(-n+3),
.step-state.blue-thema.step3-ing ul li:nth-child(-n+3),
.step-state.blue-thema.step4 ul li:nth-child(-n+4),
.step-state.blue-thema.step4-ing ul li:nth-child(-n+4),
.step-state.blue-thema.step5 ul li:nth-child(-n+5),
.step-state.blue-thema.step5-ing ul li:nth-child(-n+5),
.step-state.blue-thema.step6 ul li:nth-child(-n+6),
.step-state.blue-thema.step6-ing ul li:nth-child(-n+6),
.step-state.blue-thema.step7 ul li:nth-child(-n+7),
.step-state.blue-thema.step7-ing ul li:nth-child(-n+7), 
.step-state.blue-thema.step8 ul li:nth-child(-n+8),
.step-state.blue-thema.step8-ing ul li:nth-child(-n+8) {
  background: #e9f4ff;
}
.step-state.green-thema.step1 ul li:nth-child(1),
.step-state.green-thema.step2 ul li:nth-child(-n+2),
.step-state.green-thema.step2-ing ul li:nth-child(-n+2),
.step-state.green-thema.step3 ul li:nth-child(-n+3),
.step-state.green-thema.step3-ing ul li:nth-child(-n+3),
.step-state.green-thema.step4 ul li:nth-child(-n+4),
.step-state.green-thema.step4-ing ul li:nth-child(-n+4),
.step-state.green-thema.step5 ul li:nth-child(-n+5),
.step-state.green-thema.step5-ing ul li:nth-child(-n+5),
.step-state.green-thema.step6 ul li:nth-child(-n+6),
.step-state.green-thema.step6-ing ul li:nth-child(-n+6),
.step-state.green-thema.step7 ul li:nth-child(-n+7),
.step-state.green-thema.step7-ing ul li:nth-child(-n+7), 
.step-state.green-thema.step8 ul li:nth-child(-n+8),
.step-state.green-thema.step8-ing ul li:nth-child(-n+8) {
  background: #f3ffe9;
}
.step-state.yellow-thema.step1 ul li:nth-child(1),
.step-state.yellow-thema.step2 ul li:nth-child(-n+2),
.step-state.yellow-thema.step2-ing ul li:nth-child(-n+2),
.step-state.yellow-thema.step3 ul li:nth-child(-n+3),
.step-state.yellow-thema.step3-ing ul li:nth-child(-n+3),
.step-state.yellow-thema.step4 ul li:nth-child(-n+4),
.step-state.yellow-thema.step4-ing ul li:nth-child(-n+4),
.step-state.yellow-thema.step5 ul li:nth-child(-n+5),
.step-state.yellow-thema.step5-ing ul li:nth-child(-n+5),
.step-state.yellow-thema.step6 ul li:nth-child(-n+6),
.step-state.yellow-thema.step6-ing ul li:nth-child(-n+6),
.step-state.yellow-thema.step7 ul li:nth-child(-n+7),
.step-state.yellow-thema.step7-ing ul li:nth-child(-n+7), 
.step-state.yellow-thema.step8 ul li:nth-child(-n+8),
.step-state.yellow-thema.step8-ing ul li:nth-child(-n+8) {
  background: #fff4df;
}
.step-state.purple-thema.step1 ul li:nth-child(1),
.step-state.purple-thema.step2 ul li:nth-child(-n+2),
.step-state.purple-thema.step2-ing ul li:nth-child(-n+2),
.step-state.purple-thema.step3 ul li:nth-child(-n+3),
.step-state.purple-thema.step3-ing ul li:nth-child(-n+3),
.step-state.purple-thema.step4 ul li:nth-child(-n+4),
.step-state.purple-thema.step4-ing ul li:nth-child(-n+4),
.step-state.purple-thema.step5 ul li:nth-child(-n+5),
.step-state.purple-thema.step5-ing ul li:nth-child(-n+5),
.step-state.purple-thema.step6 ul li:nth-child(-n+6),
.step-state.purple-thema.step6-ing ul li:nth-child(-n+6),
.step-state.purple-thema.step7 ul li:nth-child(-n+7),
.step-state.purple-thema.step7-ing ul li:nth-child(-n+7), 
.step-state.purple-thema.step8 ul li:nth-child(-n+8),
.step-state.purple-thema.step8-ing ul li:nth-child(-n+8) {
  background: #f1eaf7;
}
/* ----------------------------------- */
/* 화살표 상태 아이콘 */

.step-state.step1 ul li:nth-child(1) p span,
.step-state.step2 ul li:nth-child(-n+1) p span,
.step-state.step2-ing ul li:nth-child(-n+2) p span,
.step-state.step3 ul li:nth-child(-n+2) p span,
.step-state.step3-ing ul li:nth-child(-n+3) p span,
.step-state.step4 ul li:nth-child(-n+3) p span,
.step-state.step4-ing ul li:nth-child(-n+4) p span,
.step-state.step5 ul li:nth-child(-n+4) p span,
.step-state.step5-ing ul li:nth-child(-n+5) p span,
.step-state.step6 ul li:nth-child(-n+5) p span,
.step-state.step6-ing ul li:nth-child(-n+6) p span,
.step-state.step7 ul li:nth-child(-n+6) p span,
.step-state.step7-ing ul li:nth-child(-n+7) p span, 
.step-state.step8 ul li:nth-child(-n+7) p span,
.step-state.step8-ing ul li:nth-child(-n+8) p span{
  opacity: 60%;
}

/* 활성화 진행바 및 활성화 화살표 아이콘 표시 */
/* 활성화 상태바 */
.step-state.red-thema.step1 ul li:nth-child(1):before,
.step-state.red-thema.step2 ul li:nth-child(-n+2):before,
.step-state.red-thema.step2-ing ul li:nth-child(-n+2):before,
.step-state.red-thema.step3 ul li:nth-child(-n+3):before,
.step-state.red-thema.step3-ing ul li:nth-child(-n+3):before,
.step-state.red-thema.step4 ul li:nth-child(-n+4):before,
.step-state.red-thema.step4-ing ul li:nth-child(-n+4):before,
.step-state.red-thema.step5 ul li:nth-child(-n+5):before,
.step-state.red-thema.step5-ing ul li:nth-child(-n+5):before,
.step-state.red-thema.step6 ul li:nth-child(-n+6):before,
.step-state.red-thema.step6-ing ul li:nth-child(-n+6):before,
.step-state.red-thema.step7 ul li:nth-child(-n+7):before,
.step-state.red-thema.step7-ing ul li:nth-child(-n+7):before, 
.step-state.red-thema.step8 ul li:nth-child(-n+8):before,
.step-state.red-thema.step8-ing ul li:nth-child(-n+8):before  {
  background:#b10132;
}
.step-state.blue-thema.step1 ul li:nth-child(1):before,
.step-state.blue-thema.step2 ul li:nth-child(-n+2):before,
.step-state.blue-thema.step2-ing ul li:nth-child(-n+2):before,
.step-state.blue-thema.step3 ul li:nth-child(-n+3):before,
.step-state.blue-thema.step3-ing ul li:nth-child(-n+3):before,
.step-state.blue-thema.step4 ul li:nth-child(-n+4):before,
.step-state.blue-thema.step4-ing ul li:nth-child(-n+4):before,
.step-state.blue-thema.step5 ul li:nth-child(-n+5):before,
.step-state.blue-thema.step5-ing ul li:nth-child(-n+5):before,
.step-state.blue-thema.step6 ul li:nth-child(-n+6):before,
.step-state.blue-thema.step6-ing ul li:nth-child(-n+6):before,
.step-state.blue-thema.step7 ul li:nth-child(-n+7):before,
.step-state.blue-thema.step7-ing ul li:nth-child(-n+7):before, 
.step-state.blue-thema.step8 ul li:nth-child(-n+8):before,
.step-state.blue-thema.step8-ing ul li:nth-child(-n+8):before  {
  background:#1c3da8;
}
.step-state.green-thema.step1 ul li:nth-child(1):before,
.step-state.green-thema.step2 ul li:nth-child(-n+2):before,
.step-state.green-thema.step2-ing ul li:nth-child(-n+2):before,
.step-state.green-thema.step3 ul li:nth-child(-n+3):before,
.step-state.green-thema.step3-ing ul li:nth-child(-n+3):before,
.step-state.green-thema.step4 ul li:nth-child(-n+4):before,
.step-state.green-thema.step4-ing ul li:nth-child(-n+4):before,
.step-state.green-thema.step5 ul li:nth-child(-n+5):before,
.step-state.green-thema.step5-ing ul li:nth-child(-n+5):before,
.step-state.green-thema.step6 ul li:nth-child(-n+6):before,
.step-state.green-thema.step6-ing ul li:nth-child(-n+6):before,
.step-state.green-thema.step7 ul li:nth-child(-n+7):before,
.step-state.green-thema.step7-ing ul li:nth-child(-n+7):before, 
.step-state.green-thema.step8 ul li:nth-child(-n+8):before,
.step-state.green-thema.step8-ing ul li:nth-child(-n+8):before  {
  background:#0a6c3b;
}
.step-state.yellow-thema.step1 ul li:nth-child(1):before,
.step-state.yellow-thema.step2 ul li:nth-child(-n+2):before,
.step-state.yellow-thema.step2-ing ul li:nth-child(-n+2):before,
.step-state.yellow-thema.step3 ul li:nth-child(-n+3):before,
.step-state.yellow-thema.step3-ing ul li:nth-child(-n+3):before,
.step-state.yellow-thema.step4 ul li:nth-child(-n+4):before,
.step-state.yellow-thema.step4-ing ul li:nth-child(-n+4):before,
.step-state.yellow-thema.step5 ul li:nth-child(-n+5):before,
.step-state.yellow-thema.step5-ing ul li:nth-child(-n+5):before,
.step-state.yellow-thema.step6 ul li:nth-child(-n+6):before,
.step-state.yellow-thema.step6-ing ul li:nth-child(-n+6):before,
.step-state.yellow-thema.step7 ul li:nth-child(-n+7):before,
.step-state.yellow-thema.step7-ing ul li:nth-child(-n+7):before, 
.step-state.yellow-thema.step8 ul li:nth-child(-n+8):before,
.step-state.yellow-thema.step8-ing ul li:nth-child(-n+8):before  {
  background:#ffa500;
}
.step-state.purple-thema.step1 ul li:nth-child(1):before,
.step-state.purple-thema.step2 ul li:nth-child(-n+2):before,
.step-state.purple-thema.step2-ing ul li:nth-child(-n+2):before,
.step-state.purple-thema.step3 ul li:nth-child(-n+3):before,
.step-state.purple-thema.step3-ing ul li:nth-child(-n+3):before,
.step-state.purple-thema.step4 ul li:nth-child(-n+4):before,
.step-state.purple-thema.step4-ing ul li:nth-child(-n+4):before,
.step-state.purple-thema.step5 ul li:nth-child(-n+5):before,
.step-state.purple-thema.step5-ing ul li:nth-child(-n+5):before,
.step-state.purple-thema.step6 ul li:nth-child(-n+6):before,
.step-state.purple-thema.step6-ing ul li:nth-child(-n+6):before,
.step-state.purple-thema.step7 ul li:nth-child(-n+7):before,
.step-state.purple-thema.step7-ing ul li:nth-child(-n+7):before, 
.step-state.purple-thema.step8 ul li:nth-child(-n+8):before,
.step-state.purple-thema.step8-ing ul li:nth-child(-n+8):before  {
  background:#520089;
}

.step-state.step1-ing ul li:nth-child(1) p:after, 
.step-state.step2-ing ul li:nth-child(2) p:after, 
.step-state.step3-ing ul li:nth-child(3) p:after, 
.step-state.step4-ing ul li:nth-child(4) p:after, 
.step-state.step5-ing ul li:nth-child(5) p:after, 
.step-state.step6-ing ul li:nth-child(6) p:after, 
.step-state.step7-ing ul li:nth-child(7) p:after, 
.step-state.step8-ing ul li:nth-child(8) p:after {
  width: 0px;
  height: 0px;
  border-left: 8px solid #cedbf5;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  left: 220%;
  position: absolute;
  top: 37%;
}
/* 활성화 아이콘 표시 */
.step-state.step1 ul li:nth-child(1):after,
.step-state.step2 ul li:nth-child(-n+2):after,
.step-state.step2-ing ul li:nth-child(-n+2):after,
.step-state.step3 ul li:nth-child(-n+3):after,
.step-state.step3-ing ul li:nth-child(-n+3):after,
.step-state.step4 ul li:nth-child(-n+4):after,
.step-state.step4-ing ul li:nth-child(-n+4):after,
.step-state.step5 ul li:nth-child(-n+5):after,
.step-state.step5-ing ul li:nth-child(-n+5):after,
.step-state.step6 ul li:nth-child(-n+6):after,
.step-state.step6-ing ul li:nth-child(-n+6):after,
.step-state.step7 ul li:nth-child(-n+7):after,
.step-state.step7-ing ul li:nth-child(-n+7):after,
.step-state.step8 ul li:nth-child(-n+8):after {
  background-position:-20px 0
}
/* 도전 중일 경우의 1/2 영역 비활성화 상태바 영역 */
.step-state ul li p:before {
  position:absolute;
  top:91%;
  left:50%;
  right:0;
  height:5px;
  content:'';
}
.step-state.step2 ul li:nth-child(2) p:before,
.step-state.step3 ul li:nth-child(3) p:before,
.step-state.step4 ul li:nth-child(4) p:before,
.step-state.step5 ul li:nth-child(5) p:before,
.step-state.step6 ul li:nth-child(6) p:before,
.step-state.step7 ul li:nth-child(7) p:before,
.step-state.step8 ul li:nth-child(8) p:before {
  background:#d4e8ef;
}

/*앞으로 도래일자 강조표시*/
.step-state.red-thema.step1 ul li:nth-child(2),
.step-state.red-thema.step1-ing ul li:nth-child(2),
.step-state.red-thema.step2 ul li:nth-child(2),
.step-state.red-thema.step2-ing ul li:nth-child(3),
.step-state.red-thema.step3 ul li:nth-child(3),
.step-state.red-thema.step3-ing ul li:nth-child(4),
.step-state.red-thema.step4 ul li:nth-child(4),
.step-state.red-thema.step4-ing ul li:nth-child(5),
.step-state.red-thema.step5 ul li:nth-child(5),
.step-state.red-thema.step5-ing ul li:nth-child(6),
.step-state.red-thema.step6 ul li:nth-child(6),
.step-state.red-thema.step6-ing ul li:nth-child(7),
.step-state.red-thema.step7 ul li:nth-child(7),
.step-state.red-thema.step7-ing ul li:nth-child(8),
.step-state.red-thema.step8 ul li:nth-child(8)
{
  background-color: #ffd4e0;
} 

.step-state.blue-thema.step1 ul li:nth-child(2),
.step-state.blue-thema.step1-ing ul li:nth-child(2),
.step-state.blue-thema.step2 ul li:nth-child(2),
.step-state.blue-thema.step2-ing ul li:nth-child(3),
.step-state.blue-thema.step3 ul li:nth-child(3),
.step-state.blue-thema.step3-ing ul li:nth-child(4),
.step-state.blue-thema.step4 ul li:nth-child(4),
.step-state.blue-thema.step4-ing ul li:nth-child(5),
.step-state.blue-thema.step5 ul li:nth-child(5),
.step-state.blue-thema.step5-ing ul li:nth-child(6),
.step-state.blue-thema.step6 ul li:nth-child(6),
.step-state.blue-thema.step6-ing ul li:nth-child(7),
.step-state.blue-thema.step7 ul li:nth-child(7),
.step-state.blue-thema.step7-ing ul li:nth-child(8),
.step-state.blue-thema.step8 ul li:nth-child(8)
{
  background-color: #c0dfff;
} 
.step-state.green-thema.step1 ul li:nth-child(2),
.step-state.green-thema.step1-ing ul li:nth-child(2),
.step-state.green-thema.step2 ul li:nth-child(2),
.step-state.green-thema.step2-ing ul li:nth-child(3),
.step-state.green-thema.step3 ul li:nth-child(3),
.step-state.green-thema.step3-ing ul li:nth-child(4),
.step-state.green-thema.step4 ul li:nth-child(4),
.step-state.green-thema.step4-ing ul li:nth-child(5),
.step-state.green-thema.step5 ul li:nth-child(5),
.step-state.green-thema.step5-ing ul li:nth-child(6),
.step-state.green-thema.step6 ul li:nth-child(6),
.step-state.green-thema.step6-ing ul li:nth-child(7),
.step-state.green-thema.step7 ul li:nth-child(7),
.step-state.green-thema.step7-ing ul li:nth-child(8),
.step-state.green-thema.step8 ul li:nth-child(8)
{
  background-color:#d3f7b4;
} 
.step-state.yellow-thema.step1 ul li:nth-child(2),
.step-state.yellow-thema.step1-ing ul li:nth-child(2),
.step-state.yellow-thema.step2 ul li:nth-child(2),
.step-state.yellow-thema.step2-ing ul li:nth-child(3),
.step-state.yellow-thema.step3 ul li:nth-child(3),
.step-state.yellow-thema.step3-ing ul li:nth-child(4),
.step-state.yellow-thema.step4 ul li:nth-child(4),
.step-state.yellow-thema.step4-ing ul li:nth-child(5),
.step-state.yellow-thema.step5 ul li:nth-child(5),
.step-state.yellow-thema.step5-ing ul li:nth-child(6),
.step-state.yellow-thema.step6 ul li:nth-child(6),
.step-state.yellow-thema.step6-ing ul li:nth-child(7),
.step-state.yellow-thema.step7 ul li:nth-child(7),
.step-state.yellow-thema.step7-ing ul li:nth-child(8),
.step-state.yellow-thema.step8 ul li:nth-child(8)
{
  background-color:#ffdfa4;
} 
.step-state.purple-thema.step1 ul li:nth-child(2),
.step-state.purple-thema.step1-ing ul li:nth-child(2),
.step-state.purple-thema.step2 ul li:nth-child(2),
.step-state.purple-thema.step2-ing ul li:nth-child(3),
.step-state.purple-thema.step3 ul li:nth-child(3),
.step-state.purple-thema.step3-ing ul li:nth-child(4),
.step-state.purple-thema.step4 ul li:nth-child(4),
.step-state.purple-thema.step4-ing ul li:nth-child(5),
.step-state.purple-thema.step5 ul li:nth-child(5),
.step-state.purple-thema.step5-ing ul li:nth-child(6),
.step-state.purple-thema.step6 ul li:nth-child(6),
.step-state.purple-thema.step6-ing ul li:nth-child(7),
.step-state.purple-thema.step7 ul li:nth-child(7),
.step-state.purple-thema.step7-ing ul li:nth-child(8),
.step-state.purple-thema.step8 ul li:nth-child(8)
{
  background-color:#e7d4f5;
} 


/*글자강조*/
.step-state.step1 ul li:nth-child(2) p span,
.step-state.step1-ing ul li:nth-child(2) p span,
.step-state.step2 ul li:nth-child(2) p span,
.step-state.step2-ing ul li:nth-child(3) p span,
.step-state.step3 ul li:nth-child(3) p span,
.step-state.step3-ing ul li:nth-child(4) p span,
.step-state.step4 ul li:nth-child(4) p span,
.step-state.step4-ing ul li:nth-child(5) p span ,
.step-state.step5 ul li:nth-child(5) p span,
.step-state.step5-ing ul li:nth-child(6) p span,
.step-state.step6 ul li:nth-child(6) p span,
.step-state.step6-ing ul li:nth-child(7) p span,
.step-state.step7 ul li:nth-child(7) p span,
.step-state.step7-ing ul li:nth-child(8) p span
{
   font-weight: 600;
} 

/* "도전중" 텍스트 표시 */
 /*.step-state.step1 ul li:nth-child(1) p:after,
.step-state.step2-ing ul li:nth-child(2) p:after,
.step-state.step3-ing ul li:nth-child(3) p:after,
.step-state.step4-ing ul li:nth-child(4) p:after {
  content:'도전중';
} */

/* "달성" 텍스트 표시 */
/*.step-state.step2 ul li:nth-child(2) p:after,
.step-state.step3 ul li:nth-child(3) p:after,
.step-state.step4 ul li:nth-child(4) p:after,
.step-state.step5 ul li:nth-child(5) p:after {
  content:'진행중';
  right:50%
} */
/*
.step-state.step1 ul li:nth-child(2) p:after
 {
  content:'원서접수';
  right:50%
} 

.step-state.step1 ul li:nth-child(3) p:after
{
  content:'1차필기';
  right:50%
} 

.step-state.step1 ul li:nth-child(4) p:after
 {
  content:'1차합격자발표';
  right:50%
} 
.step-state.step1 ul li:nth-child(5) p:after
 {
  content:'2차필기';
  right:50%
} 
.step-state.step1 ul li:nth-child(6) p:after
 {
  content:'2차합격자발표';
  right:50%
} 
.step-state.step1 ul li:nth-child(7) p:after
 {
  content:'면접시험';
  right:50%
} 
.step-state.step1 ul li:nth-child(8) p:after
 {
  content:'최종합격자';
  right:50%
} 
*/
.step-state.step1-ing ul li:nth-child(1) p:after, 
.step-state.step2-ing ul li:nth-child(2) p:after, 
.step-state.step3-ing ul li:nth-child(3) p:after, 
.step-state.step4-ing ul li:nth-child(4) p:after, 
.step-state.step5-ing ul li:nth-child(5) p:after, 
.step-state.step6-ing ul li:nth-child(6) p:after,  
.step-state.step7-ing ul li:nth-child(7) p:after,
.step-state.step8-ing ul li:nth-child(8) p:after{
  width: 0px;
  height: 0px;
  /* border-left: 8px solid #ff889b; */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  left: 99%;
  position: absolute;
  top: 85%;
  right: 0;
  content: '';
  z-index: 10;
}
.step-state.step8-ing ul li:last-child p:after{
  border:none;
}

.step-state.step2 ul li:nth-child(2) p:after,
.step-state.step3 ul li:nth-child(3) p:after, 
.step-state.step4 ul li:nth-child(4) p:after, 
.step-state.step5 ul li:nth-child(5) p:after, 
.step-state.step6 ul li:nth-child(6) p:after,
.step-state.step7 ul li:nth-child(7) p:after, 
.step-state.step8 ul li:nth-child(8) p:after{
  width: 0px;
  height: 0px;
  /* border-left: 8px solid #d4e8ef; */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  left: 50%;
  position: absolute;
  top: 85%;
  right: 0;
  content: '';
  z-index: 1;
}

.step-state.red-thema.step1-ing ul li:nth-child(1) p:after,
.step-state.red-thema.step2 ul li:nth-child(2) p:after,
.step-state.red-thema.step2-ing ul li:nth-child(2) p:after, 
.step-state.red-thema.step3 ul li:nth-child(3) p:after, 
.step-state.red-thema.step3-ing ul li:nth-child(3) p:after, 
.step-state.red-thema.step4 ul li:nth-child(4) p:after, 
.step-state.red-thema.step4-ing ul li:nth-child(4) p:after, 
.step-state.red-thema.step5 ul li:nth-child(5) p:after, 
.step-state.red-thema.step5-ing ul li:nth-child(5) p:after, 
.step-state.red-thema.step6 ul li:nth-child(6) p:after,
.step-state.red-thema.step6-ing ul li:nth-child(6) p:after,  
.step-state.red-thema.step7 ul li:nth-child(7) p:after,
.step-state.red-thema.step7-ing ul li:nth-child(7) p:after, 
.step-state.red-thema.step8 ul li:nth-child(8) p:after,
.step-state.red-thema.step8-ing ul li:nth-child(8) p:after{
  border-left: 14px solid #b10132;
}
.step-state.blue-thema.step1-ing ul li:nth-child(1) p:after,
.step-state.blue-thema.step2 ul li:nth-child(2) p:after,
.step-state.blue-thema.step2-ing ul li:nth-child(2) p:after, 
.step-state.blue-thema.step3 ul li:nth-child(3) p:after, 
.step-state.blue-thema.step3-ing ul li:nth-child(3) p:after, 
.step-state.blue-thema.step4 ul li:nth-child(4) p:after, 
.step-state.blue-thema.step4-ing ul li:nth-child(4) p:after, 
.step-state.blue-thema.step5 ul li:nth-child(5) p:after, 
.step-state.blue-thema.step5-ing ul li:nth-child(5) p:after, 
.step-state.blue-thema.step6 ul li:nth-child(6) p:after,
.step-state.blue-thema.step6-ing ul li:nth-child(6) p:after,  
.step-state.blue-thema.step7 ul li:nth-child(7) p:after,
.step-state.blue-thema.step7-ing ul li:nth-child(7) p:after, 
.step-state.blue-thema.step8 ul li:nth-child(8) p:after,
.step-state.blue-thema.step8-ing ul li:nth-child(8) p:after{
  border-left: 14px solid #1c3da8;
}
.step-state.green-thema.step1-ing ul li:nth-child(1) p:after,
.step-state.green-thema.step2 ul li:nth-child(2) p:after,
.step-state.green-thema.step2-ing ul li:nth-child(2) p:after, 
.step-state.green-thema.step3 ul li:nth-child(3) p:after, 
.step-state.green-thema.step3-ing ul li:nth-child(3) p:after, 
.step-state.green-thema.step4 ul li:nth-child(4) p:after, 
.step-state.green-thema.step4-ing ul li:nth-child(4) p:after, 
.step-state.green-thema.step5 ul li:nth-child(5) p:after, 
.step-state.green-thema.step5-ing ul li:nth-child(5) p:after, 
.step-state.green-thema.step6 ul li:nth-child(6) p:after,
.step-state.green-thema.step6-ing ul li:nth-child(6) p:after,  
.step-state.green-thema.step7 ul li:nth-child(7) p:after,
.step-state.green-thema.step7-ing ul li:nth-child(7) p:after, 
.step-state.green-thema.step8 ul li:nth-child(8) p:after,
.step-state.green-thema.step8-ing ul li:nth-child(8) p:after{
  border-left: 14px solid #0a6c3b;
}
.step-state.yellow-thema.step1-ing ul li:nth-child(1) p:after,
.step-state.yellow-thema.step2 ul li:nth-child(2) p:after,
.step-state.yellow-thema.step2-ing ul li:nth-child(2) p:after, 
.step-state.yellow-thema.step3 ul li:nth-child(3) p:after, 
.step-state.yellow-thema.step3-ing ul li:nth-child(3) p:after, 
.step-state.yellow-thema.step4 ul li:nth-child(4) p:after, 
.step-state.yellow-thema.step4-ing ul li:nth-child(4) p:after, 
.step-state.yellow-thema.step5 ul li:nth-child(5) p:after, 
.step-state.yellow-thema.step5-ing ul li:nth-child(5) p:after, 
.step-state.yellow-thema.step6 ul li:nth-child(6) p:after,
.step-state.yellow-thema.step6-ing ul li:nth-child(6) p:after,  
.step-state.yellow-thema.step7 ul li:nth-child(7) p:after,
.step-state.yellow-thema.step7-ing ul li:nth-child(7) p:after, 
.step-state.yellow-thema.step8 ul li:nth-child(8) p:after,
.step-state.yellow-thema.step8-ing ul li:nth-child(8) p:after{
  border-left: 14px solid #ffa500;
}
.step-state.purple-thema.step1-ing ul li:nth-child(1) p:after,
.step-state.purple-thema.step2 ul li:nth-child(2) p:after,
.step-state.purple-thema.step2-ing ul li:nth-child(2) p:after, 
.step-state.purple-thema.step3 ul li:nth-child(3) p:after, 
.step-state.purple-thema.step3-ing ul li:nth-child(3) p:after, 
.step-state.purple-thema.step4 ul li:nth-child(4) p:after, 
.step-state.purple-thema.step4-ing ul li:nth-child(4) p:after, 
.step-state.purple-thema.step5 ul li:nth-child(5) p:after, 
.step-state.purple-thema.step5-ing ul li:nth-child(5) p:after, 
.step-state.purple-thema.step6 ul li:nth-child(6) p:after,
.step-state.purple-thema.step6-ing ul li:nth-child(6) p:after,  
.step-state.purple-thema.step7 ul li:nth-child(7) p:after,
.step-state.purple-thema.step7-ing ul li:nth-child(7) p:after, 
.step-state.purple-thema.step8 ul li:nth-child(8) p:after,
.step-state.purple-thema.step8-ing ul li:nth-child(8) p:after{
  border-left: 14px solid #520089;
}


	
/* 스케줄 시각화 swiper */
    .swiper-container-sch{
      width: 100%;
      height: auto;
      
     position:relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      overflow: hidden;
    }

   .swiper-container-sch  .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;

    }
    
	
	  .swiper-container-sch .swiper-container-vertical>.swiper-pagination-bullets{
    	top: unset !important;
    	bottom: 10px;
    	left: 0;
    	width: 100%;
	}
	
	  .swiper-container-sch .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{
  		display : inline-block !important;
  		margin: 6px 2px !important;
	}

   .swiper-container-sch .swiper-button-next {
  background: url(../images/next_b.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
  right: 0;
}

  .swiper-container-sch .swiper-button-prev {
  background: url(../images/prev_b.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
  left: 0;
}

  .swiper-container-sch .swiper-button-next::after,
  .swiper-container-sch .swiper-button-prev::after {
  display: none;
}

   .swiper-container-sch .swiper-button-next, .swiper-button-prev{
	width:  40px;
}
.mob_main_title{display: none;}
 .step-state ul li:first-child{
	display: inline-block;
}
/* 장애인원서접수칸만 넒게 유지*/
#mainSchChart2 > div.step-state.sihum27 > ul > li:nth-child(2){
	flex: 0 0 49.8% !important;
}

/* 원서접수 sms  */
.smsCd{
	font-size: 14px;
	border-radius: 5px;
	background: linear-gradient(to top, #f4f6f8, #fdfeff);
	box-shadow:1px 1px 0px rgb(0 0 0 / 20%);
	border:1px solid #d4e8ef; 
}
.rcpt > p{cursor: pointer;}
.notification {
	animation-name : fadeOut;
	animation-duration: 0.3s;
	animation-delay:1s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

/* 내년도원서접수 */
.regWonseoSms{
	width: 300px;
	border: 1px solid #ddd;
	position:absolute;
	right: 60px;
	padding: 10px 0;
	font-size: 15px;
	text-align: center;
	color: #0000ff;
	font-weight: 600;
	background:linear-gradient(to top, #f4f6f8, #fdfeff);
	cursor:pointer;
	line-height: 20px;
}

/* sms알림애니메이션 */
@keyframes fadeOut {
	0%{
		transform: rotate(10deg);
		opacity: 1;
	}50%{
		opacity: 0.8;
	}
	100%{
		transform: rotate(-10deg);
		opacity: 1;
	}
}

@media screen and (max-width:1200px){
	 .swiper-container-sch{
	 	padding: 0 10px;
	 }
	.step-state ul li{
		font-size: 12px;
	}
	.step-state ul li:first-child{
		width: 110px;
	}
	.step-state ul li span{
		font-size: 12px;
	}
	.step-state ul li p{
		margin: 0 2px;
	}
	
  .swiper-container-sch .swiper-button-next, .swiper-button-prev{
	width:  20px;
	}
	#mainSchChart2 > div.step-state.sihum27 > ul > li:nth-child(2){
	flex: 0 0 50.8% !important;
}

}
@media screen and (max-width:1000px){
	 .swiper-container-sch{
	 	padding: 0 5px;
	 }
	 .mob_main_title{
	 	display: block;
	 	background: #b10132;
	 	color: #fff;
	 	font-weight: 600;
	 	padding: 5px 0;
	 	border-radius: 10px 10px 0 0;
	 	font-size: 14px;
	 }
	 .blue-thema .mob_main_title{
	 	background: #1c3da8;
	 }
	  .green-thema .mob_main_title{
	 	background: #0a6c3b;
	 }
 	  .yellow-thema .mob_main_title{
	 	background: #ffa500;
	 }
	  .purple-thema .mob_main_title{
	 	background: #520089;
	 }
	 
	 .step-state ul li:first-child{
		display: none;
		}
		.step-state ul li p{
			margin: 0 0px;
		}
		.tabs-tit {
		padding: 0 0px;
		}
		#mainSchChart2 > div.step-state.sihum27 > ul > li:nth-child(2){
			flex: 0 0 57.4% !important;
		}
		.smsCd{
			font-size: 12px;
		}
		.smsCd > div {
			display: block !important;
		}
		.smsCd  .txt_al_l{
			text-align: center !important; 
		}
		.regWonseoSms{
			right: 0;
			padding: 10px 5px;
			width: 33.4%;
			font-size: 12px;
			line-height: 22px;
		}
		.regWonseoSms .notification{
			display: none;
		}
		.tabs-tit > li > a{font-size: 12px;}
}		
@media screen and (max-width:800px){
	.step-state ul li span:last-child{
		font-size: 10px;
		word-break: keep-all;
	}
	.swiper-container-sch{
	padding: 0 0px;}
	
	.swiper-button-next, .swiper-button-prev{
		top: 45%;
	}
}