@charset "utf-8";

.body-container {
  height:100%;
}


.sso-wrap {
  background:#f1f6fb; width:100%; height:100%;
  .logo-wrap {
    margin-bottom:20px; width:1050px; margin:0 auto; padding:50px 20px 20px 0;
    img {
      width:315px; height:42px; 
    }
  }
  .sso-box {
    width:1050px; margin:0 auto; background:#fff;
    .sso {
      border:1px solid var(--line-color); 
      .left-box {
        float:left; width: calc(100% - 382px); height:100%; padding:40px;
      }
      .right-box {
        float:left; width:382px; height:100%;
        img {
          width:100%; height:auto; max-width:100%; max-height:100%   
        }
      }
    }    
  }
  &.step {
    .logo-wrap {text-align: center; margin:0 auto;}
  }
}

@media(max-width:1050px) {
  .sso-wrap {
    .logo-wrap {
      width:100%
    }
    .sso-box {
      width:100%; padding:0 20px; background: none;
      .sso { background: #fff; }
    }
  }
}

@media(max-width:1024px) {
  .sso-wrap {
    .logo-wrap {
      padding:30px 20px 20px 0; text-align: center;
      img {
        width:250px; height:auto;
      }
    }
    .sso-box {      
      .sso {
        height: auto;
        .right-box {
          display:none;
        }
        .left-box {
          width:100%; float:none;
        }
      }
    }
  }
}

@media(max-width:768px) {
  .sso-wrap {
    .logo-wrap {
      padding:30px 15px 15px 0;
    }
    .sso-box {
      padding:0 15px;
      .sso {
        .left-box {
          padding:30px;
        }
      }
    }
  }
}

@media(max-width:500px) {
  .sso-wrap {
    .sso-box {
      .sso {
        .left-box {
          padding:20px;
        }
      }      
    }
  }
}
  

.login {
  .btn-wrap {
    button {
      img {
        width:20px; height:18px; vertical-align: middle; margin-right:5px;
      }
    }
  }
}

.sns-login {
  margin-top:50px; 
  p {text-align: center; position:relative; font-size:1.3rem; color:#adadad; font-weight:500;
    &:after {
      content:''; position:absolute; top:50%; transform: translateY(-50%); width:100%; height:1px; border-bottom:1px dashed #aaa; left:0;
    }
    span {
      background:#fff; display:inline-block; padding: 0 10px; position:relative; z-index:1
    }
  }
  ul {
    margin-top:30px;
    li {
      margin-bottom:10px;
      &:last-child {
        margin-bottom:0;
      }
      .btn-wrap {
        button {
          font-size:1.2rem; height:40px; line-height:38px;
          img {
            width:20px; height:20px; vertical-align: middle; margin-right:3px; position:relative; top:-1px;
          }
        }
      }
    }
  }
}

.imp { background: #ff5b5e; margin-left: 5px; width: 4px; height: 4px; display: inline-block; border-radius: 10px; position: relative; top: -7px; }