@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
*{margin:0 0; padding:0 0; -font-family: 'Noto Sans', 'Noto Sans KR', '본고딕', NotoSans,'맑은 고딕','Malgun Gothic'; box-sizing:border-box;}

body{
	background-color: #fffefd;
	font-family: 'Pretendard';
}


ul{
   list-style: none;
 }

 a{
	text-decoration:none;
	color:#333;
}

 .clear{
	clear:both;
}

.clearfix::after{
	content:"";
	display:block;
	clear:both;
}

/* 메인이미지 */
.mainimg{
	width:100%;
	height:600px;
	-background-image:url("/images/04_.jpg");
	background-image:url("/images/230705.jpg");
	background-size:cover;
	background-repeat:no-repeat;
	position:relative;
	
}

.mainbx{
	-border:1px solid red;
	width:800px;
	position:absolute;
	top:calc(50% - 10%);
	left:calc(50% - 45%);
}

.mainbx .mainlogo img{width:250px;}
.mainbx .mainlogo{text-align:center; animation: move 1.5s  forwards;}

.mainbx .maintxt{
	font-size:35px;
	color:#333;
	font-weight:500;
	text-align:center;
	opacity:0; 
	animation: move 1.8s  forwards;
}

.mainbx .maintxt span{
	font-size:39px;
	font-weight:bold;
	color:#124276;
	background: linear-gradient(180deg,rgba(255,255,255,0) 60%, #a4bec8 50%);
}

@keyframes move {
    0%{
		padding-top:100px;
        opacity:0;
    }

    100%{
		padding-top:10px;
        opacity:1;
    }
}


/* 헤더 */

#sy_wrap{
	width:100%; 
	height:80px; 
	box-shadow:2px 2px 10px rgba(0,0,0,0.2); 
	position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background: #fff;
}
#sy_wrap .inner{width:1000px; height:80px; margin:auto; -border:1px solid #ccc; position: relative;}

#sy_wrap .inner .gnb {
    width: 570px;
    top:5%;
    left: calc(50% - 150px);
    position: absolute;
    display: flex;
    justify-content: space-around;
	font-size:17px;
}

#sy_wrap .inner .gnb > li{
	position:relative;
	padding:28.5px !important;
	-border:1px solid red;
}

#sy_wrap .inner .gnb > li::after{
	content:"";
	position:absolute;
	width:0;
	height:3px;
	background-color:#1d64b0;
	bottom:0px;
	left:50%;
	transform:translateX(-50%);
	transition: all .3s ease-out;
}

#sy_wrap .inner .gnb > li:hover::after{
	width:100%;
}


#sy_wrap .inner .gnb > li:hover > a{
	color:#1d64b0;
}


/* 서브 gnb */
#sy_wrap .inner .gnb ul{
	display:none;
	position:absolute;
	left:0px;
	top:76.4px;
	width:200px;
	z-index:100;
	background-color:#fff;
	box-shadow:2px 2px 10px rgba(0,0,0,0.2); 
	font-size:15px;
}

#sy_wrap .inner .gnb ul li{
	padding:17px 0 17px 20px;
	border-bottom:1px solid #ededed;
}


#sy_wrap .inner .gnb ul li:last-child{
	border-bottom:none;
}

#sy_wrap .inner .gnb ul li:hover{
	background-color:#afc7e2;
}

#sy_wrap .inner .gnb > li:hover ul{
	display:block;
}

/* 모바일 */
.m_gnb{
	display:none;
}

/* 채용정보,공지사항&FAQ */

.board_gr{max-width:1200px; margin:50px auto; -border:1px solid red; display:flex; justify-content: space-between;}

.board_gr .notice{width:46%; -border:1px solid green;}

.board_gr .notice .tit {margin-bottom: 3vh;}

.board_gr .notice .tit dl {
  display: flex;
  align-items:center;
  justify-content:space-between;
  gap: 34px;
}

.board_gr .notice .tit dt {
  font-size: 1.8rem;
  color: #333;
  font-weight: 700;
  line-height: 1;
}


.board_gr .notice .tit dd a{
	display:flex;
	position:relative;
}

.board_gr .notice .tit dd p{
	margin-right:8px;
	color:#9f9f9f;
}

.board_gr .notice .tit .fa-angle-double-right{
	font-size:24px;
	color:#9f9f9f;
}


.board_gr .notice .tit dd a::after{
	content:"";
	position:absolute;
	width:0;
	height:2px;
	background-color:#1d64b0;
	bottom:0px;
	left:;
	-transform:translateX(-50%);
	transition: all .3s ease-out;
}

.board_gr .notice .tit dd a:hover::after{
	width:100%;
}

.board_gr .notice .tit dd:hover p{
	color:#333;
}


.board_gr .notice .tit dd:hover .fa-angle-double-right{
	color:#333;
}



.board_gr .notice .list {
  border-top: 1px solid #333333;
}

.board_gr .notice .list li {
  border-bottom: 1px solid #e1e1e1;
}

.board_gr .notice .list a {
  padding:16px 0;
  display: flex;
  align-items: center;
}

.board_gr .notice .list .date {
  flex-shrink: 0;
  text-align: center;
  width: 130px;
}

.board_gr .notice .list .date p {
  line-height: 1;
  font-size: 2rem;
  font-weight: 700;
}

.board_gr .notice .list .date span {
  font-size: 14px;
}

.board_gr .notice .list .txt {
  padding: 0 16px;
  overflow: hidden;
}

.board_gr .notice .list .txt dt,
.board_gr .notice .list .txt dd {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board_gr .notice .list .txt dt {
  font-size: 1.2rem;
}
.board_gr .notice .list .txt dd {
  margin-top: 8px;
  font-weight: 300;
}
.board_gr .notice .list a:hover .date p {
  color: #1d64b0;
}
.board_gr .notice .list a:hover {
  background: #f9f9f9;
}
.board_gr .notice .list a:hover .txt dt {
  color: #222222;
}


/* 입사지원섹션 */
.jobgr{
	width:100%;
	height:400px;
	background-image:url("/images/230706.jpg");
	background-size:cover;
	background-repeat:no-repeat;
	position:relative;
}

.jobgr .job_inner{
	max-width:950px;
	margin:auto;
	padding-top:50px;
}

.jobgr .job_inner .job_icon{
	display:flex;
	flex-direction:row;
}

.jobgr .job_inner .job_icon .job-icon_inner{
	display:flex;
	flex-direction:row;
}

.jobgr .job_inner .job_icon a{
	width:190px;
	height:190px;
	background: linear-gradient(100deg, rgba(213,247,218,1) 0%, rgba(255,250,225,1) 100%);
	border-radius:200%;
	box-shadow:2px 2px 8px rgba(0,0,0,0.1);
	margin-right:50px;
	display:flex;
	flex-direction:column;
	align-items: center;
    justify-content: center;
	transition:all 0.3s;
	text-align:center;
}

.jobgr .job_inner .job_icon .job-icon_inner:last-child a:last-child{
	margin-right:0px;
}

.jobgr .job_inner .job_icon .jobbx .iconimg img{width:100px;}

.jobgr .job_inner .job_icon a:hover{
	border:9px solid #1d64b0;
	color:#1d64b0;
	font-weight:500;
}

/* footer */
#sy_footer{width:100%; background-color:#414141;}
#sy_footer .foont-inner{max-width:1200px; margin:auto; text-align:center; padding:30px 0px; color:#fff;}





@media screen and (max-width:768px){
	/* 메인이미지 */
	.mainimg{
		width:100%;
		height:490px;
		background-image:url("/images/230705_m.jpg");
		background-position:center;
		-background-size:contain;
	}


	.mainbx{
		-border:1px solid red;
		width:100%;
		position:absolute;
		top:20%;
		left:0;
	}

	.mainbx .mainlogo img{width:150px;}
	.mainbx .mainlogo{text-align:center; animation: move 1.5s  forwards; margin-bottom:2%;}

	.mainbx .maintxt{
		font-size:20px;
		color:#333;
		font-weight:500;
		text-align:center;
		opacity:0; 
		animation: move 1.8s  forwards;
	}

	.mainbx .maintxt span{
		font-size:24px;
		font-weight:bold;
		color:#124276;
		background: linear-gradient(180deg,rgba(255,255,255,0) 60%, #a4bec8 50%);
	}

	/* 헤더 */

	#sy_wrap{
		width:100%; 
		height:70px; 
		box-shadow:2px 2px 10px rgba(0,0,0,0.2); 
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		background: #fff;
	}

	#sy_wrap .inner{width:100%; height:0px; margin:auto; -border:1px solid #ccc; position: relative;}
	#sy_wrap .inner .gnb{display:none;}

	#sy_wrap .inner .hd_logo img{width:70%;}

	#sy_wrap .inner .hd_logo{position:absolute; top:7px; left:calc(50% - 90px);}





	/* hamburger_menu */

	#sy_wrap .menu-btn {display: flex; position: absolute; right:0; top: 0; justify-content: center; align-items: center; width: 70px; height: 70px; cursor: pointer; transition: all .5s ease-in-out;}
	#sy_wrap .menu-btn__burger { width: 30px; height: 4px; background: #333; border-radius: 5px; transition: all .5s ease-in-out;
	}
	#sy_wrap .menu-btn__burger::before,
	#sy_wrap .menu-btn__burger::after { content: ''; position: absolute; width: 30px; height: 4px; background: #333; border-radius: 5px; transition: all .5s ease-in-out;}
	#sy_wrap .menu-btn__burger::before { transform: translateY(-10px);}
	#sy_wrap .menu-btn__burger::after { transform: translateY(10px);}

	/* menu animation */

	#sy_wrap .menu-btn.open .menu-btn__burger {  transform: translateX(-50px); background: transparent; box-shadow: none;}
	#sy_wrap .menu-btn.open .menu-btn__burger::before { transform: rotate(45deg) translate(35px, -35px);}
	#sy_wrap .menu-btn.open .menu-btn__burger::after { transform: rotate(-45deg) translate(35px, 35px);}

	/* mo_nav */

	#sy_wrap .m_gnb { display: none; position: absolute; right: 0; top:70px;  padding:30px; width: 100%; height: 100vh; background: #1d64b0;}
	#sy_wrap .m_gnb > ul > li > a { display:block; position: relative; padding: 10px 0; font-size: 30px; font-weight: bold; color: #fff; }
	#sy_wrap .m_gnb > ul > li > ul { display: none; padding: 10px 0 10px 0}
	#sy_wrap .m_gnb > ul > li > ul a { display: block; padding: 5px 0; font-size: 20px; font-weight: bold; color: #fff;}
	#sy_wrap .m_gnb .drop > a {  position: relative;}
	#sy_wrap .m_gnb .drop > a:after { content: ""; position: absolute; left: 125px; top: 25px; border-top:10px solid  #fff; border-bottom:10px solid transparent; border-right: 10px solid transparent; border-left: 10px solid  transparent; transition: all .5s ease-in-out;}
	#sy_wrap .m_gnb .drop > a.on:after { top: 10px; transform: rotate(180deg); border-top:10px solid  #febd11;}

	#sy_wrap .m_gnb > ul > li > a:hover{color: #febd11;}
	#sy_wrap .m_gnb > ul > li > ul a:hover{opacity:0.6;}




	/* 채용정보,공지사항&FAQ */

	.board_gr{max-width:100%; padding:0 2%; margin:30px auto 10px; flex-direction: column;}

	.board_gr .notice{width:100%; -border:1px solid green; margin-bottom:40px;}

	.board_gr .notice .tit {margin-bottom: 1.8vh;}

	.board_gr .notice .tit dl {
	  display: flex;
	  align-items:center;
	  justify-content:space-between;
	  gap: 34px;
	}

	.board_gr .notice .tit dt {
	  font-size: 1.4rem;
	  color: #333;
	  font-weight: 700;
	  line-height: 1;
	}
   

	.board_gr .notice .list {
	  border-top: 1px solid #333333;
	}

	.board_gr .notice .list li {
	  border-bottom: 1px solid #e1e1e1;
	}

	.board_gr .notice .list a {
	  padding:10px 0;
	  display: flex;
	  align-items: center;
	}

	.board_gr .notice .list .date {
	  flex-shrink: 0;
	  text-align: center;
	  width:100px;
	}

	.board_gr .notice .list .date p {
	  line-height: 1;
	  font-size: 1.2rem;
	  font-weight: 700;
	}

	.board_gr .notice .list .date span {
	  font-size: 10px;
	}

	.board_gr .notice .list .txt {
	  padding: 0 10px;
	  overflow: hidden;
	}

	.board_gr .notice .list .txt dt {
	  font-size: 1.1rem;
	}

	.board_gr .notice .list .txt dd {
	  margin-top: 8px;
	  font-weight: 300;
	}


	/* 입사지원섹션 */
	.jobgr{
		background-image:url("/images/230707.jpg");
		background-size:cover;
		background-position:center;
	}

	.jobgr .job_inner{
		max-width:100%;
		padding-top:0;
	}

	.jobgr .job_inner .job_icon{
		flex-direction:column;
	}

	.jobgr .job_inner .job_icon .job-icon_inner{
		justify-content: center;
		margin-bottom:30px;
	}

	.jobgr .job_inner .job_icon a{
		width:140px;
		height:140px;
		margin-right:35px;
		font-size:13px;

	}

	.jobgr .job_inner .job_icon .job-icon_inner a:last-child{
		margin-right:0px;
	}

	.jobgr .job_inner .job_icon .jobbx .iconimg img{width:75px;}

	.jobgr .job_inner .job_icon a:hover{
		border:6px solid #1d64b0;
	}


	
	/* footer */
	#sy_footer .foont-inner{max-width:100%; padding:20px 0px; font-size:14px;}

}