@charset "utf-8";

/* ******************** default ******************** */

/* 폰트 */
@import "../../../font/NanumSquareNeo.css";

/* G마켓 폰트 */
@import "../../../font/gmarketsans.css";

/* root */
@import "../../common/color";

/* mixin */ 
@import "../../mixin/ui-mixin";

/* common */ 
@import "../../common/common";


/* ******************** 공통 요소 ******************** */

/* header */
@import "../../common/header";

/* footer */
@import "../../common/footer";

/* fix-btn */ 
@import "../../common/fixed-btn";


/* ******************** component ******************** */

/* input */ 
@import "../../component/input-style";

/* button */ 
@import "../../component/button-style";

/* board */
@import "../../component/board";

/* board */
@import "../../component/vertical-table";

/* pop */
@import "../../component/pop-style";

/* sub-cont */ 
@import "../common/_sub-cont";

/* check */ 
@import "../../component/check-style";


/* ******************** mypage ******************** */

/* 마이페이지 레이아웃 */
@import "./_layout";

/* left navigation */
@import "./_navigation";

/* left navigation */
@import "./_list-title";

@import ".././../component/title-style.scss";

.select-box {
  select {
    background-image: url(../../../img/common/select_arrow.png)
  }
}


.check-input {  
  input[type="radio"] {    
    & + label:before {
      background-image:url("../../../img/common/radio.svg");margin: 0px 7px 0 0; 
    }    
  }
}

input[type="checkbox"].check-box {  
  & + label {  
    font-size:1.3rem; line-height:26px;
    &:before {
      background:url("../../../img/common/check.svg")no-repeat center; width: 13px; height: 13px;background-size: 8px 8px; margin-right: 4px;
    }
  }
}

.com-title {
  margin-bottom:10px;
  .tit {
    font-size:1.4rem; 
    &:before {
      top:1px; width:14px; height:14px; 
    }
  }
  &.account-info {
    display: flex; 
    .caption-area {
      flex: 1; margin-left: 20px;
      .caption {
        font-size: 1.3rem; color: #ed6c5f; font-weight: 600; display: inline-block; 
      }
    }
  }
}

/* 인풋 텍스트 */
input[type="text"] {
  &.text-input {
    height:30px; font-size:1.2rem;    
  }
}

input[type="password"] {
  &.text-input {
    height:30px; font-size:1.2rem;
    &.mg-10 {
      margin-top:5px;
    }
  }
}

.authorize-txt {
  p {
    font-size: 1.2rem; 
  }
}

.user-wrap {
  .table-wrap:not(:first-child) {
    margin-top:40px;
  }
  input[type="text"] {
    &.text-input {
      &.company {
        width: calc(100% - 85px);
      }
      &.double {
        width: calc(100% - 170px);
      }
    }
  }     
  .vertic-table {
    table {
      tr {
        td {          
          position:relative;
          .company-info-wrap {
            input[type="text"] {
              float:left; margin-right:5px;
            }
          }
          .file-input {
            display: inline-block; text-align: left; width:100%; position: relative;  font-size: 1.2rem; height: 30px; line-height: 30px; vertical-align: middle; background-color: #fff; cursor: pointer; border: 1px solid #e1e1e1; font-weight: 400; border-radius: 2px;
          
            > input[type='file'] {
              position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 301; cursor: pointer;
            }
          
            > .button {
              display: inline-block; padding: 0; font-size: 1.2rem; vertical-align: top;background-color: var(--darkblue-color); cursor: pointer; border: 1px solid var(--darkblue-color); border-radius: 5px; font-weight: 400; color: #fff; height: 30px; border-top-left-radius: 0; border-bottom-left-radius: 0; position: absolute; z-index: 2; top: 0; right: -1px; transition: all 0.3s ease; width: 120px; text-align: center; line-height: 30px;
          
              &:hover {
                background: #000; color: #fff; border-color: #000;
              }
            }
          
            > .label {
              position: relative; top: 0; color: #333; opacity: 0.5; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; display: block; left: -10px;
            }
          }
            }
            .btn-wrap {
              float:left;
            }
          }
          .btn-wrap {
            &.position {
              position:absolute; top:5px; right:10px;
            }          
            button {
              height:30px; font-size:1.1rem; width:auto; min-width:80px;
            }
          }     
          .label {
            padding:0px 15px; border-radius: 30px; font-size:1.1rem; font-weight:500; color:#fff; display: inline-block; margin-left:5px; position:relative; top:-2px;
          }   
          input[type="checkbox"].check-box {  
            & + label {  
              margin-right:0; line-height:30px;
            }
          }                              
        }
        .company-num-wrap {
          .com-num {
            float:left; margin-right:5px;
          }
          .btn-wrap {
            float:left;
            &.double {
              display: flex;
            }
          }
        }
      }
    }      
  .btn-wrap.modify {
    margin-top:20px;
    button {
      height:45px; font-size:1.4rem;
    }

  }  

@media(max-width:1024px) {
  .vertic-table {
    table {
      tr {
        td {
          .company-num-wrap {
            .com-num {
              width:calc(100% - 85px);
              input[type=text].text-input {
                width:calc(33.3% - 7px);
              }
            }
          }
        }
      }
    }
  }
}

@media(max-width:572px) {
  .user-wrap {
    .vertic-table {
      table {
        tr {
          td {
            .btn-wrap {
              &.position {
                top:10px;
              }      
            }     
            .company-num-wrap {
              .com-num {
                width:100%; margin-right:0; float:none
              }
              .btn-wrap {
                float:none; margin-top:10px; width:100%;
                button {
                  float:none; width:100%;
                }
              }
            }
          }
        }
      }
    }
  }
  .com-title {
    &.account-info {
      display: block; 
      .caption-area {
        margin: 10px 0; 
        .caption {
          font-size: 1.2rem; line-height: 1.6;
        }
      }
    }
  }
}

@media(max-width:500px) {
  .check-input-box {
    margin-top:8px;
  }
}

@media(max-width:350px) {
  .user-wrap {
    .vertic-table {
      table {
        tr {
          td {
            .company-info-wrap {
              input[type="text"] {
                float:none; 
              }    
              .btn-wrap {
                float:none;margin-top:10px;
              }
            }
            .btn-wrap {
              &.position {
                position:relative; width:100%; margin-top:10px; top:auto; right:auto;
              }          
              button {
                width:100%; float:none;
              }
            }   
          }
        }
      }      
    }
    input[type="text"] {
      &.text-input {
        &.company {
          width: 100%
        }
      }
    }
  }
}