/* ******************** input style ******************** */

input[type="text"], input[type=password] { 
  width: 100%; height: 40px; outline: 0; padding: 0 10px; font-size: 1.3rem; font-weight: 400; background:#fff; transition: border-color .25s ease, box-shadow .25s ease; border-radius: 4px; border:1px solid var(--line-color); color:#15284c;
}

.sso {
  .row {
    position:relative; margin-bottom: 15px;
    .material-icons {
      font-size:24px; position: absolute; top: 13px; left:15px; opacity:.3; 
    }    
    &:last-child {
      margin-bottom: 0;
    }
    input[type=text], input[type=password] {
      padding-left:50px;height: 48px; 
      &:focus, &:active, &:hover {
        border-color:#6286fe;
        box-shadow: 0 0 0 3px #e1e8ff;
      }
      &:last-child {
        margin-bottom:0;
      }
      &::placeholder {
        color:#c2c2c2
      }
    }
    &:hover{
      .material-icons {
        color:#aabeff; opacity:1
      }
    } 
  }
}

// 셀렉트 박스

.select-box {
  width: 100%; height:35px; position: relative; float: left;
  select {
    border:1px solid #e1e1e1; border-radius: 5px; width: 100%; height: 100%; padding: 0 10px; font-size: 1.3rem; background: url(../../img/common/select_arrow.svg) calc(100% - 10px); background-repeat: no-repeat; -webkit-background-size: 9px 5px; background-size: 9px 5px; padding-right: 20px; color: #4C4C4C;background-color: #fff;
    &:hover {
      border-color: #C2C2C2;
    }
  }
}

/* 핸드폰 인증 UI */

.contact-wrap {
  .select-box.contact {
    width: 100px; margin-right: 5px; margin-bottom:5px 
  }
  .select-box.email {
    width: 135px; margin-right: 5px; margin-bottom:5px; height: 35px;
  }
  .input-box.contact {
    float: left; margin-right:5px; 
    input[type="text"].text-input {
      width: 100px; height:35px;
    }
  }
  .input-box.email {
    float: left; margin-right:5px; 
    input[type="text"].text-input {
      width: 135px; height:35px;
    }
  }
  .input-box.authorize {
    float: left; margin-right: 5px; width:310px; 
  }
  .btn-wrap {
    float: left;
    button {
      height:35px; line-height:34px; font-size:1.2rem; width: 100px;
    }
  }
  .phone-wrap .phone-btn {
    float: left;
  }
  .unit { color: #888; float: left; line-height: 35px; font-size: 1.2rem; font-weight: 600; margin-right: 5px; }
}

@media (max-width: 850px) {
  .contact-wrap {
    .input-box.email {
      margin-right: 0; width: calc(50% - 10px); margin-bottom:10px;
      input[type="text"].text-input {
        width: 100%;
      }
    }
    .select-box.email {
      width: calc(100% - 105px);
    }
    .unit { width: 20px; text-align: center; margin-right: 0; }
  }
}

@media (max-width: 800px) {
  .contact-wrap {
    .input-box.authorize {
      width: calc(100% - 210px)
    }
    .input-box.contact {
      width: calc(50% - 121px)
    }
	  .input-box.contact input[type="text"].text-input {
      width: 100%
    }
  }	
}

@media (max-width: 768px) {	
	.contact-wrap {
    .select-box.contact {
      width:100%;
      select {
        font-size: 1.2rem
      }
    }
    .unit {
      display: none;
    }
    .input-box.contact {
      width: calc(50% - 3px); margin-bottom:10px;
      &.last-input {
        margin-right:0
      }
      input[type="text"].text-input {
        font-size: 1.2rem
      }
    }
    .input-box.authorize {
      width: 100%; margin-bottom: 10px;
    }
    .btn-wrap {
      top: 0; width: 100%;
      button {
        width: 100%; margin-bottom: 10px
      }
    }
    
  }
}

@media (max-width: 650px) {	
	.contact-wrap {
    .select-box.email {
      select {
        font-size: 1.2rem
      }
    }
    .input-box.email {
      &.last-input {
        margin-right:0
      }
      input[type="text"].text-input {
        font-size: 1.2rem
      }
    }
    .select-box.email {
      width: 100%;
    }
  }
}

@media(max-width:500px) {
  .contact-wrap {
    .select-box.contact {
       float:none; 
      select {
        font-size: 1.2rem
      }
    }
    .input-box.contact {
      float:none; width:100%;
    } 
  }
}