@charset "utf-8";

/* =========================== PAGE */
/* 공통 */
.pagecommon{position:relative;font-size:16px;letter-spacing:-.3px;text-align:center;color:#777;line-height:1.8}
.pagecommon *{word-break:keep-all}
.pagecommon .pl{white-space:pre-line}
.pagecommon .tit p{margin-bottom:25px;font-size:45px;font-weight:700;line-height:1.4;color:#111;font-family:'Poppins', 'Pretendard'}
.pagecommon .c_1{color:var(--primary)}
.pagecommon .c_2{color:var(--second)}
.pagecommon .inner{max-width:1300px;margin:0 auto;padding:150px 0}

#recruit1003 .box1 .moto{display:flex;justify-content:space-between;padding-top:130px;font-size:18px;font-weight:500;color:#fff}
#recruit1003 .box1 .moto li{display:flex;flex-wrap:wrap;align-content:center;height:215px}
#recruit1003 .box1 .moto p{width:100%;font-size:20px;font-weight:700;font-family:'Poppins'}
#recruit1003 .box1 .moto .b_1{justify-content:flex-start;width:500px;padding-left:70px;border-radius:0 120px 120px 0;background:var(--primary)}
#recruit1003 .box1 .moto .b_1 p{text-align:left}
#recruit1003 .box1 .moto .b_2{position:relative;justify-content:center;width:215px;height:215px;border-radius:50%;background:var(--second)}
#recruit1003 .box1 .moto .b_2:after{position:absolute;content:'';z-index:-1;right:-50px;width:215px;height:215px;border-radius:50%;opacity:.2;background:var(--second)}
#recruit1003 .box1 .moto .b_3{justify-content:flex-end;width:350px;padding-right:70px;border-radius:120px 0 0 120px;text-align:right;background:#FAB12F}
#recruit1003 .box1 .moto .b_3 p{text-align:right}
#recruit1003 .box1 .flow-text{display:flex;padding:5px 0;font-size:25px;font-weight:300;color:#fff;white-space:nowrap;overflow:hidden;background:#fa4032;font-family:'Poppins'}
#recruit1003 .box1 .flow-wrap{animation:textLoop 10s linear infinite;padding-right:20px}
@keyframes textLoop{0%{transform:translate3d(0, 0, 0)}100%{transform:translate3d(-100%, 0, 0)}}

#recruit1003 .box2 .tit span{display:inline-block;padding:10px 30px;border-radius:50px;font-size:20px;font-weight:700;color:#fff;background:#111}
#recruit1003 .box2 .emj{display:flex;flex-wrap:wrap;justify-content:center;padding:130px 0}
#recruit1003 .box2 .emj li{display:flex;justify-content:center;align-items:center;width:175px;height:175px;margin-left:-30px;border-radius:50%}
#recruit1003 .box2 .emj .b_1{gap:50px;width:400px;border-radius:100px;background:var(--primary)}
#recruit1003 .box2 .emj .b_2{z-index:-1;background:#FEF3E2}
#recruit1003 .box2 .emj .b_3{background:var(--second)}
#recruit1003 .box2 .step_wrap{position:relative}
#recruit1003 .box2 .step_wrap .active{position:absolute;top:0;left:0;height:2px;transition:all .4s;background:var(--second)}
#recruit1003 .box2 .step{display:grid;grid-template-columns:repeat(3,1fr);padding-top:40px;border-top:2px solid #e1e1e1}
#recruit1003 .box2 .step p{margin-bottom:20px;font-size:25px;font-weight:700;color:#111}
#recruit1003 .box2 .step a{display:flex;align-items:center;justify-content:center;width:200px;margin:0 auto;padding:10px 0;border-radius:50px;font-size:18px;font-weight:500;color:#fff;background:#FAB12F;transition:all .3s}
#recruit1003 .box2 .step a:hover{background:var(--second)}
#recruit1003 .box2 .step a svg{margin-left:10px}

#recruit1003 .box3{background:#f2f2f2}
#recruit1003 .box3 .inner{padding:100px 0}
#recruit1003 .box3 ul{display:grid;grid-template-columns:repeat(2,1fr);gap:50px}
#recruit1003 .box3 ul li{display:flex;align-items:center;justify-content:space-between;padding:50px;border-radius:10px;text-align:left;background:#fff;transition:all .3s}
#recruit1003 .box3 p{margin-bottom:20px;font-size:25px;font-weight:700;line-height:1.3;color:#111}
#recruit1003 .box3 a{font-size:18px;font-weight:700;color:#FAB12F;transition:all .3s}
#recruit1003 .box3 .bg{padding:20px;border-radius:10px;background:#f2f2f2}

@media(hover:hover){
#recruit1003 .box3 ul li:hover{transform:translateY(-10px)}
#recruit1003 .box3 a:hover{padding-left:10px}
}

@media(max-width:1024px){
.pagecommon .tit p{font-size:35px}
.pagecommon .inner{padding:100px 0}

#recruit1003 .box1 .moto{flex-wrap:wrap;justify-content:center;padding-top:90px}
#recruit1003 .box1 .moto li{justify-content:center !important;padding-left:0 !important;padding-right:0 !important;border-radius:120px !important}
#recruit1003 .box1 .moto li p{text-align:center !important}

#recruit1003 .box2 .step p{margin-bottom:30px;font-size:20px}
#recruit1003 .box2 .step a{font-size:16px}
#recruit1003 .box3 .inner{padding:70px 15px}

#recruit1003 .box3 p{font-size:20px}
#recruit1003 .box3 ul{gap:25px}
#recruit1003 .box3 ul li{padding:30px}
#recruit1003 .box3 a{font-size:16px}
}
@media(max-width:768px){
.pagecommon .tit p{font-size:30px}

#recruit1003 .box1 .flow-text{font-size:18px}

#recruit1003 .box2 .tit span{font-size:16px}
#recruit1003 .box2 .emj{margin-bottom:60px;padding:90px 0;border-bottom:1px dashed #e1e1e1}
#recruit1003 .box2 .emj li{width:140px;height:140px}
#recruit1003 .box2 .emj li img{width:85px}
#recruit1003 .box2 .emj .b_1{width:350px;gap:30px}
#recruit1003 .box2 .step_wrap .active{display:none}
#recruit1003 .box2 .step{padding:0 15px 0;border-top:none;grid-template-columns:repeat(2,1fr);gap:55px}
#recruit1003 .box2 .step p{font-size:18px}

#recruit1003 .box3 p{margin-bottom:10px;font-size:18px}
#recruit1003 .box3 ul li{display:block;text-align:center}
#recruit1003 .box3 .bg{width:100px;margin:10px auto 0}
#recruit1003 .box3 .bg img{width:50px}
#recruit1003 .box3 a{font-size:14px}
}
@media(max-width:565px){
.pagecommon{font-size:14px}
.pagecommon .pl{white-space:normal}
.pagecommon .inner{padding:70px 0}
.pagecommon .tit p{margin-bottom:10px;padding:0 10px;font-size:25px}

#recruit1003 .box1 .moto{padding:55px 15px 0;font-size:15px}
#recruit1003 .box1 .moto li{width:100% !important;height:100px !important}
#recruit1003 .box1 .moto p{font-size:18px}
#recruit1003 .box1 .moto .b_2:after{display:none}

#recruit1003 .box2 .tit span{font-size:14px}
#recruit1003 .box2 .emj{padding:60px 0}
#recruit1003 .box2 .emj li{width:100px;height:100px;margin-left:0}
#recruit1003 .box2 .emj li img{width:65px}
#recruit1003 .box2 .emj .b_1{width:245px}
#recruit1003 .box2 .step{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
#recruit1003 .box2 .step li{width:100%;padding:20px;border:1px solid #e1e1e1;border-radius:10px}
#recruit1003 .box2 .step p{margin-bottom:5px}
#recruit1003 .box2 .step a{width:150px;font-size:14px}

#recruit1003 .box3 .inner{padding:40px 15px}
#recruit1003 .box3 ul{display:block}
#recruit1003 .box3 ul li+li{margin-top:10px}
}
@media(max-width:450px){
#recruit1003 .box2 .emj .b_1{width:175px;gap:10px}
#recruit1003 .box2 .emj li{width:85px;height:85px}
#recruit1003 .box2 .emj li img{width:55px}
#recruit1003 .box3 p{margin-bottom:0}
}