#progress_bar_wrap{overflow:hidden; margin-bottom:20px;}
#progress_bar_wrap:after{display:block;visibility:hidden;clear:both;content:""}
#progress_bar_wrap2:after{display:block;visibility:hidden;clear:both;content:""}
#progress_bar_wrap3:after{display:block;visibility:hidden;clear:both;content:""}

.progress_bar {position:relative; float:left; width:33.333%;}
.progress_bar span {display:inline-block; padding:15px 0; width:100%; text-align:center; color:#fff; background:#80b618; border:1px solid #80b618; font-size:1em; font-weight:bold}

@media (min-width:768px) {
    .progress_bar span {font-size:1.2em;}
}

.state_bar2 span, .state_bar3 span{color:#000; background:#f9f2f4; z-index:1; border:1px solid #ccc}
.state_bar2 span {border-right:0;}
.state_bar3 span {border-left:0;}

.state_bar1:after {border-color:transparent transparent transparent #80b618;}

.state_bar2:after {margin-top:-17px; margin-left:-20px; padding:16.5px; border:solid #ccc; border-width:0 1px 1px 0; transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); }
.state_bar2_on span{color:#fff; background:#2868b6; border:1px solid #2868b6}
.state_bar2_on:after {border-color:transparent transparent transparent #2868b6}

.state_bar3:after {border-color:transparent}

.state_bar3_on span{color:#fff; background:#bd4e00; border:1px solid #bd001a}
.state_bar3_on:after {border-color:transparent}

#fregister p{margin-bottom:0;}
#fregister_chkall{padding:15px 0; background:#f9f9f9; font-size:1.2em; text-align:center; border:1px solid #ecc7d2;}
#fregister_t1{padding:8px 0; background:#ecf7f2; font-size:1em; text-align:center; border:none; border-top:0;}
#fregister_t2{padding:8px 0; background:#ecf7f2; font-size:1em; text-align:left; border:1px solid #ecc7d2;}

#fregister_all{padding:15px 0; background:#f9f9f9; font-size:1.2em; text-align:left; border:none; border-top:0;}

p {
  /* 수평 중앙 정렬하기 */
  text-align: center;
}

.loginwrapper {
    justify-content: center; /* 자식 요소를 가로 가운데 정렬 */
    align-items: center; /* 자식 요소를 세로 가운데 정렬 */
    height: 100vh; /* '-webkit-fill-available'이 유효하지 않을 경우를 대비 */
    height: -webkit-fill-available;
}

.logincontent {
  padding: 3rem;
  font-size: 2rem;
  border-radius: 1rem;
}

.logintitleimg  {
  margin-top: 50px;
  width: 217px;
  height: 60px;
  margin-bottom: 52px;
}

.logintitletxt {
  width: 300px;
  height: 17px;
  margin: 51px;
  font-size: 18px;
  font-weight: 200;
  letter-spacing: 0.72px;
  text-align: center;
  color: #313131;
}
.logininputbox  {
  width: 300px;
  height: 50px;
  font-size: 15px;  
  letter-spacing: 0.6px;
  margin-top: 5px;
  text-align: left;
  color: #bfbfbf;
  border: solid 1px #e5e5e5;
  background-color: #fff;
}
.logincontinue {
  width: 300px;
  height: 25px;
  font-family: NanumSquareNeo-cBd;
  font-size: 11px;
  letter-spacing: 0.22px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
  color: #1a1a1a;
}
.loginbutton  {
  width: 300px;
  height: 55px; 
  font-size: 16px;
  letter-spacing: 3.84px;
  text-align: center;
  color: #fff;
  margin: 31px 1px 29px 0;
  padding: 19px 124px 20px;
  background-color: #1a1a1a;
}
.loginfind {
  width: 129px;
  height: 14px;
  margin: 29px 21px 58px 22px;
  font-family: NanumSquareNeo-cBd;
  font-size: 13px;
  letter-spacing: 0.52px;
  text-align: center;
  color: #1a1a1a;
}