/* 서브페이지 메인 - 공통설정 */
body {position: relative; z-index: -999;}
section h3 {font-size: 2.2rem; font-weight: 500; color: #3e8eac;}
section h2 {font-size: 4.2rem; font-weight: 700; margin-top: 10px;}
section p {font-size: 1.6rem; font-weight: 500; color: #333;}
section h4 {font-size: 2.4rem; font-weight: 700;}

.header_bottom {background: url(images/sub04/header_bg.png) no-repeat center / cover;}
/*  */

/* section01 - 인재채용 (슬로건)*/
#Recruit {}
#Recruit .tit_box {margin-top: 200px;}
.slogun {height: 553px; position: relative; align-content: center; margin: 60px 0;}
.slogun .bg {width: 100%; height: 553px; background: url(images/sub04/section01_bg.png) no-repeat center / cover; filter: brightness(0.5); 
    position: absolute; top: 0; z-index: -1;}
.slogun_color {color: #7ccdec;}
.slogun p {font-size: 6.2rem; font-weight: 700; color: #fff; text-align: center;}
/* 인재상 */
.talent ul {width: 25%; height: 100%; padding: 10px;} 
.talent .img_box {text-align: center; margin: 0 auto; position: relative; border: 3px dotted #7ccdec; border-radius: 100%; width: 260px; height: 257px;}
.talent .img_box a:hover {filter: brightness(0.6); transition: all .5s;}
.talent .text_box {height: 50%; border-radius: 100%; padding: 0 30px 0 30px; text-align: center;}
.talent .text_box h4 {margin-bottom: 20px;}
/* 이미지 */
.talent01 .img_box a {width: 250px; height: 250px; background: url(images/sub04/talent01.png) no-repeat center / cover; border: 1px dotted #d1d1d1;
border-radius: 100%; box-shadow: 2px 4px 3px rgba(0, 0, 0, 0.1);}
.talent02 .img_box a {width: 250px; height: 250px; background: url(images/sub04/talent02.png) no-repeat center / contain; border: 1px dotted #d1d1d1;
border-radius: 100%; box-shadow: 2px 4px 3px rgba(0, 0, 0, 0.1);}
.talent03 .img_box a {width: 250px; height: 250px; background: url(images/sub04/talent03.png) no-repeat center / contain; border: 1px dotted #d1d1d1;
border-radius: 100%; box-shadow: 2px 4px 3px rgba(0, 0, 0, 0.1);}
.talent04 .img_box a {width: 250px; height: 250px; background: url(images/sub04/talent04.png) no-repeat center / contain; border: 1px dotted #d1d1d1;
border-radius: 100%; box-shadow: 2px 4px 3px rgba(0, 0, 0, 0.1);}
/* 아이콘 */
.talent01 .text_box a {display: inline-block; width: 45px; height: 45px; background: url(images/sub04/icon01.png) no-repeat center / contain; margin: 35px 0 30px 0;}
.talent02 .text_box a {display: inline-block; width: 45px; height: 45px; background: url(images/sub04/icon02-1.png) no-repeat center / contain; margin: 35px 0 30px 0;}
.talent03 .text_box a {display: inline-block; width: 45px; height: 45px; background: url(images/sub04/icon03.png) no-repeat center / contain; margin: 35px 0 30px 0;}
.talent04 .text_box a {display: inline-block; width: 45px; height: 45px; background: url(images/sub04/icon04.png) no-repeat center / contain; margin: 35px 0 30px 0;}
/* 에니메이션 */
.talent01:hover:after {content: ""; display: inline-block; background: url(images/sub04/Ellipse.png) no-repeat; width: 200px; height: 200px; position: absolute; left: 60px; top: 40px;
    animation: circleAni 2s linear reverse infinite; z-index: -1;}
.talent02:hover::after {content: ""; display: inline-block; background: url(images/sub04/Ellipse.png) no-repeat; width: 200px; height: 200px; position: absolute; left: 60px; top: 40px; 
    animation: circleAni 2s linear infinite; z-index: -1;}
.talent03:hover::after {content: ""; display: inline-block; background: url(images/sub04/Ellipse.png) no-repeat; width: 200px; height: 200px; position: absolute; left: 60px; top: 40px;
    animation: circleAni 2s linear reverse infinite; z-index: -1;}
.talent04:hover::after {content: ""; display: inline-block; background: url(images/sub04/Ellipse.png) no-repeat; width: 200px; height: 200px; position: absolute; left: 60px; top: 40px; 
    animation: circleAni 2s linear infinite; z-index: -1;}
@keyframes circleAni {
    0% {rotate: 0; opacity: 0.5;}
    100% {rotate: 360deg; opacity: 1;}
}

/* section02 - 채용절차 */
#Procedures {margin-top: 200px; margin-bottom: 200px;}
.steps_wrap {margin-top: 100px; margin-bottom: 50px; display: flex; align-content: center; justify-content: space-around;}
#step_tit {position: relative; height: 292px; width: 291px; background: #1a729a; border-radius: 100%;
border: 25px solid #c7e7f6; text-align: center; align-content: center; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);}
#step_tit li {color: #fff;}
.steps {text-align: center; align-content: center; position: relative;}
.steps p:first-child {color: #3e8eac;}
.steps p:last-child {color: #3e8eac; font-size: 1.8rem; font-weight: 700;}
.steps li {width: 250px; height: 246px; background: #fff; border-radius: 100%; border: 3px solid #c7e7f6;
align-content: center; display: inline-block; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); transition: all 1s;}
.steps i {display: inline-block; font-size: 1.4rem; color: #c7e7f6; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.step_4 i {display: none;}
.step_1 {position: relative; right: -150px; z-index: 3;}
.step_2 {position: relative; right: -100px; z-index: 2;}
.step_3 {position: relative; right: -50px; z-index: 1;}
.step_4 {position: relative; right: 0;}
#Procedures .text_box {line-height: 30px; display: flex; justify-content: end;}
#Procedures .text_box .bg {width: 863px; background: url(images/sub04/textbox_bg.png) no-repeat; padding: 30px 0;
display: flex; justify-content: space-around; align-content: end;}
#Procedures .text_box h4 {font-size: 1.6rem; margin: 20px 0 10px 0;}
#Procedures .text_box li {font-size: 1.4rem;}
#Procedures .text_box .text_left {align-content: center;}
#Procedures .text_box .text_right {align-content: center;}

/* section03 - 복지 */
#Welfare {margin: 150px 0;}
.scroll_wrap {height: 480px; max-width: 1300px; margin: 0 auto; margin-top: 60px;}
.scroll_box {overflow-x: scroll;}
.scroll_box::-webkit-scrollbar {width: 100%; height: 10px;}
.scroll_box::-webkit-scrollbar-thumb {background-color: #2992c2; border-radius: 50px;}
.scroll_box::-webkit-scrollbar-track {background-color: #d1d1d1;}
.scroll_box li {width: 340px; height: 460px; margin-right: 40px;}
.scroll_box li a {border-radius: 5px;}
.scroll_box li a:hover {transform: scale(1.03); filter: brightness(0.7);}
.scroll_box p {font-size: 2.0rem; font-weight: 700; margin-top: 30px;}
.icon_box {width: 100%; margin-top: 100px;}
.icon_box ul {width: 100%; height: 50%; margin-right: 20px; }
.icon_box ul li {width: 50%; border: 1px solid #f1f1f1; border-radius: 10px; padding: 50px 40px; align-content: center; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); line-height: 30px; transition: 1s;}
.icon_box ul li h3 {font-size: 2.4rem; margin: 10px 0 20px 0; color: #333; font-weight: 600;}
.icon_box ul li p {width: 55%;}
.icon_box02 {margin-top: 40px;}
.talent01 {margin-right: 10px;}
.icon01, .icon03 {margin-right: 30px;}
/* 이미지 */
.scroll_item01 a {width: 300px; height: 360px; background: url(images/sub04/scroll01.png) no-repeat;}
.scroll_item02 a {width: 300px; height: 360px; background: url(images/sub04/scroll02.png) no-repeat;}
.scroll_item03 a {width: 300px; height: 360px; background: url(images/sub04/scroll03.png) no-repeat;}
.scroll_item04 a {width: 300px; height: 360px; background: url(images/sub04/scroll04.png) no-repeat;}
.scroll_item05 a {width: 300px; height: 360px; background: url(images/sub04/scroll05.png) no-repeat;}
/* 아이콘 */
.icon_box .icon01 a {display: inline-block; background: url(images/sub04/food.png) no-repeat center / contain; width: 64px; height: 70px;}
.icon_box .icon02 a {display: inline-block; background: url(images/sub04/kids.png) no-repeat center / contain; width: 64px; height: 70px;}
.icon_box .icon03 a {display: inline-block; background: url(images/sub04/bus.png) no-repeat center / contain; width: 64px; height: 70px;}
.icon_box .icon04 a {display: inline-block; background: url(images/sub04/cafe.png) no-repeat center / contain; width: 64px; height: 70px;}




/* 반응형 */
@media screen and (max-width: 1300px) {
    #Recruit .tit_box {padding: 0 20px;}
    .talent {padding: 0 20px;}
    #Procedures {padding: 0 20px;}
    #Welfare {padding: 0 20px;}
    .talent {flex-wrap: wrap;}
    .talent ul {width: 48%; border: 1px solid #f1f1f1; padding: 20px 0; border-radius: 10px; margin-bottom: 50px;}
    .talent ul:hover::after {display: none;}
    .step_1 {position: static;}
    .step_2 {position: static;}
    .step_3 {position: static;}
    .step_4 {position: static;}
    .steps li {width: 200px; height: 200px;}
    .steps i {display: none;}
    .icon_box ul li p {width: 100%;}
}

@media screen and (max-width: 1200px) {
    #step_tit {height: 220px; width: 220px;}
    .steps li {width: 180px; height: 180px;}
    #Procedures .text_box .bg {width: 100%; background-size: cover; justify-content: space-evenly;}
}


@media screen and (max-width: 1000px) {
    .slogun p {font-size: 4.8rem;}
    .steps_wrap {display: block;}
    #step_tit {margin: 0 auto; margin-bottom: 40px;}
}   

@media screen and (max-width: 955px) {
    section h3 {font-size: 1.8rem;}
    section h2 {font-size: 3.2rem;}
    .slogun .bg {background-position: 40%;}
    #Procedures .text_box .text_left {margin-right: 10px;}
}

@media screen and (max-width: 800px) {
    .slogun p {font-size: 3.8rem;}

    .steps_wrap {margin-top: 60px;}
    .steps {width: 70%; margin: 0 auto;}
    .steps li {margin: 10px;}
    #Procedures .text_box .bg {padding: 20px 10px; display: block;}
    .icon_box ul li {padding: 40px 20px; text-align: center;}
}


@media screen and (max-width: 650px) {
    section h3 {font-size: 1.6rem;}
    section h2 {font-size: 2.6rem;}

    #Recruit .tit_box {margin-top: 100px;}
    .slogun p {font-size: 2.8rem;}
    .talent ul {width: 100%;}
    .talent .text_box {padding: 0;}
    #Procedures {margin: 0;}
    .steps {width: 100%; margin: 0;}
    #Welfare {margin-top: 50px;}
    .icon01, .icon03 {margin-right: 20px;}

}

@media screen and (max-width: 550px) {
    .icon_box ul li {padding: 20px 0px;}
    .icon_box ul li p {padding: 0 10px; font-size: 1.4rem;}
}

@media screen and (max-width: 500px) {
    section h4 {font-size: 1.8rem;}

    .steps p:last-child {font-size: 1.6rem;}
    .icon_box ul li a {width: 50px; height: 50px;}
    .icon_box ul li h3 {font-size: 2.2rem;}
    .scroll_box p {font-size: 1.8rem;}
}

@media screen and (max-width: 450px) {
    .slogun p {font-size: 2.2rem;}

    #step_tit {width: 200px; height: 200px;}
    .steps li {width: 150px; height: 150px;}
    #Procedures .text_box li {font-size: 1.2rem;}
    .icon_box ul li p {font-size: 1.2rem; text-align: justify;}
    .icon_box .icon01 > p{text-align: center;}
    
}