@charset "utf-8";

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

input[type="text"],
input[type="password"] { border:0; width: 100%; height: 100%; }

/* 인풋 텍스트 */
input[type="text"] {
  &.text-input {
    height:36px;  width: 100%; display: inline-block; font-size: 1.3rem; padding:0 10px; border: 1px solid var(--line-color); color: #000; border-radius: 3px; background:#fff; transition: box-shadow .3s ease;
    &:focus, &:active, &:hover {
      border-color:#6286fe;
      box-shadow: 0 0 0 3px #e1e8ff;
    }    
  }
  &.search-input {
    &:focus, &:active, &:hover {
      border-color:var(--line-color);
      box-shadow: none;
    }      
  }
}

input[type="password"] {
  &.text-input {
    height:36px;  width: 100%; display: inline-block; font-size: 1.3rem; padding:0 10px; border: 1px solid var(--line-color); color: #000; border-radius: 3px; background:#fff; transition: box-shadow .3s ease;
    &:focus, &:active, &:hover {
      border-color:#6286fe;
      box-shadow: 0 0 0 3px #e1e8ff;
    }
  }
}

/* textarea */
textarea {
  &.textarea {
    height:150px; width: 100%; display: inline-block; font-size: 1.3rem; padding:5px 10px; border: 1px solid var(--line-color); color: #000; border-radius: 3px; background:#fff; transition: box-shadow .3s ease; resize: none; transform: skew(0.2deg);
    &:focus, &:active, &:hover {
      border-color:#6286fe;
      box-shadow: 0 0 0 3px #e1e8ff;
    }
  }
}


/* 셀렉트박스 */
.select-box {
  width: 100%; height:40px; position: relative; display: inline-block; float: left; 
  select {
    border:1px solid var(--line-color); border-radius: 5px; width: 100%; height: 100%; padding: 0 40px 0 10px; font-size: 1.4rem; background-image: url(../../img/common/select_arrow.png); background-repeat: no-repeat; -webkit-background-size: 10px 6px; background-size: 10px 6px; color: #4C4C4C;background-color: #fff; background-position: calc(100% - 20px); cursor:pointer;
    &:disabled {
      cursor:no-drop
    }
    &:focus, &:active, &:hover {
      border-color:#6286fe;
      box-shadow: 0 0 0 3px #e1e8ff;
    }    
  } 
  &.search-input {
    select {
      &:focus, &:active, &:hover {
        border-color:var(--line-color);
        box-shadow: none;
      }
    }      
  } 
}

@media (max-width: 800px) {
	.select-box {width: 100%;}
}



/* 핸드폰 인증 UI */

.contact-wrap {
  .select-box.contact {
    width: 100px; margin-right: 5px; margin-bottom:5px 
  }
  .input-box.contact {
    float: left; margin-right:5px;
    input[type="text"].text-input {
      width: 100px;
      &:focus, &:active, &:hover {
        border-color:#6286fe;
        box-shadow: 0 0 0 3px #e1e8ff;
      }
    }
  }
  .input-box.authorize {
    float: left; margin-right: 5px; width:310px; 
    input[type="text"].text-input {
      &:focus, &:active, &:hover {
        border-color:#6286fe;
        box-shadow: 0 0 0 3px #e1e8ff;
      }
    }
  }
  .btn-wrap {
    float: left;
    button {
      height:35px; line-height:34px; font-size:1.2rem; width: 100px;
    }
  }
  .phone-wrap .phone-btn {
    float: left;
  }
}

@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%;float:none;
      select {
        font-size: 1.2rem
      }
    }
    .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;
    }
    .input-box.authorize.mg-0 {
      margin-bottom: 0;
    }
    .btn-wrap {
      top: 0; width: 100%;
      button {
        width: 100%; margin-bottom: 10px
      }
    }
    
  }
}

/* 테이블-form */

.form-wrap {
  .name-wrap {
    display: inline-block;
  }
  input[type="text"] {
    &.text-input {
      height: 35px;
      &.mg-10 {
        margin-top:5px;
      }
      &.check {
        height: 25px;
      }
      &.company {
        width: calc(100% - 85px);
      }
      &.double {
        width: calc(100% - 170px);
      }
    }
    &:disabled {
      background-color: #f3f3f3; border: 1px solid #ccc; opacity: 0.7; pointer-events: none;
    }
  }
  .contact-wrap {
    .select-box {
      select {
        background-position: calc(100% - 14px); background-image: url(../../../img/common/select_arrow.png);
      }
      &.contact {
        height: 35px;
        &.mg-0 {
          margin-bottom: 0;
        }
      }
    }
    .email-wrap {
      .select-box {
        &.contact {
          width: 120px;
        }
      }
    }
    .phone-wrap {
      .select-box {
        &.contact {
          height: 35px;
        }
      }
    }
    .unit {
      color: #888; float: left; line-height: 35px; font-size: 1.2rem; font-weight: 600; margin-right: 5px;
    }
  }
}  


@media (max-width: 768px) {
  .form-wrap {
    .contact-wrap {
      &.mg-5 {
        margin-bottom: 5px;
      }
      .select-box {
        &.contact {
          &.mg-0 {
            margin-bottom: 5px;
          }
        }
      }
      .email-wrap {
        .select-box {
          width: 100%;
          &.contact {
            width: 100%;
            &.mg-0 {
              margin-bottom: 5px;
            }
          }
        }
        .input-box {
          &.contact {
            margin-bottom: 5px;
          }
        }
        .unit {
          display: none;
        }
      }
    }
  }
}