@font-face {
    font-family: 'GongGothicLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GongGothicMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GongGothicBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.menu-item .active {
  background-color:#7fbffd;

}
.nav-open-btn .line {
    background-color: white;
}



.headerWrap {
    border-bottom: 1px solid white;
}

.menu-item a:after {
    content: '';
    width: 30px;
    bottom: 10px;
    left: 43%;
    position: absolute;
    opacity: 0;
}

    .menu-item .active {
    background:#61bfa1 !important;
    }





main{
    background:url(/common/image/recruit/recruit-image.png) no-repeat;
    background-size:cover;
    background-position:center;
        background-size:cover;
    background-attachment: local;
    background-position: center;
}


.recruitWrap{

    display:flex;
    align-items:center;
    justify-content:center;
    align-content:space-between;
}

.recruitInner{
    flex:1;
    margin-right:4%;
    text-align:center;
    position:relative;
    height:160px;
    padding-top:10px;
    margin-top:40px;
}


.recruitInner:after{
  content: "\f0da";
    display: inline-block;
    width: 12px;
    height: 20px;
    position: absolute;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 800;
    top:50%;
    right:-12%;
    color: #bbb;
}

.recruitInner:last-child:after{
    content:none;
}



.recruitInner img{
    display:block;
    margin:0 auto;
    margin-bottom:10px;
}

.recruitInner span{
    font-size:50px;
    font-weight:800;
    color:#eee;
    position:absolute;
    top:58%;
    left:50%;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    -o-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    z-index:-1;
}



.recruitInner p{

    font-size:16px; 
}



.process{
    margin-top:80px;
}

.process table{
    width:100%;
    

}

.process table tr:first-child{
border-top: 1px solid #ddd;

}

.process table tr{
    border-bottom: 1px dashed #ddd;

}

.process table th{
    font-size:1.5em;
    font-style:italic;
    padding:20px;
}

.process table th{
    width:20%;
}

.process table td:nth-of-type(1){
    width:15%;
    text-align:center;
    vertical-align:middle;
}

.process table td:nth-of-type(2){
    color:#797979;
    vertical-align:middle;
    line-height:1.1em;
}

.recruitOpen{
   margin-top:80px;
}

.welfareWrap{
    margin-top:80px;
}
.welfareWrap > table{
    table-layout:fixed;
    width:100%;
}


.welfareWrap > table > tbody >  tr > td{
  padding:10px;
  /*vertical-align:middle;*/
}

.welfareWrap > table > tbody >  tr > td > table tr{
   
   height:135px;
}



.welfareWrap > table > tbody >  tr > td > table tr td{
    padding:10px;
}

.welfareWrap > table > tbody >  tr > td > table tr td img{
    margin-top:-18px;
}


.welfareWrap > table > tbody >  tr > td > table tr td p:first-child{
    font-weight:bold;
}
.welfareWrap > table > tbody >  tr > td > table tr td p:last-child{
margin-top: 16px;
}


    

.recruitcont >div{
 border: 1px solid #ddd;
 margin-bottom:60px;
}


.recruitcont table{
 width:100%;
}


.recruitcont p{
    font-size:1.3em;
    text-align:center;
    /*background:#f1592a;
    color:#FFFFFF;*/
    padding:6px 0;
    background:#f1592a;
    color:#FFFFFF;
}

.recruitcont table td{
    padding:10px;
    border-bottom:1px solid #ddd;
}

.recruitcont table td:nth-of-type(1){
    font-size:1.1em;
    font-weight:500;

    
}

 .recruit_tit .tab-wrapper  {
     width:900px;
     margin:60px auto
 }
    .recruitcont table td:nth-of-type(2)  li {
        margin-bottom:14px;
    }




  .recruit_tit .tab-content table{
      width:100%;
  }



  .recruit_tit .tab-content table th{
      font-size:23px;
      background:#005edb;
      color:#FFF;
      padding:15px 0;
      border-right:1px solid #aaa;
          font-family: 'GongGothicLight';
          letter-spacing:0.3px;
   }

   .recruit_tit .tab-content table th:nth-of-type(1){
       width:26%;
   }
      .recruit_tit .tab-content table th:nth-of-type(3){
       width:40%;
   }
   .recruit_tit .tab-content table td:nth-of-type(1){
       border-left:1px solid #aaa;
   }
    .recruit_tit .tab-content table td{
        border-right:1px solid #aaa;
        border-bottom:1px solid #aaa;
        vertical-align:middle;
        padding:14px 0;
        font-size:18px;
        font-family: 'GongGothicLight';
        color:#333;

    }
    .recruit_tit .tab-content table td ul{
        width:90%;
        margin:0 auto;
        text-align:left;
    }

      .recruit_tit .tab-content table td li{
          margin-bottom:10px;
      }
      .recruit_tit .tab-content table td li h3{
          margin-bottom:8px;
          margin-top:10px;
      }

      .recruit_tit .tab-content table td li p{
          margin-bottom:4px;
        color:#898989;

      }
      .recruit_tit .tab-content table td li p:before{
        content:'-';
        margin-right:8px;
        margin-left:8px;

      }

      .recruit_tit .tab-menu:after{
          content:'';
          display:block;
          clear:both;
      }
      .recruit_tit .tab-menu{
          margin-top:20px;
      }


      .recruit_tit .tab-menu li{
          width:25%;
          float:left;
          font-size:17px;
          background:#444;
          padding:20px 0;
          color:#999;
          position:relative;
               font-family: 'GongGothicLight';
         border: 3px solid rgba(255,255,255,0);
         cursor:pointer;
         border-bottom:none;
         box-shadow:-6px -2px 10px rgba(0,0,0,0.2) inset;
      }


     
       
      .recruit_tit .tab-menu li.active{
          background:#FFF;
          color:#333 !important;
          border:3px solid #333;
          border-bottom:none;
          box-shadow:none;
      }

      .recruit_tit .tab-content{
          padding:30px 30px;
          border:3px solid #333;
          border-top:none;
          margin-top:-2px;
          min-height:400px;
      }

     .imgWrap{
           padding:40px 0;
           position:relative;

            width:auto;
            height:auto;
       }
    /*.imgWrap:after {
        content: '클릭하시면 사람인으로 이동합니다  ➜ ';
        line-height:500px;
        color:#49abff;
        font-size:3rem;
        font-weight:bold;
        display: none;
        height: 680px;
        background: rgba(255,255,255,0.8) !important;
        position: absolute;
        top: 0;
        z-index: 5;
        width: 100%;
        opacity: 0; 
        
    }
.imgWrap:hover:after {
    display:block;
    height: 680px;
    background: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    z-index: 5;
    width: 100%;
    opacity: 1;
    transition: all 5s ease; /* 변경된 부분 */
    pointer-events:none;
}*/

     
      .imgWrap a img{
          z-index:1;
          position:relative;
          transition: all 1s ease;
      }


      .tit{
          font-size:40px;
          line-height :normal;
            font-family: 'GongGothicMedium';
            border:4px solid #000;
            padding:6px 0;
            width:230px;
            margin:0 auto;
            position:relative;
            background:#FFF;
      }
      .tit:after{
          content:'';
          display:inline-block;
          width:100%;
          height:100%;
          background:#FFF;
          position:absolute;
          border:4px solid #000;
          left:3px;
          top:3px;
          z-index:-1;

      }

      .working{
          border:3px solid #333;
          width:900px;
          margin:0 auto;
          padding-top:80px;
          margin-top:-30px;
          z-index:-2;
          position:relative;

      }

      .working pre{
         text-align:left;
         font-size:23px;
         font-family: 'GongGothicLight';
         line-height:1.8;
         padding-left:40px;
         padding-bottom:60px;

      }
      .box{
          margin-top:120px;
      }

      .recruitment {
          width:1100px;
          margin:0 auto;
          margin-top:120px;
          background:#333;
          color:#FFF;
        font-family: 'GongGothicLight';
        font-size:22px;

      }

       .recruitment table{
           width:100%;

       }

       .recruitment table th{
           width:30%;
           font-size:30px;
           letter-spacing:0.5px;
           vertical-align:middle;
       }
        .recruitment table td{
            text-align:left;
            line-height:1.8;
            
           padding:40px 0;
        }


         .recruitment table td a{
             color:#FFF;
             text-decoration:underline;
             letter-spacing:2px;
             margin-left:20px;
             margin-right:20px;
             cursor:pointer;
         }
        .recprocess >div{
            width:33.3333333%;
            float:left;
            text-align:center;
            position:relative;

        }

         .recprocess >div:after{
             content:'';
             display:inline-block;
             width:20px;
             height:20px;
               background-image:url(/common/image/recruit/recruit_icon_all.png) ;
            background-position:42px;
             position:absolute;
             right:0;
             top:50%;
             transform:translateY(-60%);
         }

         .recprocess >div:last-of-type:after{
             content:none;

         }

        .recprocess >div span{
            display:inline-block;
            width:96px;
            height:96px;
            background-color:#FFF;
            border-radius:50%;
            background-image:url(/common/image/recruit/recruit_icon_all.png) ;
          
        }

        .recprocess >div:nth-of-type(1) span{
            background-position-x:8px;
        }

         .recprocess >div:nth-of-type(2) span{
            background-position-x:-82px;
        }


         .recprocess >div:nth-of-type(3) span{
            background-position-x:-180px;
        }

         .welfareWrap > table > tbody >  tr > td{
display:inline-block !important;
width:50%;
}


.welfarep {
    padding-left: 30px;
}


/*미디어쿼리*/


@media (max-width:1024px) {

    main {
        background:url(/common/image/recruit/recruit-image_tp.png) no-repeat;
        background-size: cover;
        background-attachment: local;
        background-position: center;
    }
}


@media all and (max-width:767px) { 
    
 .welfareWrap > table table{
     width:100% !important;
 }

.welfareWrap > table > tbody >  tr > td{
display:block !important;
width:100%;
}


.welfareWrap > table > tbody >  tr > td:nth-of-type(1){
    padding-bottom:0 ;
}


.welfareWrap > table > tbody >  tr > td:nth-of-type(2){
    padding-top:0 ;
}


.welfareWrap > table > tbody >  tr > td:nth-of-type(1) > table tr:last-of-type{
   border-bottom: none;
}

.recruitInner{
    margin-top:20px;
}


.recruitWrap{
    display:block;
    width:100%;
}

.recruitWrap:after{
    content:'';
    display:block;
    clear:both;
}

.recruitInner{
    width: calc( 50% - 10px);
    float:left;
    box-sizing:border-box;
    margin-right:0;
}

.recruitInner:after{
    content:none;
}

.recruitInner:nth-of-type(2n){
    float:right;
}



 }

@media all and (max-width:662px){
.process table tr{
   display:block ;
   padding-top:20px;
   padding-bottom:20px;
}

.process table tr:after{
    content:'';
    display:block;
    clear:both;
}

.process table th{
width:30%;
    display:inline-block;
    float:left;
}

.process table td:nth-of-type(1){
    width:70%;
    display:inline-block;
    float:left;
    text-align:left;
    font-weight:500;
    font-size:1.1em;
    margin-bottom:10px;
}

.process table td:nth-of-type(2){
    width:70%;
    display:inline-block;
    float:right;
}

}

@media all and (max-width:1180px) {


    .imgWrap img {
        z-index: 1;
        position: relative;
        transition: all 1s ease;
        width: 100%;
    }
}


@media all and (max-width:1100px){


.recruit_tit .tab-wrapper , .working , .recruitment{
    width:100%;
}

.recruit_tit .tab-menu li{
    font-size:16px;
}


    .imgWrap{
           padding:40px 0;
           position:relative;
            transition: all 1s ease;
            height:auto;
           width: 100%;
       }
    /*.imgWrap::after {
        content: '클릭하시면 사람인으로 이동합니다  ➜ ';
        line-height:500px;
        color:#49abff;
        font-size:3rem;
        font-weight:bold;
        display: none;
        height: 680px;
        background: rgba(255,255,255,0.8) !important;
        position: absolute;
        top: 0;
        z-index: 5;
        width: 100%;
        transition: all 1s ease;
         opacity: 0; 
        
    }
     .imgWrap:hover::after{
    display:block;
    height: 680px;
    background: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    z-index: 5;
    width: 100%;
    opacity: 1;
   transition: all 1s ease;
     }*/

     



}


@media all and (max-width:890px){
 .recruit_tit .tab-menu li{
     width:50%;
     box-shadow:none;
     background:#eaeaea;
     padding:10px 0;
     height:55px;
 }
  .recruit_tit .tab-menu li.active{
     background:#333;
     color:#FFF !important;
 }
    .recruit_tit .tab-content {
    border:none;
    padding:0;
    margin-top:20px;
   
    }
    .box{
        margin-top:60px;
    }

}

@media all and (max-width:768px) {


   


 .tit{font-size:28px;
      width:180px;
 }
 .working pre{
     font-size:16px;
     width:96%;
     padding-bottom:10px;
     padding-left:0;
     margin:0 auto;
 }

 .working{
     padding-top:50px;
     padding-bottom:20px
 }
 .recruitment table th{
     font-size:18px;
     width:20%;
     padding-left:2%;
 }
 .recruitment table td{
     padding:20px 0;
     padding-left:30px;
     font-size:16px;
 }

 .recprocess >div span{
     width:50px;
     height:50px;
 }
 .recprocess >div span{
     background-size :350%;
 }

  .recprocess >div:nth-of-type(1) span{
      background-position:4px -2px;
  }
  .recprocess >div:nth-of-type(2) span{
      background-position:-45px 0px;
  }
    .recprocess >div:nth-of-type(3) span{
      background-position:-96px 0px;
  }
   .recprocess >div:after{
       width:12px;
   }
   .recruit_tit .tab-content table th{
       font-size:18px;
   }
  .recruit_tit .tab-content table td{
      font-size:15px;
      overflow-wrap:break-word;
  }
   
  .content{
      width:100% !important;

  }
}


@media all and (max-width:488px) {
    
    .subnav {
background: #f1fffa;
    }

        .menu-item .active {
    background:white !important;
    color:#151a18;
    }
    .menu-item a:after {
border-bottom: 3px solid #61bfa1;
}
}


@media all and (max-width:480px) {



   .recprocess >div:after{
       content:none;
   }

   .working pre{
       white-space:pre-wrap
   }

   .recruitment table td{
        padding-left:5%;
        font-size:14px;
   }
   .recruitment table th{
       font-size:15px;
   }
}