@charset "utf-8";

/* ******************** import ******************** */

/* 폰트 */
@import "../../font/NanumSquareNeo.css";

/* root */
@import "../common/color.scss";

/* common */ 
@import "../common/common.scss";

/* mixin */ 
@import "../mixin/ui-mixin.scss";

/* input */ 
@import "../component/input-style.scss";

/* check */ 
@import "../component/check-style.scss";

/* popup */ 
@import "../component/pop-style.scss";

/* table */ 
@import "../component/vertical-table.scss";

/* button */ 
@import "../component/button-style.scss";


/* ******************** SSO common ******************** */ 
@import "./com-style";


/* ******************** join ******************** */ 

.login-info {
  p {
    text-align: center; padding-top:70px; color:#7a7a7a;
    a {
      color:inherit; text-decoration: underline; margin-left:7px
    }
  }
}

@media(max-width:768px) {
  .login-info {
    p {
      padding-top:30px; padding-bottom:20px;
    }
  }
}

// step01

.sso-wrap {
  &.step {
    background:#fff;
  }
  .sso-box {
    .join {
      .top-box {
        background:#f9f9f9; border:1px solid var(--line-color); padding:35px 45px; text-align: center; line-height:24px; font-size:1.4rem; margin-bottom:40px;
      }
      .term-box {
        background:#f9f9f9; border:1px solid var(--line-color); margin-bottom:70px;
        ul li {
          border-bottom: 1px solid var(--line-color); padding:20px;
          &:last-child {
            border-bottom:0;
          }
          input[type=checkbox] {             
            &:not(old) {
              & + label {
              font-weight:600;
              }              
            }
          }
          .more-btn {
            float:right; cursor:pointer; transition:color .25s ease; color:#999;
            .material-icons { 
              font-size:17px; font-weight:bold;
            }
            &:hover {
              color:#000;
            }
          }
        }        
        p {
          color:#8a8a8a; margin-top:10px; font-weight:500; font-size:1.3rem;
        }
      }
    }
  }
}

.popup-wrap.terms {
  .popup {
    height:600px; width:800px;
    .modal-text-area {
      @include scrollbar;
      .terms {
        white-space: pre-wrap; font-size:1.3rem; 
      }
    }
    .modal-foot-area {
      .btn-wrap {
        button {
          float:none;
        }
      }
    }
  }
}

// step02
.txt-invalid {display: none; }
.sso-wrap {
  .sso-box {
    .join {
      .join-box {
        padding-bottom:60px;
        .com-info {
          input[type=text], input[type=password] {
            &.join-id {
              width:calc(100% - 135px); float:left;
            }
            &.join-password {
              margin-bottom:15px
            }
          }
          .btn-wrap.id-btn {float:left; margin-left:15px;
            button {
              height:40px; line-height:38px; font-size:1.2rem; min-width:120px
            }
          }
          .check-input-box {
            margin-top:10px;
          }
          .company-wrap {
            input.join-id {
              width: calc(100% - 260px);
            }
            .btn-wrap {
              display: flex;
            }
          }
        }
        .account-info {
          display: flex;
          justify-content: space-between;
        }
        
        .caption-area {
          flex: 1;
          margin-left: 20px; 
          .caption {
            font-size: 13px; color: #ed6c5f; font-weight: 600;
          }
        }
        
      }
      .vertic-table {
        table {
          tr {
            &:hover {
              background-color:transparent;
            }
            td {
              .com-num {
                input.text-input {
                  display:inline-block; margin-right:5px; width:150px;
                  &:last-child {
                    margin-right:0;
                  }
                }
              }
              position:relative;
              .company-num-wrap {
                .com-num {
                  float:left; width:calc(100% - 135px);
                  input.text-input {
                    display:inline-block; margin-right:5px; width:calc(33.3% - 6px);
                    &:last-child {
                      margin-right:0;
                    }
                  }
                }
                .btn-wrap {
                  float: left; margin-left: 15px;
                  button {
                    height: 40px;line-height: 38px; font-size: 1.2rem;min-width: 120px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .btn-wrap {
      &.step-btn {
        margin-bottom:100px
      }
    }
  }
}


.file-input {
  display: inline-block; text-align: left; width:100%; position: relative; padding-left: 10px; font-size: 1.2rem; line-height: 40px; vertical-align: middle; background-color: #fff; cursor: pointer; border: 1px solid #e1e1e1; font-weight: 400; border-radius: 5px;

  > input[type='file'] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 301; cursor: pointer;
  }

  > .button {
    display: inline-block; padding: 0; font-size: 1.2rem; vertical-align: top; background-color: var(--main-color); cursor: pointer; border: 1px solid var(--main-color); border-radius: 5px; font-weight: 400; color: #fff; height: 40px; border-top-left-radius: 0; border-bottom-left-radius: 0; position: absolute; z-index: 2; top: 0; right: -1px; transition: all 0.3s ease; width: 120px; text-align: center; line-height: 40px;

    &:hover {
      background: #000; color: #fff; border-color: #000;
    }
  }

  > .label {
    color: #333; white-space: nowrap; opacity: 0.5; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-right: 120px; display: block;
  }
}

.file-row:not(:first-child) {
  margin: 5px 0 0;
}

/* 파일 추가 제거 버튼 */
.file-row .add-wrap {
  display: inline-block; margin-left: 10px; position: relative;

  button {
    border-style: none; background: transparent; width: 20px; height: 20px; margin-right: 3px;

    img {
      opacity: 0.4; cursor: pointer; width: 20px; height: 20px;

      &:hover {
        opacity: 0.5;
      }
    }
  }
}




@media(max-width:768px) {
  .sso-wrap {
    &.step {
      background:#fff;
    }
    .sso-box {
      .join {        
        .vertic-table {
          table {
            tr {
              &:hover {
                background-color:transparent;
              }
              td {
                .com-num {
                  input.text-input {
                    display:inline-block; width: calc(33.33% - 6px) !important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media(max-width:500px) {
  .sso-wrap {
    &.step {
      background:#fff;
    }
    .sso-box {
      .join {
        .join-box {
          .com-info {
            input[type=text] {
              &.join-id {
                width:100%; float:none;
              }
              &.join-password {
                margin-bottom:10px
              }
            }
            .btn-wrap.id-btn {float:none;width:100%; margin-left:0; margin-top:10px
            } 
            .vertic-table {
              table {
                tr {
                  td {
                    .company-num-wrap {
                      .com-num {
                        width:100%; float:none;
                      }
                      .btn-wrap {
                        float:none; width:100%; margin-left:0; margin-top:10px;
                      }
                    }
                  }
                }
              }
            }  
          }
        }
      }
    }
    .file-input {
      > .label {
        padding-right: 70px;
      }
      > .button {
        width: 70px;
      }
    }
  }
}

// step03

.sso-wrap {
  .sso-box {
    .join {
      .success-box {
          text-align: center; margin:50px 0; padding:50px 35px; background:#f1f6fb; border:1px solid var(--line-color);
          .material-icons {
            font-size:48px;display:block; padding-bottom:15px; color:#5d8fff
          }    
          p {
            font-size:1.5rem; line-height:25px; font-weight:600;
          }   
        }
      }
    }
}


@media(max-width:768px) {
  .sso-wrap {
    .sso-box {
      .join {
        .join-box {
          padding-bottom:60px;
          .com-info {
            .company-wrap {
              input.join-id {
                width: 100%; float: none;
              }
              .btn-wrap.id-btn { 
                float: none; width: 100%; margin-left: 0; margin-top: 10px;
                button {
                  min-width:auto
                }
                &.full {
                  float: left;
                  margin-left: 15px;
                }
              }
              .check-input-box {
                margin-top:10px;
              }
            }
          }
        }
      }
    }
  }
}


@media(max-width:500px) {
  .sso-wrap {
    .sso-box {
      .join {
        .join-box {
          .account-info {
            display: block; 
            .caption-area {
              margin: 0 0 10px; 
              .caption {
                font-size: 1.2rem; line-height: 1.6;
              }
            }
          }
        }
        .success-box {            
          .material-icons {
            font-size:35px;
          }    
          p {
            font-size:1.4rem; line-height:22px;
          }  
          br {display: none;} 
        }
        }
      }
  }
}