@charset "UTF-8";

/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap'); */
/* noto-sans-kr-regular - korean */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-kr-v36-korean-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/noto-sans-kr-v36-korean-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
}
/* noto-sans-kr-500 - korean */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-sans-kr-v36-korean-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/noto-sans-kr-v36-korean-500.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
}
/* noto-sans-kr-700 - korean */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-kr-v36-korean-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/noto-sans-kr-v36-korean-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
}
@font-face {
  font-family: 'calibre';
  font-weight: 200;
  font-style: normal;
  src:url('../fonts/calibre-web-thin.woff2') format('woff2'),
  url('../fonts/calibre-web-thin.woff') format('woff');
}
@font-face {
  font-family: 'calibre';
  font-weight: 300;
  font-style: normal;
  src:url('../fonts/calibre-web-light.woff2') format('woff2'),
  url('../fonts/calibre-web-light.woff') format('woff');
}
@font-face {
  font-family: 'calibre';
  font-weight: 400;
  font-style: normal;
  src:url('../fonts/calibre-web-regular.woff2') format('woff2'),
  url('../fonts/calibre-web-regular.woff') format('woff');
}
@font-face {
  font-family: 'calibre';
  font-weight: 600;
  font-style: normal;
  src:url('../fonts/calibre-web-semibold.woff2') format('woff2'),
  url('../fonts/calibre-web-semibold.woff') format('woff');
}

@font-face {
	font-family: 'NanumSquareNeo-Variable';
    font-weight: normal;
    font-style: normal;
    /*src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2');*/
    src:url('../fonts/NanumSquareNeo-Variable.woff2') format('woff2'),
  	url('../fonts/NanumSquareNeo-Variable.woff') format('woff');
}
:root {

    --margin: calc((100% / 12) * 1);

}

body{min-height:3000px; font-family: 'Noto Sans KR', sans-serif;}

*{margin: 0; padding: 0;}

li{list-style: none;}

a{text-decoration: none;}

.back{width: 100%; position: absolute; left: 0; top: 0; box-sizing: border-box; z-index: -1;}

.back img{width: 100%;}

.header{

    position: absolute;

    top: 40px;

    left: 0;

    width: 100%;

    z-index: 10;

    box-sizing: border-box;

    padding: 0 var(--margin);

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.header a img{

    height: 32px;

}

.header a img:first-child{

    display: block;

}

.header.black a img:first-child{

    display: none;

}

.header a img:last-child{

    display: none;

}

.header.black a img:last-child{

    display: block;

}

.header ul{

    position: relative;

}

.header ul li{

    display: inline-block;

    margin-right: 30px;

    color: #fff;

}

.header ul li:last-child{

    margin-right: 0;

}

.header ul li a{

    color: #fff;

    font-size: 18px;

    transition: 0.3s color;

    font-family: 'NanumSquareNeo-Variable';

}

.black.header ul li a{

    color: #5e5350;

    

}

section{

    width: 100%;

    padding: 0 var(--margin);

    box-sizing: border-box;

}

/* 인트로 */

.intro{

    background-color: #eb5a5f;

    position: relative;

    width: 100%;

}

.intro article{

    color: #fff;

    font-size: 32px;

    position: relative;

    padding-top: 155px;
    padding-bottom:15vw;
    z-index: 1;

    font-family: 'NanumSquareNeo-Variable';

}

.intro article p{

    font-size: 40px;

    margin-bottom: 15px;
    font-family: 'calibre', 'Noto Sans KR', sans-serif;
    font-weight: 300;
}

.intro article span{

    margin: 50px 0 80px;

    border-radius: 24px; 

    border: 1px solid #fff; 

    padding: 10px 34px;

    font-size: 18px;

    display: inline-block;

    font-family: 'Noto Sans KR', sans-serif;

}

.intro article h1{

    font-size: 58px;

    line-height: 1.3;

}

.intro .date{

    position: absolute;

    top:500px;

    left: 34vw;

    color: #fff;

    z-index: 1;

    font-family: 'NanumSquareNeo-Variable';

}
@media(min-width:1720px){
    .intro .date{left:calc(var(--margin) + 440px);}
}
.intro .date h1{

    font-size: 40px;

}

.intro .date h1:last-child{

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 24px;

}

.intro .date h1:last-child::before{

    content: '';

    display: block;

    width: 40%;

    height: 2px;

    background-color: #fff;



}

.intro img{

    position: absolute;

    display: block;

}

.intro img.intro_img1{

    bottom: 0;

    width: calc(46% - var(--margin));

    max-width: 700px;
    position:absolute;
    z-index:10;
    right:0;

}

.intro_mask1{right: 0; bottom: 0; width: 39%; max-width: 650px;}

.intro_mask2{left: 0; top: 0; width: 32.5%; max-width: 530px;}

.intro_mask3{right: 10%; top: 0; width: 46%; max-width: 750px;}

.bg{



    background-image: url(../img/recruiter/bg.png);

    background-size: 100% auto;

}

.bg > div{

    max-width: 1600px;

    margin: auto;

}

.title{

    position: relative;

    padding-top: 100px;

    margin-bottom: 50px;
    
}

.title > span{

    font-size: 22px;

    color: #eb5a5f;

    margin-bottom: 16px;

    display: block;
    font-weight: 600;
    font-family: 'calibre', 'Noto Sans KR', sans-serif;
}

.title > h2{

    font-size: 32px;

    color: #5e5350;

    line-height: 1.2;

}

.title .cateBtn{

    position: absolute;

    bottom: 0;

    left: 246px;

    display: flex;



}

.title .cateBtn li{

    font-size: 24px;

    margin-left: 40px;

    padding-bottom: 7px;

    color: #cacaca;

    border-bottom: 3px solid #cacaca;

    cursor: pointer;

    box-sizing: border-box;

}

.title .cateBtn .on{

    color: #eb5a5f;

    border-bottom: 3px solid #f15f64;

}

.categories{

    width: 100%;

    position: relative;

    margin-bottom: 160px;

}

.cateList{

}

.cateList .cateWrap{

    position: relative;

    width: 100%;

    display: none;

    grid-template-columns: 1fr 1fr 1fr;

    grid-gap: 22px;

}

.cateList .cateWrap.on{

    display: grid;

}

.cateList .cateWrap .cateInner{

    display: block;

    background-color: #f5efec;

    height: 100%;

    border-radius: 18px;

    padding: 30px 30px 40px;

    box-sizing: border-box;

}

.cateTitle{

    font-size: 16px;

    color: #fff;

    padding: 6px 38px;

    border-radius: 24px;

    background-color: #95807a;

    margin-bottom: 32px;

    display: inline-block;

}

.cateInnerText{

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: calc(100% - 60px);

}

.cateInnerText ul{

    margin-bottom: 25px;

}

.cateInnerText h4{

    font-size: 18px;

    font-weight: 500;

    color: #5e5350;

    margin-bottom: 7px;

}

.cateInnerText li{

    padding-left: 12px;

    position: relative;

    display: block;

    line-height: 1.63;

    font-size: 16px;

    color: #5e5350;

}

.cateInnerText li::before{

    content: '';

    display: block;

    background-color: #d1bdb1;

    width: 4px;

    height: 4px;

    position: absolute;

    left: 0;

    top: 11px;

    border-radius: 100%;

}

.cateComment{

    color: #a1a1a1;

    display: block;

    margin-top: 24px;

}

.devide{

    display: flex;

}

.devide > div:first-child{

    width: 50%;

    box-sizing: border-box;

    padding-right: var(--margin);

}

.devide > div:last-child{

    width: 57.5%;

}

.devide li{

    font-size: 16px;

    line-height: 26px;

    margin-bottom: 8px;

    padding-left: 12px;

    position: relative;

    color: #5e5350;

}

.devide li:last-child{

    margin-bottom: 0;

}

.devide li::before{

    content: '';

    display: inline-block;

    position: absolute;

    left: 0;

}

.devide div:first-child li::before{

    border-radius: 100%;

    background-color: #d1bdb1;

    width: 4px;

    height: 4px;

    top: 12px;

}

.devide div:last-child li::before{

    background-image: url(../img/recruiter/checkbox.png);

    background-color: unset;

    width: 16px;

    height: 16px;

    background-size: cover;

    top: 6px;

}

.devide > div:first-child li{

    padding-left: 12px;

}

.devide > div:last-child li{

    padding-left: 32px;

}

.cursors{



    margin-bottom: 80px;

}

.processWrap{

    display: flex;

    align-items: center;

    margin-bottom: 40px;

}

.processWrap li{

    line-height: 1.2;

    padding: 22px 60px;

    box-sizing: border-box;

    border: 2px dashed #d1bdb1;

    border-radius: 50px;

    position: relative;

    cursor: pointer;

}

.processWrap li span{

    border-radius: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    left: 50%;

    top: 0;

    transform: translate(-50%, -50%);

    width: 34px;

    height: 34px;

    background-color: #e2d5cd;

    color: #95807a;

    transition: all 0.3s;

}

.processWrap li:hover span{

    background-color: #f15f64;

    color: #fff;

}

.processWrap img{

    display: block;

    width: 21px;

    height: 15px;

    margin: 0 24px;

}

.processText{

    position: absolute;

    bottom: 0;

    right: calc( -1 * var(--margin));

    width: 300px;

}

.processText img{

    display: block;

    width: 300px;

    height: unset;

}

.textSection{

    margin-bottom: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}

.textSection span{

    position: absolute;

    font-size: 16px;

    color: #fff;

    text-align: center;

    top: 44%;

    opacity: 0;

    transition: opacity 0.3s;

    transform: translateY(-50%);

}

.textSection span.on{

    opacity: 1;

}

.process{

    margin-bottom: 110px;

    position: relative;

}

.applyDate{

    display: block;

    width: calc(100% - 150px);

}

.applyDate span{

    font-size: 18px;

    line-height: 26px;

    color: #eb5a5f;

    margin-bottom: 16px;

    display: block;

}

.applyDate p{

    font-size: 16px;

    line-height: 1.63;

    color: #5e5350;

    margin-bottom: 8px;

    position: relative;

    padding-left: 12px;

}

.applyDate p::before{

    content: '';

    display: block;

    border-radius: 100%;

    background-color: #d1bdb1;

    position: absolute;

    width: 4px;

    height: 4px;

    top: 12px;

    left: 0;

}

.applyDate p strong{

    font-weight: 400;

    color: #eb5a5f;

}

#RecruitmentFair{

    padding-top: 220px;

    position: relative;

    color: #5e5350;

}

#RecruitmentFair .title{

    padding-top: 0;

}

#RecruitmentFair > *:not(.bgText){

    z-index: 1;

    position: relative;

}

#RecruitmentFair .comment{

    font-size: 20px;

    color: #5e5350;

    display: block;

    line-height: 1.6;

}

.bgText{

    position: absolute;

    font-size: 9vw;

    top: 160px;

    line-height: 1;

    font-weight: 700;

    color: #f6ece8;

    left: -5%;

    word-break: break-all;

    opacity: 0.48;

}

.rfWrap{

    position: relative;

    margin-top: 100px;

    width: 480px;

    padding-bottom: 120px;

}

.rfWrap .rfInner{

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 28px 0;

    border-bottom: 2px solid #f0e7e2;

    box-sizing: border-box;

}

.rfWrap .rfInner h3{

    font-size: 22px;

    color: #eb5a5f;

}

.rfWrap .rfInner span{

    display: flex;

    align-items: flex-end;

    font-size: 18px;

    text-align: right;

    line-height: 1.5;

}

.rfWrap .rfInner span h4{

    font-size: 28px;

    line-height: 1.1;

}

.rfWrap .rfComment{

    font-size: 16px;

    color: #a1a1a1;

    text-align: right;

    display: block;

    margin-top: 11px;

}

#RecruitmentFair .qr{

    width: 40%;

    right: calc(  -1 * ((100vw / 12)) + 53px);

    bottom: 0;

    position: absolute;

}

.qrLine{

    position: absolute;

    width: 55%;    

    top: 39%;

    left: -40%;

}

.qrbg{

    display: block;

    width: 100%;

}

.qrInner{

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 60%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.qrInner .wbtn{

    margin-bottom: 34px;

}



.qrInner img{

    width: 100%;

    display: block;

}

/* slider */

.slider img{

    width: 100%;

    display: block;

    margin-bottom: 24px;

}

.interview{

    position: relative;

    background-color: #f5efec;

}

.interview .comment{

    font-size: 20px;

    color: #5e5350;

    padding-bottom: 310px;

    padding-top:50px;

    display: block;

}

.interview .title, .interview .slideWrap, .interview .comment{

    max-width: 1600px;

    margin: auto;

}

.bg_interview{

    height: 100%;

    position: absolute;

    right: 0;

    top: 0;

}

.interview .slideWrap{

    position: absolute;

    width: 100%;

    top: 176px;

    box-sizing: border-box;

    transform: translateX(-50%);

    left: 50%;

    max-width: calc(100% - ( 2 * var(--margin) ));

}

.interview .slideWrap .slider{

    width: 100%;

    display: flex;

    justify-content: flex-end;

    margin: auto;

}

.interview .slideWrap .slider .slick-list{

    width: 52%;

    min-width: 600px;

    /*margin-right: var(--margin);*/

}
.interview .slideWrap .slider.pc .slick-slide{
    margin: 0 12px;
}

.slick-arrow{

    position: absolute;

    bottom:0;

    width: 96px;

    height: 96px;

    border-radius: 100%;

    background-color: #fff;

    cursor: pointer;

    background-image: url(../img/recruiter/arrow_right.png);

    background-size: 30px 20px;

    background-repeat: no-repeat;

    background-position: center center;

    background-color: #fff;

    border-radius: 100%;

}

.slick-arrow::before{

    content: '';

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    box-shadow: #fff -4px 4px;

    border-radius: 100%;

    transition: 0.3s all;

}

.slick-arrow::after{

    box-sizing: border-box;

    content: '';

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 100%;

    z-index: 1;

    border: 2px solid #d1bdb1;

    opacity: 1;

    transition: 0.3s opacity;

}

.slick-arrow:hover::after{

    opacity: 0;

}

.slick-arrow:hover::before{

    box-shadow: #fff 0px 0px;

}

.slick-arrow:first-child{

    left: 0;

    transform: scaleX(-1);

}

.slick-arrow:last-child{

    left: 128px;

}

.interview .slideWrap .slider li{

    margin: 0;

    border-radius: 9px;

    background-color: #fff;

    padding: 8px;

    box-sizing: border-box;

    text-align: center;

    cursor: pointer;
    box-sizing: border-box;
    width: calc(50% - 24px);

}

.b1{

    padding: 3px;

    border:2px solid #d1bdb1;

    border-radius: 6px;

}

.b2{

    border:1px solid #d1bdb1;

    border-radius: 6px;

    padding: 19px 24px 22px;

}

.interview .slideWrap .slider li span{

    font-size: 14px;

    color: #f15f64;

    margin-bottom: 1px;

}

.interview .slideWrap .slider li p{

    font-size: 16px;

    color: #5e5350;

    line-height: 1.63;

}

#videos{

    padding-bottom: 172px;

}

#videos .title{

    margin-bottom: 60px;

}

.videoSection{

    position: relative;

    display: flex;

    justify-content: space-between;

}

.videoWrap{

    width: 82.0%;

    position: relative;

}

.videoWrap img{

    display: block;

    width: 100%;   

}

.videoWrap iframe{

    position: absolute;

    width: 100%;

    bottom: 0;

    height: 88%;

    display: none;

}

.videoWrap iframe.on{

    display: block;

}

.videoWrap iframe::after{

    padding-top: 56.25%;

    width: 100%;

    position: relative;

}

.imgTab{

    width: 16%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

.imgTab li{

    position: relative;

    display: block;

    cursor: pointer;

}

.imgTab li::after{

    content: '';

    display: block;

    width: 100%;

    padding-top: 56.25%;

    background-color: #a1a1a1;

}

.imgTab li img{

    position: absolute;

    display: block;

    width: 100%;

    height: 100%;

}

#benefits{

    background-color: #f5efec;

    padding-bottom: 150px;

}

#benefits > *{

    max-width: 1600px;

    margin: auto;

}

#benefits .title{

    margin-bottom: 50px;

}

#benefits ul{

    display: flex;

}

#benefits li{

    background-color: #fff;

    margin-right: 24px;

    width: calc((100% - 492px) / 8);

    overflow: hidden;

    transition: 0.8s width;

    border-radius: 6px;

}

#benefits li.on{

    width: 400px;

}

#benefits li:last-child{

    margin-right: 0;

}

.b_s{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

    padding: 25px 0 18px;

    height: 100%;

    box-sizing: border-box;

}

.b_s span{

    font-size: 20px;

    writing-mode: tb;

    color: #95807a;

    letter-spacing: 3px;

}

.icon_bg{

    width: 52px;

    height: 52px;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: #faf6f4;

    border-radius: 100%;

}

.b_l{

    padding: 50px 32px 40px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    position: relative;

}

.b_l h4, .b_l p{

    width: 300px!important;

    margin: auto;

}

.b_l h4{

    font-family: 'NanumSquareNeo-Variable';

    font-size: 16px;

    color: #eb5a5f;

    margin:30px auto 18px;

    text-align: center;

}

.b_l p{

    color: #95807a;

    font-size: 14px;

    line-height: 1.6;

    text-align: center;

}



.b_r{

    position: absolute;

    top: 0px;

    right: 30px;

    width: 32px;

}

.b_l_icon{

    width: 100%;

    height: 166px;

    object-fit: contain;

}

.on .b_s, .b_l{

    display: none;

}

.on .b_l, .b_s{

    display: flex;

}

#apply{

    background-image: url(../img/recruiter/apply_bg.png);

    background-size: cover;

    padding: 0;

    position: relative;

}

#apply .text_box{

    padding: 110px 0 110px 24%;

}

#apply .text_box h1{

    font-size: 28px;

    color: #fff;

    font-family: 'NanumSquareNeo-Variable';

    font-weight: 500;

}

#apply .wbtn{

    margin-top: 20px;

}

#apply .applyBg{

    position: absolute;

    width: auto;

    height: 110%;

    display: block;

    bottom: 0;

    left: calc(24% + 560px);

}

.wbtn{

    width: 248px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    cursor: pointer;

}

.wbtn::after, .wbtn::before{

    content: '';

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 24px;

    box-sizing: border-box;

    transition: all 0.2s;

}

.wbtn::after{

    left: 0;

    top: 0;

    border: 2px solid #95807a;

    opacity: 1;

}

.wbtn::before{

    width: calc(100% - 0px);

    height:  calc(100% - 0px);

    content: '';

    left: 4px;

    top: 4px;

    background-color: #fff;

    

}

.wbtn:hover::after{

    opacity: 0;

}

.wbtn:hover::before{

    left: 0;

    top: 0;

}

.wbtn > *{

    width: 100%;

    color: #eb5a5f;

    font-size: 18px;

    z-index: 1;

    height: 100%;

    justify-content: center;

    display: flex;

    align-items: center;

}



#footer{

    background-color: #fff5ef;

    padding: 75px var(--margin) 55px;

}

.footerWrap{

    display: flex;

    max-width: 1600px;

    margin: auto;

}

.f1{

    width: 50%;

}

.f2{

    margin-right: 52px;

}

.f1 img{

    display: block;

    width: 200px;

    margin-bottom: 13px;

}

.footerWrap span{

    font-size: 16px;

    color: #95807a;

}

.f2 h1{

    font-size: 24px;

    color: #5e5350;

    margin-bottom: 12px;

    line-height: 1;

}

.f2 ul{

    margin-top: 32px;

}

.f2 ul li{

    display: flex;

    align-items: center;

    margin-bottom:12px;

}

.f2 ul li img{

    width: 14px;

}



.f2 ul li h4{

    font-size: 16px;

    color: #5e5350;

    display: block;

    margin-left:10px;

    width: 65px;

}

.f2 ul li a{

    font-size: 16px;

    color: #95807a;

    position: relative;

}

.f2 ul li a::after{

    content: '';

    display: block;

    position: absolute;

    width: 0;

    bottom: 0;

    height: 1px;

    background-color: #95807a;

    transition: 0.5s width;

}

.f2 ul li a:hover::after{

    width: 100%;

}

.f3 li{

    margin-bottom: 16px;

    padding: 16px 36px;

    border: 2px solid #d1bdb1;

    border-radius: 51px;

    max-width: 382px;

    width: 100%;

    position: relative;

}

.f3 li a{

    display: flex;

    align-items: center;

    width: 100%;

}

.f3 li a p{

    font-size: 15px;

    color: #95807a;
padding-right:20px;

}

.f3 li a img:first-child{

    display: block;

    width: 23px;

    margin-right: 16px;

}

.f3 li a img:last-child{

    width: 20px;

    position: absolute;

    right: 40px;

}

@media screen and (min-width: 1962px){

    .interview .slideWrap{max-width: 1600px;}

}



@media screen and (min-width: 1600px){

    .processText{right: 0;}

    .processWrap li{padding: 22px 70px;}

    #RecruitmentFair .qr{width: 45%;}

}

@media screen and (max-width: 1350px){

    .processText{

        width: 200px;

    }
    .processText img{
        width: 200px;
    }

    .processWrap li{

        padding: 16px 30px;

        min-width: 120px;

        text-align: center;

    }

    #apply .text_box{

        padding: 70px 0 70px 10vw;

    }

    #apply .applyBg{left: calc(10vw + 570px);}

}



@media screen and (max-width: 1200px) and (min-width: 801px){
    .header{padding: 0 20px;}
    .header ul li{margin-right: 20px;}
    section{

        padding: 0 20px;

    }

    #benefits li{width: calc((70% - 46px) / 8); margin-right: 12px;}

    #benefits li.on{width: 30%;}

    .b_l h4, .b_l p{width: 21vw!important;}

    .b_s span{

        font-size: 16px;

    }

    .b_l_icon{height: 120px;}

    .b_l{padding: 40px 20px 30px;}

    .b_r{width: 20px; right: 20px;}

    .interview .slideWrap{max-width: calc(100% - 40px);}

    .processText{right: 0;}

    #RecruitmentFair .qr{right: 0;}

    #apply .applyBg{

        left: unset;

        right: 0;

    }
    .footerWrap{flex-direction: column;}

    .f1, .f2, .f3{width: 100%;}

    .f2{margin: 32px 0 44px;}

    .f2 h1{font-size: 16px;}

    .f2 ul{margin-top: 24px;}

    .f2 ul li h4, .f2 ul li a{font-size: 14px;}

    .f2 ul li h4{width: 58px;}

    .f1 img{width: 132px;}

    .footerWrap span{font-size: 14px;}

    .f3 ul{

        display: flex;

        justify-content: flex-start;

    }

    .f3 li{

        width: 40px;

        padding: 0;

        border: 0;

    }

    .f3 li a img:first-child{margin-right: 16px; width: 24px;}

    .f3 li a p,.f3 li a img:last-child{display: none;}

    #footer{padding: 50px 20px 40px;}
    .icon_bg{width:40px; height:40px}
    .icon_bg img{
        display: block;
    width: 60%;
    object-fit: contain;
    height: 60%;
    }
}

@media screen and (min-width: 801px){

    .cateList.mobile{display: none;}

    .mobile{display: none!important;}

    #benefits li{height: 420px;}

}

@media screen and (max-width: 800px){

    .pc{display: none!important;}

    :root {

        --margin: 20px;

    }

    .header {

        top: 27px;

    }

    .header ul{

        display: none;

    }

    .header a img{height: 20px;}

    .intro article{

        padding-top: 82px;
        padding-bottom:0;
        

    }

    .intro article p{

        font-size: 18px;

    }

    .intro .date{
    z-index: 2;
    bottom: unset;
    top: 260px;
    left: unset;
    right: 20px
    }

    .intro article h1, .intro .date h1{

        font-size:22px;

    }

    .intro article span{

        font-size: 12px;

        padding: 5px 16px;

        margin: 20px 0 124px;

    }

    .intro img.intro_img1{

        width: 80%;

        left: -20px;

        z-index: 1;
        position:relative;

    }

    .intro_mask1{

        z-index: 0;

        width: 60%;

    }

    .intro_mask3{

        right: 0;

    }

    .title{

        margin-bottom: 24px;

        padding-top: 40px;

    }

    .title > span{

        font-size: 16px;

        margin-bottom: 8px;

    }

    .title > h2{

        font-size: 18px;

    }

    .title .cateBtn{

        position: relative;

        left: 0;

        margin-top: 20px;

    }

    .title .cateBtn li{

        font-size: 16px;

        margin-left: 20px;

        padding-bottom: 6px;

        border-bottom: 2px solid #cacaca;

    }

    .title .cateBtn li.on{

        border-bottom: 2px solid #f15f64;

    }

    .title .cateBtn li:first-child{

        margin-left: 0;

    }

    .cateList.pc{

        display: none;

    }

    .cateList.mobile{

        display: block;

        min-height: 460px;

        position: relative;

    }

    .slick-arrow{

        display: none!important;

    }

    .cateList .cateWrap{

        opacity: 0;

        z-index: -1;

        display: block;

        position: absolute;

        top: 0;

        left: 0;

    }

    .cateList .cateWrap.on{

        opacity: 1;

        z-index: 1;

        display: block;

    }

    .cateList .cateWrap .cateInner{

        padding: 24px 20px 34px;

    }

    .slick-dots{

        display: flex;

        justify-content: center;

        align-items: center;

        margin-top: 20px;

    }

    .slick-dots li{

        width: 8px!important;

        height: 8px!important;

        margin-right: 6px!important;

        background-color: #d1bdb1!important;

        border-radius: 100%;

        cursor: pointer;

    }

    .slick-dots li.slick-active{

        background-color: #5e5350!important;

    }

    .slick-dots li:last-child{

        margin-right: 0!important;

    }

    .slick-dots li button{

        display: block;

        width: 100%;

        height: 100%;

        opacity: 0;

    }

    .slick-slider .slick-list{

        border-radius: 18px;

        background-color: #f5efec;

    }

    .cateTitle{

        font-size: 14px;

        padding: 6px 24px;

        margin-bottom: 20px;

    }

    .cateInnerText h4{

        font-size: 14px;

        margin-bottom: 6px;

    }

    .cateInnerText li{

        font-size: 13px;

        padding-left: 10px;

    }

    .cateInnerText li::before{

        top: 8.5px;

    }

    .devide{

        flex-direction: column;

    }

    .devide > div:first-child{

        padding-right: 0;

    }

    .devide > div{

        width: 100%!important;

    }

    .devide > div:last-child .title{

        padding-top: 60px;

    }

    .devide > div:first-child li,.applyDate p{

        padding-left: 10px;

        font-size: 13px;

        line-height: 20px;

        margin-bottom: 6px;

    }

    .devide div:first-child li::before,.applyDate p::before{

        top: 10px;

    }

    .devide > div:last-child li{

        padding-left: 22px;

        font-size: 13px;

        line-height: 20px;

        margin-bottom: 6px;

    }

    .devide div:last-child li::before{

        width: 14px;

        height: 14px;

        top: 4px;

    }



    .applyDate span{

        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;

    }

    #RecruitmentFair{

        padding-top: 40px;

    }

    .bgText{

        position: relative;

        left: 0;

        top: 0;

        margin-bottom: 12px;

        font-size: 8vw;

    }

    #RecruitmentFair .comment{

        font-size: 13px;

        line-height: 20px;

    }

    .rfWrap .rfInner{

        padding: 14px 0;

    }

    .rfWrap{

        width: 100%;

        margin-top: 36px;

        padding-bottom: 38px;

    }

    .rfWrap .rfInner h3{

        font-size: 16px;

    }

    .rfWrap .rfInner span{

        font-size: 13px

    }

    .rfWrap .rfInner span h4{
        line-height: 1.2;
        font-size: 18px;

    }

    .rfWrap .rfComment{

        font-size: 13px;

    }

    .qrMob{

        padding-bottom: 60px;

    }

    .qrMob span{

        font-size: 13px;

        margin-bottom: 24px;

        display: block;

        text-align: center;

    }

    .qrMob img{

        width: 60%;

        max-width: 240px;

        min-width: 174px;

        margin: 0 auto 40px;

        display: block;

    }

    .qrMob a{

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 15px;

        padding: 10px 0;

        color: #fff;

        background-color: #f15f64;

        border-radius: 24px;

    }

    .interview .comment{

        font-size: 13px;

        line-height: 20px;

        padding-top: 24px;

        padding-bottom: 30px;

    }

    .interview .slideWrap{

        position: relative;

        top: 0;

        left: 0;

        transform: none;

        max-width: unset;

    }

    .interview .slideWrap .slider{

        display: block;

    }

    .interview .slideWrap .slider .slick-list{

        width: 100%;

        min-width: unset;

    }
    
    .interview .slideWrap .slider .slick-dots li{

        display: flex;

        margin: 0;

        padding: 0;

    }

    .interview .slick-slider .slick-list{

        border-radius: 0;

    }

    .interview .slideWrap .slider .slick-dots{

        margin-top: 36px;

        padding-bottom: 60px;

    }

    .interview .slideWrap .slider li span{

        font-size: 11px;

        margin-bottom: 2px;

    }

    .interview .slideWrap .slider li p{

        font-size: 13px;

    }

    .interview .slideWrap .slider li{

        padding: 4px;
        margin: 0 12px;
    }

    .interview .slider img{

        margin-bottom: 12px;

    }

    .bg_interview{

        display: none;

    }

    .b1{padding: 2px;}

    .b2{padding: 16px 16px 20px;}

    #videos{padding-bottom: 60px;}

    #videos .title{margin-bottom: 24px;}

    .videoWrap{width: 100%;}

    .imgTab{display: none;}

    .videoWrap img{display: none;}

    .videoWrap iframe{

        position: relative;

        height: calc((100vw - 40px) * 0.5625);

        bottom: unset;

        display: block;

        margin-bottom: 16px;

    }

    #benefits ul{

        flex-direction: column;

    }

    #benefits li{

        width: 100%;

        margin-right: 0;

        margin-bottom: 10px;

    }

    #benefits li:last-child{

        margin-bottom: 0px;

    }

    #benefits li.on{

        width: 100%;

    }

    .b_s{

        padding: 10px 16px;

        flex-direction: unset;

    }

    .b_s span{

        writing-mode: unset;

        font-size: 14px;

        letter-spacing: 0;

    }

    .icon_bg{

        width: 40px;

        height: 40px;

    }

    .icon_bg img{

        height: 22px;

        width: 22px;

        object-fit: contain;

    }

    .b_r{        

        display: none;

    }

    .b_l{

        padding: 20px 20px 30px;

        align-items:unset;

    }

    .b_l_icon{

        position: absolute;

        width: 25%;

        height: unset;

        object-fit: unset;

        top: 72px;

    }

    .b_l h4, .b_l p{

        text-align: left;

        margin: unset;

    }

    .b_l h4{

        margin-bottom: 30px;

        width: unset!important;

    }

    .b_l p{

        font-size: 14px;

        width: calc(75% - 40px)!important;

        margin-left: calc(25% + 40px);

        display: block;

        min-height: calc(((100vw - 80px) * 0.5625) * 0.50);

    }

    #benefits{padding-bottom: 60px;}

    #benefits .title{margin-bottom:24px}

    #benefits li{

        transition: 0.5s height;

        height: 60px;

    }

    #benefits li.on{

        height: 42vw;

        min-height: 200px;

    }

    #apply{

        background-image: url(../img/recruiter/apply_bg_mob.png);

        background-size: 103%;

    }

    #apply .text_box{padding: 50px 20px 100px 30px;}

    #apply .text_box h1{

        font-size: 16px;

        line-height: 46px;

    }

    #apply .wbtn{margin-top: 10px;}

    .wbtn{width: 180px;}

    .wbtn > *{font-size: 16px;}

    #apply .applyBg{

        left: unset;

        right: 4%;

        width: 35%;

        height: unset;

    }

    .footerWrap{flex-direction: column;}

    .f1, .f2, .f3{width: 100%;}

    .f2{margin: 32px 0 44px;}

    .f2 h1{font-size: 17px;}

    .f2 ul{margin-top: 24px;}

    .f2 ul li h4, .f2 ul li a{font-size: 15px;}

    .f2 ul li h4{width: 58px;}

    .f1 img{width: 132px;}

    .footerWrap span{font-size: 15px;}

    .f3 ul{

        display: flex;

        justify-content: flex-start;

    }

    .f3 li{

        width: 40px;

        padding: 0;

        border: 0;

    }

    .f3 li a img:first-child{margin-right: 16px; width: 24px;}

    .f3 li a p,.f3 li a img:last-child{display: none;}

    #footer{padding: 50px var(--margin) 40px;}

    .process .title{padding-top: 60px;}

    .process .cursors{position: relative;}

    .process .cursors > img.map{

        display: block;

        position: relative;

        width: calc(100% + 40px); 

        left: -20px; 

    }

    .process .cursors > img.character{

        width: 29%;

        right: calc(10.5% - 20px);

        position: absolute;

        bottom: -30px;

    }

    .processText{display: none;}

    .applyDate{width: 100%;}

    .interview .slick-initialized .slick-slide{

        display: flex;
        height: unset;
    }
    .interview .slick-slide > div > div{display: flex!important;}

}

.intro{overflow: hidden;}

.intro_mask1{

    animation-name: example;

    animation-duration: 4s;

    animation-iteration-count: infinite;

}



@keyframes example {

    0%{transform: translateY(0);}

    

    50%  {transform: translateY(5%);}

    

    100% {transform: translateY(0);}

  }

#popup{

    position: fixed;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    z-index: 11;

    display: none;

}

#popup.on{

    display: block;

}

#popup::before{

    display: block;

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    background-color: #1a1a1a;

    opacity: 0.7;

}

#popup .pWrap{

    position: relative;

    top: 50%;

    transform: translateY(-50%);

    width: 66.666%;

    margin: auto;

    height: calc(100% - 240px);

    display: none;

}

#popup .pWrap.on{

    display: flex;

}

.pic{

    width: 320px;

    display: flex;

    justify-content: flex-start;

    padding: 100px 60px 0;

    align-items: center;

    background: #f5efec;

    flex-direction: column;

    box-sizing: border-box;

    border-radius: 10px 0 0 10px;

}

.pic::after{

    content: '';

    display: block;

    background-image: url(../img/recruiter/popup_img.png);

    width: 220px;

    height: 190px;

    position: absolute;

    bottom: 0;

    left: 0;

    background-size: cover;
}

.pic h1{

    margin: 40px 0 16px;

    font-size: 22px;

    color: #f15f64;

}

.pic span{

    font-size: 32px;

    color: #5e5350;

    font-weight: 600;

}

.pic img{

    width: 100%;

    display: block;

    object-fit: contain;

    max-width: 200px;

}

.txt{

    background: #fff;

    color: #5e5350;

    padding: 24px 24px 0 60px;

    box-sizing: border-box;

    border-radius:0 10px 10px 0;

}

.pHeader {

    display: flex;

    justify-content: flex-end;

}

.pHeader img{

    width: 24px;

    display: block;

    object-fit: contain;

    cursor: pointer;

}

.txt{

    width: calc(100% - 320px);

}

.txt .contents{

    padding-right: 40px; 

    margin-top: 25px;

    height: calc(100% - 48px);

    overflow-y: scroll;

}

.txt .contents h1{

    font-size: 18px;

    display: flex;

    align-items: flex-start;

    margin-bottom: 20px;

}

.txt .contents img{

    width: 22px;

    margin-right: 6px;

    margin-top: 5px;

    object-fit: contain;



}

.txt .contents p {

    line-height: 1.63;

    margin-bottom: 40px;

}



@media screen and (max-width:800px) {

    #popup .pWrap.on{

        

    }

    #popup .pWrap{

        width: calc(100% - 40px);

        top: 80px;

        transform: none;

        height: calc(100% - 80px);

        overflow-y: scroll;

        flex-direction: column;

        border-radius: 10px;

        background-color: #f5efec;

    }

    #popup .pWrap::-webkit-scrollbar {

        display: none;

      }

    .pic, .txt{

        width: 100%;

        border-radius: 0;

    }

    .pic{

        position: relative;

        border-radius: 10px 10px 0 0;

        padding: 30px 0 0 0;

    }

    .txt{

        border-radius: 0 0 10px 10px;

    }

    .pHeader{

        position: fixed;

        top: 98px;

        right: 38px;

    }

    .txt .contents{

        overflow-y: unset;

    }

    .pic img{

        width: 160px;

    }

    .pic h1{

        margin: 24px 0 8px;

        font-size: 16px;

    }

    .pic span{

        font-size: 18px;

        margin-bottom: 48px;

    }

    .txt{

        padding:24px 20px 60px;

    }

    .txt .contents{

        margin-top: 0;

        height: unset;

        padding-right: 0;

        margin-bottom: 20px;

    }

    .txt .contents h1{

        font-size: 15px;

    }

    .txt .contents p{

        font-size: 13px;

        margin-bottom: 20px;

    }

    .pic::after{

        width: 108px;

        height: 95.6px;
        background-size: contain;
    }

    

}
.ani{transform: translateY(30px); transition: 1.2s all; opacity: 0;}
.ani2{transform: translateY(30px);}
.active.ani{transform: translateY(0px); opacity: 1;}
@keyframes slideAni {
    0%{transform: translateY(50px); opacity: 0;}   
    100% {transform: translateY(0); opacity: 1;}
  }    
  
  @media screen and (min-width:801px) {
    .cateWrap.on .cateInner:nth-child(1){
        animation-name: slideAni;
        animation-duration: .8s;
    } 
    .cateWrap.on .cateInner:nth-child(2){
        animation-name: slideAni;
        animation-duration: 1.1s;
    } 
    .cateWrap.on .cateInner:nth-child(3){
        animation-name: slideAni;
        animation-duration: 1.4s;
    }   
    
}