/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/
/*
** 로고영역 플로우/모닝메이트 서비스별 노출 코드 - 로그인
*/
.logo-display-wrap img {
  display: none;
  width: 100%;
}
[data-product="flow"] .logo-display-wrap .logo-flow,
[data-product="MORNINGMATE"] .logo-display-wrap .logo-morning {
  display: block;
}
/* 로고 위치 조정 - 로그인 */
.f-login-wrap .logo-display-wrap {
  width: 180px;
  margin: 150px auto 0;
}
.flk-msg-wrap .logo-display-wrap img:first-child {
  height: auto;
}
.upgrade-singup-header .logo-display-wrap {
  display: block;
  width: 128px;
}
.login-logo {
  /*background: url("/flow-renewal/assets/images/flow-logo.svg") no-repeat;*/
  background-size: contain;
  width: 140px;
  height: auto;
  margin: 70px auto 0;
  cursor: pointer;
}
.login-wrap {
  max-width: 586px;
  margin: 0 auto;
  /*padding-top: 78px;*/
  text-align: center;
}
.company-select-list {
  position: relative;
  width: 100%;
  height: 52px;
  padding: 16px 20px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.mini-mode-wrap .company-select-list {
  height: 45px;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 14px;
}
.company-select-list .arrow-dwn {
  position: absolute;
  top: 50%;
  left: unset;
  right: 18px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: url("/flow-renewal/assets/images/icons/icon-arrow-black.svg") no-repeat center / contain;
  animation: none;
}
.company-select-list .dropdown-menu {
  display: none;
  top: 0;
  left: -1px;
  width: calc(100% + 2px);
  max-height: 464px;
  /*overflow: scroll;*/
  z-index: 2;
}
.mini-mode-wrap .company-select-list .dropdown-menu {
  max-height: 300px;
}
.company-select-list .dropdown-menu.on {
  display: block;
}
.company-select-list .dropdown-menu li {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.mini-mode-wrap .company-select-list .dropdown-menu li {
  font-size: 14px;
  line-height: 20px;
}
.company-select-list .dropdown-menu li + li {
  margin-top: 6px;
}
.login-txt {
  margin: 40px 0 20px 0;
  line-height: 26px;
  text-align: center;
  font-size: 15px;
}
.login-txt strong {
  display: block;
  font-size: 16px;
}
.login-text {
  display: block;
  font-size: 36px;
  color: #333;
  font-weight: bold;
  margin: 0 auto 30px;
  text-align: center;
}
.mjs-login-section .login-find-section{
  text-align: center;
}
.mjs-login-section .login-text p{
  margin-top: 24px;
  font-size: 16px;
  font-weight: normal;
}
.login-descripton {
  margin-bottom: 78px;
  font-weight: 500;
  font-size: 18px;
  color: #333;
}
.login-id-input {
  position: relative;
  margin-bottom: 12px;
}
.login-id-input input {
  width: 100%;
  height: 52px;
  background: #fff;
  border: 1px solid #ddd;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 8px;
  padding-left: 20px;
  font-size: 16px;
}
.login-password-input input {
  width: 100%;
  height: 52px;
  background: #fff;
  border: 1px solid #ddd;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 8px;
  padding-left: 20px;
  font-size: 16px;
}

.login-id-input input::-webkit-input-placeholder, .login-password-input input::-webkit-input-placeholder{
  color: #999;
}
.login-id-input input::-moz-placeholder, .login-password-input input::-moz-placeholder{
  color: #999;
}
.login-id-input input:-ms-input-placeholder, .login-password-input input:-ms-input-placeholder{
  color: #999;
}
.login-id-input input::-ms-input-placeholder, .login-password-input input::-ms-input-placeholder{
  color: #999;
}
.login-id-input input::placeholder,
.login-password-input input::placeholder{
  color: #999;
}
.password-view-button {
  position: absolute;
  z-index: 10;
  top: 20px;
  right: 20px;
  display: block;
  width: 19px;
  height: 13px;
  cursor: pointer;
  background: url(/flow-renewal/assets/images/icons/icon_eye_off.png) no-repeat;
}
@media all and (min-width: 1025px) {
  .password-view-button:hover {
    background: url(/flow-renewal/assets/images/icons/icon_eye_on.png) no-repeat;
  }
}
.password-view-button.on {
  background: url(/flow-renewal/assets/images/icons/icon_eye_on.png) no-repeat;
}
.login-button {
  display: block;
  color: #fff;
  text-align: center;
  background: #623AD6 ;
  line-height: 52px;
  height: 52px;
  width: 100%;
  border-radius: 8px;
  margin-top: 20px;
  font-weight: 500;
  font-size: 16px;
}
.login-button:hover,
.login-button:focus {
  background: #514474 ;
}
.login-bmw{
  display: block;
  width: 100%;
  height: 52px;
  background: #ffffff;
  border: 1px solid #777;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 8px;
  line-height: 52px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.login-bmw:hover,
.login-bmw:focus {
  border-color: #623AD6;
  color: #623AD6;
}
.login-google,
.login-sso{
  display: block;
  width: 100%;
  height: 52px;
  background: #ffffff;
  border: 1px solid #777;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 8px;
  line-height: 52px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.login-google:hover,
.login-google:focus,
.login-sso:hover,
.login-sso:focus{
  border-color: #623AD6;
  color: #623AD6;
}
.login-sso{
  margin-top: 10px;
}
.login-kakao {
  display: block;
  width: 100%;
  height: 52px;
  background: #ffffff;
  border: 1px solid #777;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 8px;
  line-height: 52px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-top: 12px;
}
.login-kakao:hover,
.login-kakao:focus {
  border-color: #623AD6;
  color: #623AD6;
}
.login-apple {
  display: block;
  width: 100%;
  height: 52px;
  background: #ffffff;
  border: 1px solid #777;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 8px;
  line-height: 52px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-top: 12px;
}
.login-apple:hover,
.login-apple:focus {
  border-color: #623AD6;
  color: #623AD6;
}
.login-google em {
  display: inline-block;
  background: url("/flow-renewal/assets/images/login-sprite.png") no-repeat -402px -153px;
  background-size: 660px auto;
  width: 23px;
  height: 22px;
  position: relative;
  top: 5px;
  margin-right: 9px;
}
.login-kakao em {
  display: inline-block;
  background: url("/flow-renewal/assets/images/login-sprite.png") no-repeat -426px -153px;
  background-size: 660px auto;
  width: 23px;
  height: 22px;
  position: relative;
  top: 5px;
  margin-right: 9px;
}
.login-apple em {
  display: inline-block;
  background: url("/flow-renewal/assets/images/login-sprite.png") no-repeat -451px -153px;
  background-size: 660px auto;
  width: 22px;
  height: 22px;
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.login-find-section {
  margin: 20px 0 0 0;
  text-align: left;
}
.login-find-section a:hover span,
.login-find-section a:focus span {
  color: #6449fc;
}
.login-find-section span {
  color: #333;
  font-size: 14px;
}
.login-find-section + .error-text{
  margin: 20px 0 0 0;
}
.auto-login-label {
  display: block;
  margin-top: 20px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  text-align: left;
}
.auto-login-label:hover{
  color: #623AD6;
}
.auto-login-label a {
  display: inline-block;
  position: relative;
  background: url("/flow-renewal/assets/images/login-sprite.png") no-repeat -336px -153px;
  background-size: 660px auto;
  width: 21px;
  height: 20px;
  margin:-1px 6px 0 0;
  vertical-align: top;
}
.auto-login-label:hover a,
.auto-login-label:focus a {
  background-position: -358px -153px;
}
.login-password-input {
  position: relative;
}

input.input-error,
.join-input-wrap input.login-error,
.join-input-wrap input.input-error,
.join-input-wrap input.input-error:focus,
.login-id-input input.input-error:focus,
.login-password-input input.input-error:focus {
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
}


select.select-error,
select.select-error:focus {
  border: 1px solid #ff6b6b;
}


.auto-login-label.auto-login-active a {
  background-position: -380px -153px;
}
.auto-login-label.auto-login-active a:hover,
.auto-login-label.auto-login-active a:focus {
  background-position: -380px -153px;
}
.password-button {
  display: block;
  width: 100%;
  height: 52px;
  line-height: 52px;
  text-align: center;
  color: #fff;
  background: #623ad6;
  border-radius: 8px;
}
.password-button:hover,
.password-button:focus {
  background: #623ad6;
}
.password-red {
  color: #514474;
}
.password-alert-button-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.password-alert-button {
  display: table;
  width: 100%;
  height: 100%;
}
.password-alert {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.password-round-alert {
  background: #623ad6;
  text-align: center;
  color: #fff;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 600px;
  position: absolute;
  top: 24px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.password-alert-text {
  min-height: 20px;
  margin: 10px 0;
  font-size: 14px;
  color: #ff6b6b;
  text-align: left;
}
.password-detect {
  position: relative;
}
.password-detect input {
  width: 100%;
  height: 52px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 20px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
}
.password-detect input::placeholder{
  color: #999;
}
.password-detect input::-ms-input-placeholder{
  color: #999;
}
.password-detect input:focus{
  color: #333;
  background: #ffffff;
  border: 1px solid #989898;
  -webkit-box-shadow: 2px 2px 6px rgb(0 0 0 / 15%);
  box-shadow: 2px 2px 6px rgb(0 0 0 / 15%);
}
.password-detect + .password-detect {
  margin-top: 10px;
}
.password-detect .input-error {
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
}
.password-detect-section {
  display: block;
  text-align: center;
  margin-top: 40px;
  color: #555;
}
.password-detect-section a:hover,
.password-detect-section a:focus {
  color: #6449fc;
}
.password-text {
  padding: 6px 0;
  text-align: center;
  font-weight: bold;
  font-size: 36px;
  color: #333;
}
.password-sub-text {
  margin: 15px 0 77px;
  text-align: center;
  font-weight: 500;
  font-size: 18px;
  color: #333;
  height: 26px;
  line-height: 26px;
}

.final-step{
  max-width: 668px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.final-step .join-text-regular{
  line-height: 24px;
}

.final-step .join-basic-wrap{
  width: inherit;
  max-width: inherit;
}

.final-step .join-basic-wrap .url-wrap{
  display: flex;
  width: inherit;
  max-width: inherit;
}

.final-step .join-basic-wrap .url-wrap .url-input{
  padding: 0 10px;
  width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.final-step .join-basic-wrap .url-wrap .url-button{
  width: 30%;
  margin-left: 10px;
}

.final-step .join-basic-wrap .join-start-button{
  width: 100%;
}

.final-step .join-basic-wrap .basic-text-wrap .basic-text{
  width: 100%;
}

.flow-account {
  padding: 6px 0 16px;
  font-size: 36px;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}

.join-progress {
  width: 560px;
  height: 55px;
  margin: 70px 50px auto;
  color: #999;
}
.join-progress ul li {
  height: 55px;
  display: inline-block;
  position: relative;
}

.join-progress li p {
  position: absolute;
  bottom: 0;
  left: -30px;
  font-weight: bold;
}
.join-progress li.ing p,
.join-progress li.done p {
  color: #6449fc;
}
.join-progress ul li:before {
  width: 238px;
  height: 2px;
  content: "";
  display: block;
  background: #999;
  position: relative;
  top: 11px;
}
.join-progress ul li.done::before {
  background: #6449fc;
}
.join-progress em {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  left: -5px;
  background: #999;
  border-radius: 50%;
  border: 0;
}
.join-progress em:before {
  width: 6px;
  height: 6px;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
}
.join-progress li.done em {
  background: #6449fc;
}
.join-progress li.ing em {
  background: #fff;
  border: 2px solid #6449fc;
}
.join-progress li.ing em:before {
  background: #6449fc;
}
.join-progress li:last-child {
  width: 60px;
}
.join-progress li:last-child::before {
  display: none;
}
.join-margin-70 {
  margin-top: 60px;
}
.join-text-bold {
  margin: 0 auto;
  padding: 0 20px;
  font-weight: 500;
  font-size: 18px;
  color: #333;
  text-align: center;
  line-height: 27px;
}
.join-text-regular {
  margin-top: 8px;
  text-align: center;
  color: #333;
  font-size: 16px;
}
.join-text-purple {
  text-align: center;
  color: #6449fc;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 50px;
}
.join-text-title {
  font-size: 20px;
  color: #333;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: left;
}
.join-label-title {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 0;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  text-align: left;
}

.join-name-input{
  width: 100%;
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 20px;
}
.join-email-input {
  width: 586px;
  height: 52px;
  border: 1px solid #ddd;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 20px;
}
.join-password-input {
  width: 586px;
  height: 52px;
  border: 1px solid #ddd;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 20px;
}
.join-select-input {
  width: 586px;
  height: 52px;
  border: 1px solid #ddd;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 20px;
}
.join-name-re {
  width: 586px;
  height: 52px;
  border: 1px solid #ddd;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 20px;
}
.join-button-2 {
  display: inline-block;
  width: 586px;
  height: 52px;
  border-radius: 8px;
  background: #623ad6;
  text-align: center;
  font-weight: bold;
  color: #fff;
  line-height: 52px;
  font-weight: 500;
  font-size: 16px;
}
.join-button-2:hover,
.join-button-2:focus {
  background: #514474;
}
.join-start {
  display: inline-block;
  padding: 16px 27px;
  font-weight: 500;
  margin: 0 auto;
  text-align: center;
  border-radius: 100px;
  border: 1px solid #623ad6;
  color: #623ad6;
  margin-top: 20px;
  font-size: 16px;
}
.join-start:hover,
.join-start:focus {
  background: #623ad6;
  color: #fff;
}
.join-text-invite {
  color: #333;
  font-size: 16px;
  text-align: center;
}
.join-input-wrap {
  width: 586px;
  margin: 80px auto 0 auto;
  text-align: center;
}

.join-input-wrap .company-url{
  display: flex;
  align-items: center;
}

.sub-dom-logo {
  max-width: 350px;
  /*padding-bottom: 50px;*/
}
.join-input-wrap  label {
  display: block;
  text-align: left;
}
.join-input-wrap label + label {
  margin-top: 20px;
}
.join-input-wrap input {
  color: #333;
  font-size: 16px;
}
.join-input-wrap input[type="checkbox"]{
  display: none;
}
.join-input-wrap input::placeholder{
  color: #999;
}
.join-input-wrap input:-ms-input-placeholder{
  color: #999;
}
.join-input-box {
  position: relative;
}
.join-basic-wrap {
  width: 586px;
  margin: 0 auto;
}
.join-input-wrap input:focus,
.login-id-input input:focus,
.login-password-input input:focus {
  color: #333;
  background: #ffffff;
  border: 1px solid #989898;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
}
.join-check {
  margin: 20px 0;
  font-size: 14px;
  text-align: left;
  color: #333;
  letter-spacing: -0.02em;
  line-height: 20px;
}
.join-check .checked,
.join-check .checked:hover,
.join-check .checked:focus{
  background-image: url('/flow-renewal/assets/images/icons/icon_checkbox_on.png');
}

.join-check a,
.join-check .fc-pp{
  color: #623ad6;
  font-weight: 500;
  cursor: pointer;
  font-size: 14px;
}

.join-check > .fc-pp {
  cursor: alias;
}

.join-check .confirm-check-require {
  color: red;
  font-size: 14px;
  font-weight: 500;
}
.join-check .confirm-check-option {
  color: red;
  font-size: 14px;
  font-weight: 500;
}
.accont-wrap .join-check > .confirm-check-option{
  color: #333;
}
.join-check i, .join-check label {
  display: inline-block;
  background-image: url('/flow-renewal/assets/images/icons/icon_checkbox.png');
  background-size: 16px;
  width: 16px;
  height: 16px;
  margin: 5px 7px 0 0;
  vertical-align: top;
  cursor: pointer;
}
.join-check label:hover,
.join-check i:hover,
.join-check label:focus,
.join-check i:focus
{
  background-image: url('/flow-renewal/assets/images/icons/icon_checkbox_hover.png');
}
.join-check  a:focus {
  border: 2px solid #623ad6;
}
.join-check .join-check-p{
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-bottom: 20px;
  padding-left: 26px;
}
.join-check label.check-pd{
  position: absolute;
  left: 0;
}
.confirm-input{
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.confirm-input:focus + .js-confirm-check{
  background-image: url('/flow-renewal/assets/images/icons/icon_checkbox_hover.png');
}
.confirm-input:checked + .js-confirm-check{
  background-image: url('/flow-renewal/assets/images/icons/icon_checkbox_on.png');
}
.upgrade-singup-header .login-close-button {
  float: right;
  margin-top: 4px;
}
.upgrade-singup-header .logo {
  float: left;
}
.login-close-button {
  display: block;
  width: 21px;
  height: 21px;
  background: url("/flow-renewal/assets/images/icons/icon_close_black.png") no-repeat;
}

.alert {
  border-color: #ff6b6b;
  background: #fef6f6;
  color: #ff6b6b;
}
.password-plus {
  background: url("/flow-renewal/assets/images/login-sprite.png") no-repeat 0 0;
  background-size: 660px auto;
  width: 258px;
  height: 43px;
  color: #555;
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  position: absolute;
  left: 100px;
  top: 0;
}
.margin-top-50 {
  margin-top: 50px;
}
.join-url-input {
  width: 100%;
  height: 52px;
  border: 1px solid #ddd;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 20px;
  border-radius: 8px;
  margin: 0 10px;
}
.join-select {
  position: relative;
}
.join-select + input {
  margin-top: 10px;
}
.join-select-icon {
  width: 13px;
  height: 8px;
  position: absolute;
  top: 28px;
  right: 20px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background: url(/flow-renewal/assets/images/section-ar-1.png) 95% 50% no-repeat;
}
.join-select select {
  width: 100%;
  height: 52px;
  padding-left: 20px;
  font-size: 16px;
  background: #ffffff;
  border: 1px solid #dddddd;
  color: #333;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 8px;
}
.join-button-prev {
  flex: 1;
  display: inline-block;
  height: 52px;
  line-height: 50px;
  border: 1px solid #623AD6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 6px;
  color: #623AD6;
  text-align: center;
  font-weight: bold;
}
.join-button-prev:hover,
.join-button-prev:focus {
  background: #623AD6;
  color: #fff;
}
.join-button-next {
  flex: 1;
  display: inline-block;
  height: 52px;
  line-height: 50px;
  color: #fff;
  background: #514474;
  border-radius: 6px;
  text-align: center;
  margin-left: 10px;
}
.join-button-next:hover,
.join-button-next:focus {
  background: #477dd7;
}
.join-button-wrap {
  margin-top: 60px;
  display: flex;
}

.join-backgroundimage {
  background: url("/flow-renewal/assets/images/none_member.png") no-repeat;
  width: 157px;
  height: 141px;
  margin: 80px auto 60px;
}

.join-start-button {
  width: 586px;
  height: 52px;
  line-height: 52px;
  color: #fff;
  text-align: center;
  display: block;
  background: #623ad6;
  border-radius: 8px;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 500;
}
.join-start-button:hover{
  background: #514474 ;
}
.join-company-url{
  margin-top: 20px;
  color: #623AD6;
  font-size: 14px;
  line-height: 21px;
}
.team-step-txt{
  margin-top: 40px;
  color: #333;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}
.team-step-txt p:last-of-type{
  color: #FF6B6B;
}
.basic-text {
  width: 586px;
  text-align: center;
  color: #333;
}
.basic-text-red {
  text-align: center;
  color: #ff6b6b;
}
.basic-text-wrap {
  margin-top: 20px;
  line-height: 24px;
  font-size: 16px;
  letter-spacing: -0.02em
}
.url-wrap {
  width: 586px;
  margin: 40px auto 0;
  position: relative;
}
.url-button {
  margin-left: 4px;
  display: inline-block;
  width: 120px;
  height: 52px;
  color: #623ad6;
  line-height: 52px;
  background: #fff;
  border: 1px solid #C6BEEF;
  border-radius: 8px;
  text-align: center;
  vertical-align: top;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 500;
}
.url-button:hover,
.url-button:focus {
  background: #623ad6;
  color: #fff;
}

.url-input {
  display: inline-block;
  width: 456px;
  height: 52px;
  line-height: 52px;
  border: 1px solid #C6BEEF;
  border-radius: 8px;
  background: #f8f6ff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #623ad6;
}
.flow-app-button {
  width: 200px;
  height: 30px;
  display: block;
  color: #fff;
  margin: 0 auto;
  margin-top: 30px;
  line-height: 30px;
  background: #6449fc;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
}
.flow-app-logo {
  background: url("/flow-renewal/assets/images/login-sprite.png") no-repeat 0 -153px;
  background-size: 660px auto;
  width: 140px;
  height: 40px;
  margin: 0 auto;
  margin-top: 70px;
}
.top-banner-1 {
  width: 100%;
}
.flow-app-setbutton {
  margin: 0 auto;
  margin-top: 30px;
  background: #6449fc;
  border-radius: 4px;
  width: 200px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.login-password-find {
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  text-decoration: underline;
}
.upgrade-singup-header {
  overflow: hidden;
  height: 90px;
  padding: 30px 35px 30px 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.error-text {
  text-align: left;
  margin-top: 10px;
  color: #ff6b6b;
  font-size: 14px;
  line-height: 21px;
}
.join-check + .error-text {
  margin: 0 0 20px 0;
}
[data-product="MORNINGMATE"] .auth-section{
  padding-top: 200px;
}
.auth-section {
  padding-top: 100px;
  padding-bottom: 200px;
}
/*html:lang(ko) .auth-section{*/
/*  padding: 200px 0;*/
/*}*/
.auth-section .js-step-section select{
  appearance: none;
  outline: 0;
}
.auth-section .js-step-section select:focus{
  border: 1px solid #999;
  box-shadow: 2px 2px 6px rgb(0 0 0 / 15%);
}
.bmw-or {
  position: relative;
  margin: 40px 0;
  font-size: 14px;
  color: #333;
}
.bmw-or::before {
  display: inline-block;
  content: "";
  width: 100%;
  max-width: 248px;
  height: 1px;
  margin-right: 30px;
  background: #ddd;
  vertical-align: middle;
}
.bmw-or::after {
  display: inline-block;
  content: "";
  width: 100%;
  max-width: 248px;
  height: 1px;
  margin-left: 30px;
  background: #ddd;
  vertical-align: middle;
}
/*.guest-or {*/
/*  position: relative;*/
/*  margin: 40px 0;*/
/*  font-size: 14px;*/
/*  color: #333;*/
/*}*/
/*.guest-or::before {*/
/*  display: inline-block;*/
/*  content: "";*/
/*  width: 100%;*/
/*  max-width: 248px;*/
/*  height: 1px;*/
/*  margin-right: 30px;*/
/*  background: #ddd;*/
/*  vertical-align: middle;*/
/*}*/
/*.guest-or::after {*/
/*  display: inline-block;*/
/*  content: "";*/
/*  width: 100%;*/
/*  max-width: 248px;*/
/*  height: 1px;*/
/*  margin-left: 30px;*/
/*  background: #ddd;*/
/*  vertical-align: middle;*/
/*}*/
/*html:lang(ja) .guest-or::before,*/
/*html:lang(ja) .guest-or::after,*/
/*html:lang(vi) .guest-or::before,*/
/*html:lang(vi) .guest-or::after{*/
/*  max-width: 240px;*/
/*}*/
.join-button-2 + .join-text-invite,
.sns-login-area + .join-text-invite {
  margin-top: 40px;
}
.guest-singup-complete {
  margin-bottom: 40px;
  text-align: center;
  color: #333;
}
.guest-singup-complete em {
  font-weight: bold;
  font-size: 20px;
}
.guest-singup-complete p {
  margin-top: 12px;
  font-size: 16px;
}

.js-main-step .new-signup{
  width: 586px;
  margin: 0 auto;
}
.new-signup .new-company{
  position: relative;
  margin: 120px 0 30px 0;
  padding: 44px 170px 56px 30px;
  background: #FCFBFF;
  border: 1px solid #C6B6F6;
  border-radius: 20px;
  cursor: pointer;
}
.new-signup .new-company:hover{
  border-color: #623AD6;
}
.new-signup .new-company span{
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px 5px 10px;
  border: 1px solid #623AD6;
  border-radius: 20px;
  color: #623AD6;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
.new-signup .new-company b{
  display: block;
  margin-bottom: 8px;
  color: #623AD6;
  font-size: 22px;
  font-weight: 700;
  line-height: 36px;
}
.new-signup .new-company p{
  color: #999;
  font-size: 16px;
  line-height: 24px;
}
.new-signup .new-company:hover p,
.new-signup p.start-in:hover b,
.new-signup p.start-in:hover span{
  color: #623AD6;
}
.new-signup .new-company img{
  display: inline-block;
  width: 130px;
  position: absolute;
  right: 9px;
  bottom: 0;
}
.new-signup p.start-in{
  position: relative;
  margin-bottom: 10px;
  padding: 10px 20px 24px 20px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.new-signup p.start-in.guest{
  margin-bottom: 50px;
  padding: 14px 20px 20px 20px;
}
.new-signup p.start-in b{
  display: block;
  margin-bottom: 2px;
  color: #555;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.new-signup p.start-in span{
  display: block;
  color: #999;
  font-size: 14px;
  line-height: 21px;
}
.new-signup p.start-in i.right-arrow-icon{
  display: inline-block;
  width: 8px;
  height: 14px;
  position: absolute;
  top: 40px;
  right: 25px;
  background: url(/flow-renewal/assets/images/icons/right-arrow-icon.svg) no-repeat;
  background-size: contain;
}
.new-signup p.start-in:hover i.right-arrow-icon{
  background: url(/flow-renewal/assets/images/icons/right-arrow-icon-hover.svg) no-repeat;
  background-size: contain;
}
.new-signup p.start-q{
  display: block;
  color: #333;
  font-size: 16px;
  text-align: center;
  line-height: 24px;
}
.new-signup p.start-q button{
  margin-top: 20px;
  padding: 14px 28px;
  background: #fff;
  border: 1px solid #623AD6;
  border-radius: 30px;
  color: #623AD6;
  font-size: 16px;
  font-weight: 500;
}
.new-signup p.start-q button:hover{
  background: #623AD6;
  color: #fff;
}

.subdomain-refusal-text {
  color: #333;
}
.subdomain-refusal-text dt::before {
  display: block;
  content: "";
  width: 160px;
  height: 116px;
  margin: 0 auto 40px;
  background: url(/flow-renewal/assets/images/none_data.png);
}
.subdomain-refusal-text dt {
  font-weight: bold;
  font-size: 20px;
}
.subdomain-refusal-text dd {
  margin-top: 12px;
  font-size: 16px;
}

.auth-error-text {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #ff6b6b;
}
.mini-body .auth-error-text {
  font-size: 13px;
  color: #ff6b6b;
}
.resend-txt {
  float: right;
  color: #333;
}
.addon-auth-section{
  padding-top: 130px;
  padding-bottom: 130px;
}
.addon-terms{
  margin-top: 20px;
}
.addon-terms a{
  color: #623ad6;
  font-weight: 500;
  cursor: pointer;
  font-size: 14px;
}

.corpsign-button{
  display: block;
  margin-top: 20px;
  width: 100%;
  height: 52px;
  line-height: 52px;
  background: #fff;
  color: #623ad6;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid #623ad6;
}

@media all and (max-width: 719px) {
  /*여러 이슈로 삭제*/
  /*body {*/
  /*  overflow-y: auto !important;*/
  /*}*/
  .invite-login .upgrade-singup-header {
    padding: 30px;
  }
  .invite-login .auth-section {
    padding-top: 0;
  }
  .invite-login .login-id-input,
  .invite-login .login-password-input,
  .invite-login .auto-login-label {
    padding: 0 30px;
  }
  .login-wrap.js-link-home.invite-login .login-id-input,
  .login-wrap.js-link-home.invite-login .login-password-input,
  .login-wrap.js-link-home.invite-login .auto-login-label{
    padding: 0;
  }
  .login-wrap.js-link-home.invite-login .login-button{
    width: 100%;
    margin-top: 30px;
  }
  .invite-login .password-view-button {
    right: 50px;
  }
  .invite-login .login-button {
    width: calc(100% - 60px);
    margin: 0 auto;
  }
  .invite-login .login-company {
    margin-bottom: 30px;
  }
  .upgrade-singup-header {
    position: fixed;
    height: auto;
    width: 100%;
    padding: 16px 20px;
    background: #fff;
  }
  .auth-section {
    height: auto !important;
    padding-bottom: 20px;
  }
  .join-label-title {
    display: block;
  }
  .join-input-wrap {
    padding: 0 20px;
  }
  .join-input-wrap input,
  .join-button-2 {
    width: 100%;
  }
  .auth-section .password-view-button {
    right: 20px;
  }
  .auth-section .login-company {
    margin-bottom: 30px;
  }
  .join-input-wrap {
    width: 100%;
  }
  .login-wrap {
    padding: 0 20px;
  }
  .login-wrap.js-main-step.js-link-home{
    margin-top: -100px;
  }
  .bmw-or::before, .bmw-or::after {
    max-width: 36%;
  }
  .guest-or::before, .guest-or::after {
    max-width: 36%;
  }
  html:lang(ja) .guest-or::before, .guest-or::after{
    max-width: 33%;
  }
  .flow-login-popup{
    width: 95% !important;
    margin: 0 auto;
  }
}

@media all and (min-width: 720px) and (max-width: 1023px) {
  body {
    /*overflow-y: auto !important;  프로젝트 생성시 이중스크롤 문제로 삭제*/
  }
  .auth-section {
    /*padding-top: 0;*/
  }
  .join-input-wrap label + label {
    margin-top: 40px;
  }

  .join-email-input,
  .join-button-2 {
    height: 60px;
  }
  .bmw-or::before, .bmw-or::after {
    max-width: 40%;
  }
  .guest-or::before, .guest-or::after {
    max-width: 40%;
  }
}

section.event-banner-wrap{
  margin-top: 40px;
}

section.event-banner-wrap a img{
  width: 100%;
}

/* 홍섭 미래에셋 일렉트론 추가 */
#integratedAuthLogin {
  color: #623AD6;
  background: #fff;
  border: #623AD6 1px solid;
}


@media screen and (max-width: 768px) {
  .auth-section{
    padding: 40px 0 60px 0;
  }
  /*html:lang(ko) .auth-section{*/
  /*  padding: 140px 0 200px 0;*/
  /*}*/
  .js-main-step .new-signup{
    padding: 0 20px;
    width: 100%;
  }
  .join-input-wrap label + label {
    margin-top: 40px;
  }
  .new-signup .new-company{
    margin: 80px 0 30px 0;
    padding: 30px 30px 35px 30px;
  }
  .new-signup .new-company span{
    font-size: 14px;
  }
  .new-signup .new-company b{
    font-size: 22px;
  }
  .new-signup .new-company p{
    font-size: 18px;
  }
  .new-signup .new-company img{
    display: none;
  }
  .new-signup p.start-in b{
    font-size: 18px;
    font-weight: 700;
  }

  .join-basic-wrap{
    width: 100%;
  }
  .upgrade-singup-wrap .join-start-button{
    width: calc(100% - 20px);
    margin: 0 10px;
  }
  .new-signup p.start-in{
    padding: 10px 60px 24px 20px;
  }
  .new-signup p.start-in.guest{
    padding: 14px 60px 20px 20px
  }
}

@media screen and (min-height: 375px) {
  .auth-section.after-contents{
    min-height: auto;
  }
}
/* 1104px, 1440px, 1600px, 1800px 에서 -100px(북마크, 작업표시줄 등의 세로값 제외) */
@media screen and (min-height: 1004px) {
  .auth-section.after-contents{
    min-height: 930px;
  }
}
@media screen and (min-height: 1340px) {
  .auth-section.after-contents{
    min-height: 1050px;
  }
}
@media screen and (min-height: 1500px) {
  .auth-section.after-contents{
    min-height: 1200px;
  }
}
@media screen and (min-height: 1700px) {
  .auth-section.after-contents{
    min-height: 1400px;
  }
}