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

.popup-wrap {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index:400;
	.popup {
		position: absolute; top: 50%; left: 50%; width: 550px; height: 525px; background-color: #fff; transform: translate(-50%,-50%); border-radius: 5px; box-shadow: 0px 10px 20px #929292; overflow:hidden; 
		.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: 45px 30px 55px; font-size: 1.5rem; line-height: 20px;overflow-y: auto; height: calc(100% - 135px);
      .step-wrap {
        text-align: center;
        ul {
          position:relative;  text-align: center; display:inline-block;
          &:before {
            width:calc(100% - 39px); height:1px; background:#c9c9c9; content:''; top:0; position:absolute; left:18px;
          }
          li {
            position:relative; display:inline-block; font-size:1.3rem; margin-right:40px; padding-top: 16px; margin-bottom: 30px; font-weight:400; color:#aaa;
            &:before {
              content:''; position:absolute; left:50%; transform: translateX(-50%); top:-3px; background:#c9c9c9; width:7px; height:7px; border-radius: 50%;
            }
            &.on:before {
              background:var(--main-color); width:10px; height:10px; top:-4px;
            }
            &.on {
              color:var(--main-color); font-weight:600;
            }
            &:last-child {
              margin-right:0;
            }
            &.on:after {
              content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%); border:2px solid rgb(255, 255, 255); border-radius: 50%;
            }
          }
        }
        }
      .pop-bg {
        text-align: center; background:#f1f6fb; padding:50px 15px; border-radius:5px;
        p {
          margin-bottom:15px
        }
        span {
          font-weight:600;color: var(--main-color);
          &.bk {color:#000;}
        }
        .material-icons {
          font-size:45px; margin-bottom:20px; display:block; text-align: center; color:#5d8fff
        }
      }
      .form {
        text-align: center;
        .left, .right {
          margin-top:10px; cursor:pointer; background:var(--main-color); width:177px;padding: 40px 20px; text-align:center; font-size:1.2rem; font-weight:500; border-radius: 5px; display:inline-block; transition: background .25s ease;
          .img {
            width:46px; height:auto; margin:0 auto; margin-bottom:5px;
            img {
              max-width:100%; width:100%; height:100%;
            }
          }
          p {
            font-weight:500; font-size:1.4rem;color:#fff;
          }
          &:hover {
            background:#7394ff;
          }
        }
        .left { margin-right:20px;          
        }
      }
      &.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;
            }      
            .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; width: 750px;
    }
    .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 {
      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); padding:20px;   
        &.company-search {
          .result-wrap {
            height:294px;
          }
        }          
        .pop-bg {
          p {font-size:1.3rem;}          
        }
      }      
      .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);
        &.company-search {
          .result-wrap {
            height:299px;
          }
        }
        .form {
          .left, .right {
            width:calc(50% - 5px); margin-right:5px; margin-bottom:7px; padding:20px;
            .img {
              width:35px; 
            }
            p {
              font-size:1.2rem;
            }
          }
          .right {
            margin-right:0;
          }
        }     
        .pop-bg {
          text-align: center; background:#f1f6fb; padding:30px 15px;
          .material-icons {
            font-size:30px; margin-bottom:15px;
          }
        }
      }
      .modal-foot-area {
        .btn-wrap {
          button {
            width: calc(50% - 4px);
          }
        }
      }
    }
  }
}

@media(max-width:500px) {
  .popup-wrap {
    .popup {      
      .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;
          }
        }
      }
    }
  }
}