/* ******************** pop style ******************** */

.popup-wrap {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index:100;
	.popup {
		position: absolute; top: 50%; left: 50%; width: 800px; height: 40vh; background-color: #fff; transform: translate(-50%,-50%); border-radius: 5px; box-shadow: 0px 10px 20px #929292; overflow:hidden; 
		&.company {
      width:550px; height:525px;
    } 
    .modal-title-area {
			padding: 20px; font-size: 1.5rem; font-weight: 600; border-bottom: 1px solid #dee3eb; position: relative;
      .close-btn {
        position: absolute; right:20px; top: 17px; cursor: pointer;
        &:hover {
          opacity: 0.8
        }
        img {
          width: 22px; height: 22px; opacity: 0.5
        }
      }
		}
    .modal-text-area {
      padding: 15px 20px; font-size: 1.5rem; line-height: 20px;overflow-y: auto; height: calc(100% - 135px);
      .pop-bg {
        text-align: center; background:#f1f6fb; padding:30px 15px;
        p {
          margin-bottom:30px
        }
        span {
          font-weight:600;
        }
        .material-icons {
          font-size:45px; margin-bottom:20px; display:block; text-align: center; color:#5d8fff
        }
      }
      &.company-search {
        padding:0px;
        input[type=text], input[type=password] {
          &.join-id {
            width:calc(100% - 135px); float:left;
          }
          &.join-password {
            margin-bottom:15px
          }
        }
        .search-wrap {
          padding:20px; border-bottom:1px solid var(--line-color);
          .check-box-wrap {
            p {display: inline-block; margin-right:20px; font-size:1.3rem; font-weight:600;}
          }
          .company-wrap {
            position:relative;
            input[type=text] {
              border-radius: 0; border-color:var(--main-color);padding-right:60px; height:40px;
            }      
            .btn-wrap {
              button {
                position: absolute; top: -45px; right: -5px; background-color: var(--main-color); width: 50px; text-align: center; border-radius: 0 0 10px 0; cursor: pointer; transition: background-color .2s;border:0;z-index: 20; height:50px;
                img {
                  width: 17px; height: 17px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
                }
                &:hover {
                  background-color: var(--main-hover-color);
                }
              }
            }      
          }
        }
        .result-wrap {
          padding: 20px; background: #efefef; overflow-y: auto;  @include scrollbar;height: 278px; 
          &.empty {
            font-size: 1.3rem; color: #8d8d8d; padding-top:115px;text-align: center; 
          }
          .check-input {
            margin-bottom:5px;
            input[type=radio]+label {
              font-weight:600;
            }
          }
          .result {            
            background:#fff; padding:10px; border:1px solid var(--line-color); margin-bottom:15px; cursor:pointer;
            ul {
              li {
                float:left; position:relative; padding:5px 17px 0 0 ; font-size:1.2rem; color:#7c7c7c;
                &:last-child:after {
                  content:none;
                }
                &:before {
                  content: attr(data-label); padding-right: 5px;color: #7f7f7f; font-weight:600;
                }
              }
            }
            .name {
              font-size:1.3rem; font-weight:600; color:var(--main-color)
            }
            &:hover, &.select {border-color:var(--main-color)}
          }
        }
      }
      .btn-wrap.id-btn {float:left; margin-left:15px;
        button {
          height:40px; line-height:38px; font-size:1.2rem; min-width:120px
        }
      }
    }
    .modal-foot-area {
      padding: 20px; border-top: 1px solid #dee3eb; background-color: #fff;
      .btn-wrap {
        button {
          height: 40px; line-height: 38px; font-size: 1.3rem; width: auto; min-width: 120px; float: none;
        }
      }
    }
	}
  &.find-pop {
    .popup {
      height:auto;
    }
    .modal-text-area {
      height:auto;
      .pop-tit {
        position:relative; padding-left:20px; font-weight:500; padding-bottom:10px; font-size:1.4rem;
        &:after {
          content: ""; position: absolute; top: 3px; left: 0; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #7babff;
        }
      }
    }
    input[type=text], input[type=password] {
      height:35px; line-height:28px; padding-left:10px;    
      
    }
    .select-box {
      select {
        height:35px;
      }
    }
    .vertic-table {
      table {
        tr {
          &:hover {
            background-color: transparent
          }
          td {
            .com-num {
              input.text-input {              
                display:inline-block;
                &.com-input  {
                  &:first-child {
                    width:100px; margin-right:15px;
                  }
                  &:nth-child(2) {
                    width:100px; margin-right:15px;
                  }
                  &:last-child {
                    width:calc(100% - 237px)
                  }
                }
              }
            }      
          }
        }
      }
    } 
  }
}


@media(max-width: 800px) {
	.popup-wrap {
    .popup, .popup.company {
      width: calc(100% - 40px);      
    }
  }
}

@media(max-width: 768px) {
  .popup-wrap {    
    .popup {
      .modal-title-area {        
        font-size: 1.6rem;padding: 15px;
        .close-btn {
          top: 14px; right: 15px;
        }
      }
      .modal-text-area {
        height: calc(100% - 120px);
        .pop-bg {
          p {font-size:1.3rem;}          
        }
        &.company-search {
          .result-wrap {
            height:294px;
          }
        }   
      }      
      .modal-foot-area {
        padding: 15px;
      }
    }  
    &.find-pop {
      .vertic-table {
        table {
          tr {
            &:hover {
              background-color:transparent;
            }
            td {
              .com-num {
                input.text-input {
                  &.com-input {
                    display:inline-block;
                    &:first-child {
                      width:calc(50% - 8px); margin-right:10px; 
                    }
                    &:nth-child(2) {
                      width:calc(50% - 8px); margin-right:0;
                    }
                    &:last-child {
                      width:100%; margin-top:5px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }  
  }
  
}

@media(max-width: 550px) {
  .popup-wrap {
    .popup {
      .modal-title-area {
        font-size: 1.5rem;
        .close-btn {
          top:13px
        }
      }
      .modal-text-area {
        height: calc(100% - 115px);
        .pop-bg {
          text-align: center; background:#f1f6fb; padding:30px 15px;
          .material-icons {
            font-size:30px; margin-bottom:15px;
          }
        }
        &.company-search {
          .result-wrap {
            height:299px;
          }
        }
      }
      .modal-foot-area {
        .btn-wrap {
          button {
            width: calc(50% - 4px);
          }
        }
      }
    }
  }
}


@media(max-width:500px) {
  .popup-wrap {
    .popup {    
      &.company {
        .modal-text-area {
          &.company-search {   
            input[type=text], input[type=password] {
              &.join-id {
                float:none; width:100%; 
              }
            }
            .search-wrap {
              padding:15px; text-align: center;
              .check-box-wrap {
                p {
                  display: none;
                }
              }
            }
            .result-wrap {
              height:309px; padding:15px;
              &.empty {
                padding-top: 133px;
              }
            }
          }
          .btn-wrap {
            &.id-btn {
              float:none; margin-top:10px; margin-left:0;
            }
          }
        }
      }  
      
    }
  }
}