@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;
          }
        }
      }
      .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
      }
    }
  }
}


@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;
                      }
                    }
                  }
                }
              }
            }  
          }
        }
      }
    }
  }
}

// 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:500px) {
  .sso-wrap {
    .sso-box {
      .join {
        .success-box {            
            .material-icons {
              font-size:35px;
            }    
            p {
              font-size:1.4rem; line-height:22px;
            }  
            br {display: none;} 
          }
        }
      }
  }
}