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


/* ******************** login ******************** */ 

.login {
  .find-wrap {
    margin-top:20px; text-align: center;
    ul li {
      display:inline-block; margin-right:25px; cursor:pointer; transition: opacity .25s ease; font-size:1.4rem; position:relative; color:#838383;
      &:hover {
        opacity:0.6;
      }
      &:after {
        content:''; position:absolute; right: -15px; top:50%; width:1px; height:calc(100% - 5px); transform: translateY(-50%); background:#c2c2c2;
      }
      &:last-child:after {
        content:none;
      }
    }
  }
}


@media(max-width:768px) {
  .login {
    .find-wrap {
      ul li {
        margin-right:15px; font-size:1.3rem;
        &:after {
          right: -10px;
        }
      }
    }
  }  
}

@media(max-width:500px) {
  .sso-wrap {
    position:relative;
    .wrap {
      position:absolute; top:40%; left:50%; transform: translate(-50%,-50%); width:100%
    }
  }
  .sso {
    .row {
      margin-bottom:10px;
      input[type=text],
      input[type=password] {
        height:42px; font-size:1.2rem
      }
      .material-icons {
        top:9px
      }
    }
  }

  .login {
    .find-wrap {
      ul li {
        font-size:1.2rem;
      }
    }
    .btn-wrap {
      button {
        height:40px; line-height:38px; font-size:1.2rem;
        img {
          height:15px; width:auto;
        }
      }
    }
  }
}

/* ******************** 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;
              }              
            }
          }
        }        
        p {
          color:#8a8a8a; margin-top:10px; font-weight:500; font-size:1.3rem;
        }
      }
    }
  }
}

// step02

.sso-wrap {
  .sso-box {
    .join {
      .join-box {
        padding-bottom:60px;
        .com-info {
          input[type=text] {
            &.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
            }
          }
        }
      }
      .vertic-table {
        table {
          tr {
            &:hover {
              background-color:transparent;
            }
            td {
              .com-num {
                input.text-input {
                  display:inline-block;
                  &:first-child {
                    width:100px; margin-right:15px
                  }
                  &:nth-child(2) {
                    width:100px; margin-right:15px
                  }
                  &:last-child {
                    width:calc(100% - 237px)
                  }
                }
              }
            }
          }
        }
      }
    }
    .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;
                    &:first-child {
                      width:77px; margin-right:10px
                    }
                    &:nth-child(2) {
                      width:calc(100% - 90px); margin-right:0
                    }
                    &:last-child {
                      width:100%; margin-top:10px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

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

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