@charset "utf-8";

.main {}

.main .visual {height:600px; background:#0A0F22; position:relative;}
.main .visual img {width:100%; height:100%; object-fit:cover;}
.main .visual video {width:100%; height:100%; object-fit:cover; opacity:.6;}
.main .visual-wrap {margin-top:50px; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:absolute; left:0;top:0;  z-index:9;}
.main .visual-wrap h2 {color: #FFF;font-size:var(--fs64);font-weight: 700;line-height: 120%; letter-spacing: -1.92px;}
.main .visual-wrap h3 {padding:50px 0 20px; color:var(--base2); font-size:var(--fs24); font-weight:700;line-height: 120%; font-family:'inter';}
.main .visual-wrap p {font-weight: 600;line-height: 120%; color:#fff;}


/* 리스트 */
.main-recruit {padding:100px 0; background: var(--bg1); position:relative;}
.main-recruit .deco {left:0; top:0; position:absolute;}
.main-recruit-wrap {position: relative;}
.main-recruit-wrap + .main-recruit-wrap {margin-top:70px !important;}
.main-recruit-tit {padding:0 0 20px; text-align:center;}
.main-recruit-tit h3 {color:#000; font-size: var(--fs30);font-weight: 700;line-height: normal;}
.special h3 {color: var(--base1);}
.main-recruit-tit p {padding:5px 0 0; color: #666;font-weight: 400;line-height: 120%;}


.recruitList {}
.recruitList-tit {text-align: center;}
.recruitList-tit h3 {color: var(--base1);font-size:var(--fs40);font-weight: 700;line-height: normal;}
.recruitList-tit p {padding:10px 0 0; color: #666;font-weight: 400;line-height: 120%;}

.recruitList-search {padding:50px 0 40px;}
.recruitList-search .inputWrap {display:flex; gap:5px;}
.recruitList-search .inputWrap>* {background-color:#fff; border-radius:10px; border:1px solid var(--border1);}
.recruitList-search .inputWrap select {width:150px; }
.recruitList-search .inputWrap input {width:calc(100% - 210px);}
.recruitList-search .inputWrap button {width:50px; height:50px; background:#fff url(/images/common/icon_search.svg)center no-repeat;}
.recruitList-search p {padding:20px 0 0;color: #333;line-height: normal;}
.recruitList-search p b {color:#000;}

.recruitList-list {display:flex; width:100%; flex-wrap:wrap; gap:20px;}
.recruitList-list a {padding:40px; display:flex; gap:10px; flex-direction:column; width:calc((100% - 60px)/4); border-radius: 15px; background: #FFF; box-shadow: 20px 20px 20px 0 rgba(21, 61, 128, 0.05); border:2px solid #fff;}
.special .recruitList-list a {border-color:var(--base1);}
.recruitList-list a .img {height:70px; padding:12px;}
.recruitList-list a .img img {width:100%; height:100%; object-fit:scale-down;}
.recruitList-list a .tit {
	overflow: hidden; color: #000; text-overflow: ellipsis;
	font-size:var(--fs18); font-weight: 500; line-height: 120%;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.recruitList-list a ul {display:flex; gap:5px; flex-direction:column;}
.recruitList-list a ul li {padding:0 0 0 14px; color: #666;line-height: normal; position:relative;}
.recruitList-list a ul li:before {width:4px; height:4px; background:#D9D9D9; border-radius:50%; left:0; top:7px; position:absolute; display:block; content:'';}

.recruitList-list a:hover {box-shadow:20px 20px 20px 0 rgba(21, 61, 128, 0.2)}

.main-business {position:relative; padding-top:100px;}
.main-business .bg {z-index:0; position:absolute; left:0; top:0; width:100%; height:450px; background:#000 url(/images/main/bg_main_busiess.png)center /cover no-repeat;}
.main-business-wrap {z-index:10; position:relative;}

.main-business-tit {padding:0 0 50px; display:flex; gap:140px;}
.main-business-tit .tit p {display:flex; gap:20px; align-items:center; color: #FFF;font-weight: 700;line-height: normal;letter-spacing: -0.48px;}
.main-business-tit .tit h3 {padding:20px 0 0; color: var(--base2);font-size: var(--fs48); font-weight: 700;line-height: normal;letter-spacing: -2px;}

.main-business-list {display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; word-break:break-all;}
.main-business-list a {padding:50px; display:flex; flex-direction:column; gap:20px; justify-content:flex-end; min-height:400px; color:#fff; background:#000 url(/images/main/img_main_business_01.png)center /cover no-repeat; border-radius: 20px; box-shadow: 20px 20px 20px 0 rgba(0, 0, 0, 0.10); position:relative; overflow:hidden;}
.main-business-list a:before {width:100%; height:100%; background:#000; opacity:0; left:0; top:0; position:absolute; display:block; content:''; transition:opacity .3s;}
.main-business-list a:hover:before {opacity:.7;}
.main-business-list a:nth-child(2) {background-image:url(/images/main/img_main_business_03.png)}
.main-business-list a:nth-child(3) {background-image:url(/images/main/img_main_business_04.jpg)}
.main-business-list a:nth-child(4) {background-image:url(/images/main/img_main_business_02.png)}
.main-business-list h4 {font-size: var(--fs30);font-weight: 700;line-height: normal;letter-spacing: -0.9px; position:relative;}
.main-business-list p {font-weight:400; opacity: 0.7; position:relative;}

.main-board {padding:100px 0;}
.main-board-wrap {}
.main-board-tit {padding:0 0 30px; display:flex; gap:10px; align-items:end; position:relative;}
.main-board-tit h3 {color: var(--base1);font-size:var(--fs40);font-weight: 700;line-height: 100%;}
.main-board-tit p {color: #777;}
.main-board-tit .board-btn {display:flex; gap:20px; position:absolute; right:0; top:0; }
.main-board-tit .board-btn a {
	padding:0 0 10px; color: #000;font-size:var(--fs18);font-weight: 600;
	line-height: 100%;letter-spacing: -0.54px; border-bottom:2px solid #000;
}
.main-board-tit .board-btn a:hover {color:var(--base2); border-color:inherit;}

.main-board-list {display:flex; gap:50px;}
.main-board-list a {display:flex; flex-direction:column; gap:10px; width:calc((100% - 150px)/4); }
.main-board-list span {padding:0 15px; line-height:32px; font-size:var(--fs13);font-weight: 700; align-self:start;border-radius: 100px;background: #F0F0F0; transition:all .3s;}
.main-board-list h4 {overflow: hidden;color: #000;text-overflow: ellipsis;font-size: var(--fs18);font-weight: 600;line-height: 120%; transition:color .3s;}
.main-board-list .txt {
	overflow: hidden; transition:color .3s;
	text-overflow: ellipsis; transition:color .3s;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.main-board-list .date {line-height: 140%;}

.main-board-list a:hover span {background:var(--base4); color:#fff;}
.main-board-list a:hover h4 {color:var(--base4);}
.main-board-list a:hover .txt {color:var(--base4);}
/* .main-board-list a:hover .date {color:var(--base2);} */



/* ************************ 모바일 (~1199) ************************ */
@media screen and (max-width:1199px) {
	
	.main .visual-wrap {margin-top:0;}
	
	.main-recruit {padding:80px 30px;}
	.main-recruit-tit {padding:0 0 40px;}
	
	.recruitList-list {}
	.recruitList-list a {width:calc((100% - 20px)/2);}
			
	.main-business {padding:80px 30px 0;}
	.main-business-tit {padding:0 0 80px; gap:20px; justify-content:space-between;}
	.main-business-tit .tit {}
	.main-business-tit .list {}
	
	.main-business-list {grid-template-columns:repeat(2, 1fr);}
	.main-business-list a {padding:40px; min-height:300px;}
	
	
	.main-board {padding:80px 30px;}
	.main-board-list {gap:30px 20px; flex-wrap:wrap;}
	.main-board-list a {width:calc((100% - 20px)/2);}
	
	
	
}


/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) { 

	.main .visual {height:500px;}
	.main .visual-wrap {padding:30px 20px 0;}
	.main .visual-wrap h3 {padding:30px 0 20px;}
	
	.main-recruit {padding:40px 20px;}
	.main-recruit-tit {padding:0 0 30px;}
	
	.recruitList-list {gap:10px;}
	.recruitList-list a {padding:30px; width:calc((100% - 10px)/2);}
	.recruitList-list a .img {height:50px; }
	
	.main-business {padding:40px 20px; margin:0;}
	.main-business .bg {height:250px;}	
	.main-business-tit {padding:0 0 40px; flex-direction:column;}
	.main-business-tit .list a {min-height:auto;}
	
	.main-business-list {grid-template-columns:repeat(1, 1fr); gap:10px;}
	.main-business-list a {min-height:auto; gap:10px; padding:70px 40px;}
	.main-business-list a:before {opacity:.2;}
	
	.main-board {padding:40px 20px;}
	.main-board-tit {gap:5px; flex-direction:column;align-items:start;}
	.main-board-tit .board-btn a {padding:0 0 5px;}
	
	.main-board-list a {width:100%; gap:5px;}
	
	
	
	
} 


/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:500px) { 
	
	.recruitList-list {gap:10px;}
	.recruitList-list a {width:100%;}
	
	
	
}