@charset "UTF-8";

/* 헤더 */
header { width: 100%; height: auto; position: fixed; left: 0; top: 0; z-index: 300; }
.ionejob-logo { width: 146px; height: 24px; text-indent: -9999px; overflow: hidden; background: url('../../../images/web/main/main4/logo_basic.svg') no-repeat center/contain; float: left; }
.header-bg { content: ''; width: 100%; height: 100px; background-color: rgba(255,255,255,0.92); backdrop-filter: blur(4px); position: absolute; left: 0; top: 0; box-shadow: 2px 3px 8px rgba(177, 204, 239, 0); transition: all 0.3s ease; }
.header-bg.on { content: ''; width: 100%; height: 320px; box-shadow: 2px 3px 8px rgba(177, 204, 239, 0.12); }
.header-wrap { background-color: #fff; padding-top: 40px; padding-bottom: 32px; box-shadow: 2px 3px 8px 0px rgba(177, 204, 239, 0.12); position: relative; }
.h-inner { position: relative; margin: 0 auto; max-width: 1440px; z-index: 5; }


.gnb-wrap { float: left; margin-left: 38px; }
.gnb-wrap nav > ul { display: flex; }
.gnb-wrap nav > ul li { position: relative; }
.gnb-wrap nav > ul li a { display: block; font: var(--gnb-med); padding: 5px 18px 2px 18px; position: relative; z-index: 201; transition: all 0.15s ease; }
.gnb-wrap nav > ul > li > a::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: var(--point-color); position: absolute; left: calc(50% - 3px); top: -12px; opacity: 0; transition: all 0.15s ease; }
.gnb-wrap nav > ul li:hover a { color: var(--main-color); }
.gnb-wrap nav > ul li:hover a::after { opacity: 1; }
.gnb-wrap .dep2-wrap { display: flex; width: 100vw; max-width: 640px; padding-top: 96px; padding-left: 18px; position: absolute; left: 0; top: 0; z-index: 200; display: none; }
.gnb-wrap .dep2-wrap > .dep2-box { width: 164px; padding-right: 48px; }
.gnb-wrap .dep2-wrap > .dep2-box .dep2-tit { font: var(--gnb-med); font-weight: 600; padding-bottom: 12px;  }
.gnb-wrap .dep2-wrap > .dep2-box > ul a { display: block; padding: 6px 0; font: var(--gnb-reg); color: var(--sub-black); transition: all 0.3s ease; }
.gnb-wrap .dep2-wrap > .dep2-box > ul a > span { position: relative; }
.gnb-wrap .dep2-wrap > .dep2-box > ul a > span::after { content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: var(--point-color); position: absolute; right: -6px; top: 2px; opacity: 0; transition: all 0.3s ease; }
.gnb-wrap .dep2-wrap > .dep2-box > ul a:hover { color: var(--main-color); }
.gnb-wrap .dep2-wrap > .dep2-box > ul a:hover > span::after { opacity: 1; }
.gnb-wrap .dep2-wrap.on { display: flex; }

.etc-box { display: flex; float: right; }
.etc-box .login-box { padding-top: 3px; }
.etc-box .login-box ul { display: flex; }
.etc-box .login-box ul > li > a { display: block; padding: 1px 24px 2px 21px; margin-top: 3px; font: var(--gnb-smal); color: var(--sub-key-color); position: relative; border-top:0;}
.etc-box .login-box ul > li > a::before { content: ''; width: 16px; height: 16px; position: absolute; left: 0; top: 0;  }
.etc-box .login-box ul > li > a.login::before { background: url('../../../images/web/main/main4/hd_ico_login.png') no-repeat center/contain; }
.etc-box .login-box ul > li > a.apply-resume::before { background: url('../../../images/web/main/main4/hd_ico_resume.png') no-repeat center/contain; }
.etc-box .login-box ul > li > a.corporate-services::before { background: url('../../../images/web/main/main4/sub_hd_ico_cop.png') no-repeat center/contain; }

.etc-box .srch-wrap { position: relative; }
.etc-box .srch-wrap .frm-box { float: left; }
.etc-box .srch-wrap .frm-box > label { display: block; width: 0; height: 0; text-indent: -9999px; overflow: hidden; }
.etc-box .srch-wrap .frm-box > input[type='text'] { width: 280px; height: 32px; border: 0; padding: 0px 40px 0px 16px; margin-top: -3px; font: var(--gnb-smal); border-radius: 20px; border: 1px solid var(--sub-key-color); }
.etc-box .srch-wrap .btn-box { position: absolute; right:8px; top:50%; transform: translateY(-50%); width: 32px; height: 32px; margin-top: -2px; }
.etc-box .srch-wrap .btn-box > button { display: block; width: 100%; height: 100%; overflow: hidden; text-indent: -9999px; background: url('../../../images/web/main/main4/hd_ico_srch.png') no-repeat center/contain; background-size: 16px; }

/* 모바일 & 햄버튼 */
.mob-ham-btn { display: none; width: 40px; height: 40px; flex-direction: column; align-items: center; justify-content: center; position: absolute; right:20px; top:calc(54% - 20px); cursor: pointer; z-index: 10; }
.mob-ham-btn p { width: 60%; height: 2px; margin: 3px; background: var(--sub-key-color); }
.mob-gnb-menu-wrap { visibility: hidden; width: 100vw; height: 100vh; position: fixed; left:0px; top:0px; background: rgba(0, 0, 0, 0.80); z-index: 400; }
.mob-gnb-menu-wrap.active { visibility: visible; }

.mob-cls-btn { width: 40px; height: 40px; position: relative; position: absolute; right:30px; top:30px; cursor: pointer; }
.mob-cls-btn p { width: 60%; height: 2px; margin: 3px; background: var(--main-black); position: absolute; left:50%; top:50%; transform-origin: center; transform: translate(-50%, -50%) rotate(45deg); }
.mob-cls-btn p:nth-child(2) { transform: translate(-50%, -50%) rotate(135deg); }

.mob-gnb-menu { position: absolute; right:0px; top:0px; width: 85%; max-width: 600px; height: 100%; background: white; padding: 30px; transform: translateX(100%); transition: 0.3s ease-out; }
.mob-gnb-menu-wrap.active .mob-gnb-menu { transform: translateX(0%); }
.mob-gnb-menu .etc-box { float: none; }
.mob-gnb-menu .etc-box .login-box { padding-top: 0px; }
.mob-gnb-menu .etc-box .login-box ul > li > a { line-height: 40px; margin-top: 0px; }
.mob-gnb-menu .etc-box .login-box ul > li > a::before { height: 40px; }

.mob-gnb-wrap { margin-top: 30px; height: 72vh; overflow-y: auto; padding-right: 16px; }
.mob-gnb-wrap::-webkit-scrollbar { width: 3px; }  /* 스크롤바의 너비 */
.mob-gnb-wrap::-webkit-scrollbar-thumb { height: 30%;  background: #E3EFFF; border-radius: 10px; }   /* 스크롤바의 길이, 스크롤바의 색상 */
.mob-gnb-wrap::-webkit-scrollbar-track { background: transparent; }    /*스크롤바 뒷 배경 색상*/
.mob-gnb-wrap > nav > ul > li > a { font: var(--h3-tit); }
.mob-gnb-wrap > nav > ul > li { margin-bottom: 36px; position: relative; }
.mob-gnb-wrap > nav > ul > li::after { content: ''; display: block; width:16px; height: 16px; background: url('../../../images/web/main/main4/sub_arrow_menu_drop_down.png') no-repeat center/contain; position: absolute; right:0px; top:2px;  transition: 0.3s ease-out; }
.mob-gnb-wrap > nav > ul > li.open::after { transform: rotate(-180deg); }
.mob-gnb-wrap .dep2-wrap { display: none; margin-top: 16px; padding:24px 24px 24px; background: var(--bg-color1); border-radius: 8px; }
.mob-gnb-wrap .dep2-tit { padding-top: 24px; font: var(--h4-tit); padding-bottom: 12px; }
.mob-gnb-wrap .dep2-box:first-child .dep2-tit { padding-top: 0px; }
.mob-gnb-wrap .dep2-box > ul > li { margin-top: 12px; font-size: 14px; padding-left: 6px; position: relative; }
.mob-gnb-wrap .dep2-box > ul > li:first-child { margin-top: 0px; }
.mob-gnb-wrap .dep2-box > ul > li::before { content: ''; display: block; width: 2px; height: 2px; border-radius: 5px; background: var(--bd-color1); position: absolute; left:0px; top:6px; }


/* 퀵메뉴 */
#qck_box { width:100%; max-width: 1500px; height: 100vh; position: fixed; top:0px; left:50%; transform: translateX(-50%); z-index: 2; pointer-events: none; }
.qck-wrap { max-width: 96px; position: fixed; bottom: 4%; right: 60px; z-index: 200; opacity: 0.8; transition: all 0.5s ease; pointer-events: initial; }
.qck-wrap.scroll-on { bottom: 8%; opacity: 1; }
.qck-wrap .qck-menu > ul { position: relative; margin-bottom: 20px; }
.qck-wrap .qck-menu > ul::after { content: ''; width: 1px; height: 100%; overflow: hidden; background: url('../../../images/web/main/main4/qck_dashed.png') repeat-y center/contain; position: absolute; left: 15px; top: 0; z-index: -1; }
.qck-wrap .qck-menu > ul li { margin-bottom: 20px; }
.qck-wrap .qck-menu > ul li a { display: flex; align-items: center; width: 100%; }
.qck-wrap .qck-menu > ul li a .ico-box { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background-color: var(--main-color); margin-right: 8px; box-sizing:border-box;}
.qck-wrap .qck-menu > ul li a .txt-box { width: calc(100% - 38px); font: 500 13px/110% 'Pretendard'; }

.qck-wrap .qck-chat { width: 96px; height: 96px; text-indent: -9999px; overflow: hidden; border-radius: 50%; border: 1px solid var(--bd-color1); background: url('../../../images/web/main/main4/qck_ico_chatbot.png') no-repeat center/contain; box-shadow: 2px 3px 8px 0px rgba(177, 204, 239, 0.12); cursor: pointer; }

/* 메인 */
.contents-wrap { min-height: 60vh; padding-top: 101px; display: block; }


/* 관련사이트 */
.rel-site-wrap { max-width: 1280px; margin-top: 96px; margin-bottom: 24px; }
.rel-site-wrap h3 { width: 162px; line-height: 64px; float: left; }
.rel-site-wrap .rel-site-box  { width: calc(100% - 162px); height: 64px; border-radius: 8px; background-color: var(--bg-color1); padding: 0 64px; float: left; position: relative; }
.rel-site-wrap .rel-site { width: 100%; height: 64px; }
.rel-site-wrap .rel-site li { width: fit-content; }
.rel-site-wrap .rel-site a { display: block; position: relative; }
.rel-site-wrap .rel-site a > span { display: block; width: 0; height: 0; text-indent: -9999px; }
.rel-site-wrap .rel-site a > img { width: max-content; height: 64px; }

.rel-site-wrap .swiper-control { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.rel-site-wrap .swiper-control .swiper-arrow { width: 20px; height: 20px; background: url('../../../images/web/main/main4/ft_arr_prev.png') no-repeat center/contain; position: absolute; margin-top: 0; left: 16px; top: calc(50% - 10px); }
.rel-site-wrap .swiper-control .swiper-arrow.swiper-button-next { background: url('../../../images/web/main/main4/ft_arr_next.png') no-repeat center/contain; left: auto; right: 16px; }

@media screen and (max-width:1024px){
	.rel-site-wrap h3 { width: 120px; }
	.rel-site-wrap .rel-site-box { width: calc(100% - 120px); padding: 0 24px; }
}
@media screen and (max-width:768px){
	.rel-site-wrap { margin-top: 48px; }
	.rel-site-wrap h3 { width: 80px; font-size: 15px; float: unset; line-height: 100%; margin-bottom: 10px; }
	.rel-site-wrap .rel-site-box { width: 100%; padding: 0 24px; }
	.rel-site-wrap .swiper-control .swiper-arrow { left: 4px; }
	.rel-site-wrap .swiper-control .swiper-arrow.swiper-button-next { right: 4px; }
}


/* 푸터 */
.footer-wrap { max-width: 1280px; }
.footer-wrap .ft-top { display: flex; justify-content: space-between; padding-bottom: 24px; }
.footer-wrap .ft-top .ft-gnb > ul { display: flex; }
.footer-wrap .ft-top .ft-gnb > ul a { display: block; padding: 25px 60px 24px 0; font: var(--smal15-500); }
.footer-wrap .ft-top .ft-gnb > ul > li:nth-child(2) a { font-weight: 600; }
.footer-wrap .ft-top .top-btn > button { display: block; width: 64px; height: 64px; border-radius: 8px; padding-top: 10px; background-color: var(--main-color); color: #fff; font: var(--ft-tit); position: relative; }
.footer-wrap .ft-top .top-btn > button::before { content: ''; width: 24px; height: 24px; background: url('../../../images/web/main/main4/ft_arr_up.png') no-repeat center/contain; position: absolute; left: calc(50% - 12px); top: 9px; transition: all 0.3s ease; }
.footer-wrap .ft-top .top-btn > button:hover::before { top: 6px; }

.footer-wrap .ft-btm .ft-logo-box { width: 30%; max-width: 216px; float: left; }
.footer-wrap .ft-btm .ft-logo-box > img { max-width: 142px; }

.footer-wrap .ft-btm .ft-info-box { width: 640px; padding-bottom: 24px; float: left; }
.footer-wrap .ft-btm .ft-info-box .ft-info > p { font: var(--ft-txt); color: var(--sub-black); padding-right: 15px; margin-right: 15px; margin-bottom: 8px; position: relative; float: left; }
.footer-wrap .ft-btm .ft-info-box .ft-info > p::after { content: ''; width: 1px; height: 12px; background-color: var(--sub-black); position: absolute; right: 0; top: 1px; }
.footer-wrap .ft-btm .ft-info-box .ft-info > p:nth-child(3):after,
.footer-wrap .ft-btm .ft-info-box .ft-info > p:nth-child(6):after { display: none; }
.footer-wrap .ft-btm .ft-info-box .ft-info > p > b { font-weight: 600; margin-right: 4px; }
.footer-wrap .ft-btm .ft-info-box .copy { font: var(--txt-mini); color: var(--sub-black); margin-top: 20px; }

.footer-wrap .ft-btm .ft-cust-box { display: flex; align-items: center; float: right; }
.footer-wrap .ft-btm .ft-cust-box > span { display: inline-block; font: var(--smal15-500); line-height: 28px; }
.footer-wrap .ft-btm .ft-cust-box span.cust-num { margin-left: 16px; font: var(--h3-tit); color: var(--main-color); line-height: 28px; }


@media screen and (max-width:1600px){
	header .ionejob-logo { width: 120px; }
	.gnb-wrap { margin-left: 20px; }
	.gnb-wrap nav > ul li a { padding: 5px 9px 2px 9px; }
	.etc-box .srch-wrap .frm-box > input[type='text'] { width: 200px; }

	.footer-wrap .ft-btm .ft-logo-box { max-width: 150px; }
	.footer-wrap .ft-btm .ft-logo-box > img { width: 120px; }

	.qck-menu { display: none; }
	.qck-wrap { right:20px; bottom:2%; }
	.qck-wrap .qck-chat { width: 66px; height: 66px; }
	.qck-wrap.scroll-on { bottom: 3%; }
	.footer-wrap .ft-btm .ft-cust-box { width: calc(100% - 790px); flex-wrap: wrap; max-width: 220px; margin-top: -3px; }
	.footer-wrap .ft-btm .ft-cust-box span.cust-num { margin-left: 0px; }
}

@media screen and (max-width:1200px){
	.frm-box { display: none; }
	.etc-box .srch-wrap .btn-box { position: initial; transform: none; }
	.footer-wrap .ft-btm .ft-cust-box { flex-wrap:wrap; }
}

@media screen and (max-width:1024px){
	.gnb-wrap { display: none; }
	.header-bg { display: none; }
	.mob-ham-btn { display: flex; }
	.header-wrap { padding-top: 30px; padding-bottom: 22px; }
	.contents-wrap { padding-top: 84px; }
	.etc-box { padding-right: 50px; }

	.footer-wrap .ft-top .ft-gnb > ul a { padding: 15px 40px 14px 0; }
	.footer-wrap .ft-top .top-btn > button { width:50px; height:50px; }
	.footer-wrap .ft-top .top-btn > button::before { top:3px }
	.footer-wrap .ft-btm .ft-logo-box { width: 100%; max-width: none; margin-bottom: 20px; }
	.footer-wrap .ft-btm .ft-info-box { width: 100%; max-width: 640px; }
	.footer-wrap .ft-btm .ft-cust-box { width: 100%; max-width: none; margin-bottom: 30px; }
	.footer-wrap .ft-btm .ft-cust-box span.cust-num { margin-left: 20px; }
}

@media screen and (max-width:768px){
	header .ionejob-logo { width: 100px; }
	.h-inner { width:100%; padding: 0 20px; }
	.header-wrap { padding-top: 20px; padding-bottom: 16px; }
	.contents-wrap { padding-top: 74px ; }
	.mob-gnb-menu { padding: 24px; }
	.mob-gnb-menu .etc-box .login-box ul { flex-wrap: wrap; }

	.footer-wrap .ft-top .ft-gnb > ul a { padding: 15px 10px 14px 0; }
	.footer-wrap .ft-btm .ft-info-box .ft-info > p::after { display: none; }
}
@media screen and (max-width:500px){
	.header-wrap .etc-box .login-box { display: none; }
}
@media screen and (max-width:400px){
	.footer-wrap .ft-top { display: block; position: relative; }
	.footer-wrap .ft-top .ft-gnb { width: 100%; }
	.footer-wrap .ft-top .ft-gnb > ul a { display: block; padding: 15px 20px 14px 0; letter-spacing: -0.5px; }
	.top-btn { position: absolute; right: 0; bottom: -45px; }
}

/* 공고리스트 */
.comp-grid-wrap { max-width: 1280px; }
.comp-grid-wrap > ul { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 256px); gap: 20px 24px; }
.comp-grid-wrap > ul > li { width: 100%; height: 100%; }
.comp-grid-wrap .sugg-com-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; height: 100%; border-radius: 16px; border: 1px solid var(--bd-color1); background-color: #fff; overflow: hidden; padding: 40px 16px 24px; position: relative; transition: all 0.3s ease; }
.comp-grid-wrap .sugg-com-box:hover { transform: translateY(-3px); box-shadow: 2px 3px 6px rgba(177, 204, 239, 0.12); }
.comp-grid-wrap .sugg-com-box::before { content: ''; width: 100%; height: 4px; background-color: #EAF2FD; transition: all 0.3s ease; position: absolute; left: 0; top: 0; }
.comp-grid-wrap .sugg-com-box:hover::before { background-color: var(--bd-color1); }
.comp-grid-wrap .sugg-com-box .resume_tit { width: 100%; }/*2024.07*/
.comp-grid-wrap .sugg-com-box .img-box { width: 100%; max-width: 192px; height: 32px; margin-bottom: 40px; }
.comp-grid-wrap .sugg-com-box .img-box > img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.comp-grid-wrap .sugg-com-box .com-name { font: var(--ft-tit); color: var(--sub-black); margin-bottom: 6px; }
.comp-grid-wrap .sugg-com-box .com-txt { width: 100%; height: 48px; font: var(--thumb-tit); word-break: break-word; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 30px; }
.comp-grid-wrap .sugg-com-box .my-fix { width: 20px; height: 20px; text-indent: -9999px; overflow: hidden; background: url('../../../images/web/main/main4/comm_ico_star_emt.svg') no-repeat center/contain; }
.comp-grid-wrap .sugg-com-box .my-fix.fix-on { background: url('../../../images/web/main/main4/comm_ico_star_fill.svg') no-repeat center/contain; }
.comp-grid-wrap .sugg-com-box > div { display: flex; align-items: center; gap: 0 5px; }
.comp-grid-wrap .sugg-com-box .career { font-size: 14px; color: var(--sub-black); }
.comp-grid-wrap .sugg-com-box .dday { display: block; padding: 4px 9px 2px; border-radius: 15px; border: 1px solid var(--point-color); font: var(--txt-mini); color: var(--point-color); }

@media screen and (max-width:1200px){
    .comp-grid-wrap > ul { grid-template-columns: repeat(4, 1fr) }
}
@media screen and (max-width:1024px){
    .comp-grid-wrap > ul { grid-template-columns: repeat(3, 1fr) }
	.comp-grid-wrap .sugg-com-box .com-txt { height: 43px; }
}
@media screen and (max-width:768px){
    .comp-grid-wrap > ul { grid-template-columns: repeat(2, 1fr); gap: 8px; grid-template-rows: repeat(2, 206px); }
	.comp-grid-wrap .sugg-com-box { padding: 32px 16px 16px; border-radius: 8px; }
	.comp-grid-wrap .sugg-com-box .img-box { height: 26px; margin-bottom: 20px; }
	.comp-grid-wrap .sugg-com-box .com-txt { margin-bottom: 16px; height: 42px; }
}