@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

body {-webkit-tap-highlight-color:transparent; font-size: 16px;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;}
body {overflow-x:hidden;}
a:link,a:visited,a:active {text-decoration:none; color: inherit}
ul, ol{list-style: none;}
table{border-collapse:collapse;width:100%;}
address,caption,cite,code,dfn,em,var,h1,h2,h3,h4,h5,h6 {font-style:normal;font-weight:normal;}
caption,legend,caption *,legend *{position:absolute; left:-10000px; line-height:0; font-size:0;}
fieldset{border:solid 0px #000;padding:0;}
button{border:none; background:none; cursor:pointer; outline:none; font-family: inherit; font-size: inherit; color: inherit}
body * {box-sizing:border-box}
body,a,[type=text], [type=password], [type=file], [type=email], [type=number], [type=tel],select,h1, h2, h3, h4, h5, h6, pre,textarea, button{
font-family:'Noto Sans KR', sans-serif; font-size:16px; color:#000; font-weight:400; outline:0; line-height:1; letter-spacing:-0.5px;}


@keyframes up-fadein {
	0% { opacity: 0; margin-top: 30px;}
	100% {opacity: 1; margin-top: 0;}
}

@keyframes left-fadein {
	0% {opacity: 0; margin-left: -30px;}
	100% {opacity: 1; margin-left: 0;}
}

@keyframes right-fadein {
	0% {opacity: 0; margin-right: -30px;}
	100% {opacity: 1; margin-right: 0;}
}

@keyframes down-transform-fadein {
	0% {opacity: 0; transform: translateY(-10%);}
	100% {opacity: 1; transform: translateY(0);}
}

@keyframes left-transform-fadein {
	0% {opacity: 0; transform: translateX(-10%);}
	100% {opacity: 1; transform: translateX(0);}
}

@keyframes right-transform-fadein {
	0% {opacity: 0; transform: translateX(10%);}
	100% {opacity: 1; transform: translateX(0%);}
}

/*��Ʈ�� ��Ÿ��*/
.intro {width:100%; min-width:320px; min-height:100vh;}

/* header */
.intro .intro-header {width:100%; position:absolute; left:0; top:0; z-index:100;}
.intro .intro-header > .inner {width:95%; height:120px; position:relative; margin:0 auto;}
.intro .intro-header .logo {width:275px; height:45px; background-size:cover; background-repeat:no-repeat; background-position:center; background-image:url(../../intro_2023/img/logo_3.svg); font-size:0; position:absolute; left:0; top:50%; transform:translateY(-50%); animation: left-fadein 1s 0.8s forwards; opacity: 0;}
.intro .intro-header .close-btn {position:absolute; right:0; top:20px; background:rgba(0,0,0,0.4); border-radius:20px; height:40px; display:flex; align-items:center; padding:0 8px; animation: right-fadein 1s 0.8s forwards; opacity: 0;}
.intro .intro-header .close-btn span {position:relative;}
.intro .intro-header .close-btn span:focus-within {outline: auto;}
.intro .intro-header .close-btn span:before {content:""; width:1px; height:20px; border-left:1px solid #fff; box-sizing:border-box; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.intro .intro-header .close-btn span:nth-child(1):before {display:none;}
.intro .intro-header .close-btn span a {font-size:14px; font-weight:500; color:#fff; padding:0 12px; display:block;}


/* contents */
.intro .intro-conts {width:100%; min-height:100vh; position:relative; z-index:10; background-size:cover; background-repeat:no-repeat; background-image:url(../images/bg_01.jpg); background-position: top center; overflow:hidden;}
.intro .intro-conts > .inner {width:90%; max-width:1700px; min-height:100vh; position:relative; margin:0 auto;  padding: 120px 0;}

.intro .intro-tit-wrap{display: flex; flex-direction: column; align-items: center; gap: 1em; margin-bottom: 3em; text-align: center; opacity: 0; animation: down-transform-fadein 1s 1s forwards;}
.intro-tit-txt h2{font-size: 37px; font-weight: 500; color: #fff; line-height: 1.3; text-shadow: 3px 3px 5px rgba(10,74,123,0.37);}
.intro-tit-txt h2 em{display: block; font-family: "Pretendard Variable"; font-size:54px; font-weight: 800;}


.intro .intro-links, .intro-boxes{ width: 1040px; }
.intro .intro-links{display: flex; justify-content: center; gap: 16px; margin: 0 auto 60px; opacity: 0; animation: down-transform-fadein 1s 1s forwards;}
.intro .intro-links li{width: 25%;  border: 2px solid #fff; border-radius: 40px; background-color: #00000040; backdrop-filter: blur(5px)}
.intro .intro-links li a{display: block; width: 100%; height: 100%; padding: .8em 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: #fff; text-align: center;}
.intro .intro-links li a:focus-visible {outline: auto; outline-color: #000;}

.intro-boxes{display: flex; justify-content: center; gap: 20px; margin: 0 auto}
.intro-box{position: relative; width: 50%;  box-shadow: 10px 10px 15px #00000073; opacity: 0;}
.intro-box > img{position: absolute; top: -4px; right: 16px; width: 65px; height: 104px;}
.intro-box:first-child{animation: left-transform-fadein 1s 1s forwards;}
.intro-box:last-child{animation: right-transform-fadein 1s 1s forwards;}
.intro-box-inner{min-height:250px; background-color: #FFFFFFE3; padding: 24px 28px;}

.intro-box-header{position: relative; font-family: "Pretendard Variable";}
.intro-box-header h3{padding-left: 16px; border-left: 2px solid #2C2F32;font-family: "Pretendard Variable"; font-size: 32px; font-weight: 800;  line-height: 1.2; letter-spacing: -0.02em;}
.intro-box-header h3 span{display: block; margin-bottom: 0.35em;  font-size: 20px; font-weight: 700;}
.intro-box-img{display: flex; justify-content: space-between;gap: 16px; margin-top: 16px; height: 102px}
.intro-box-img img{width: calc((100% - 8px) / 2); max-width: 100%; max-height: 102px}

.intro .btnRecruit{position: absolute; top:0; right: 0; margin-left: 12px; padding: 6px 32px 6px 20px; background: #0078AB url("../images/arrow_white.svg") no-repeat center right 15px; background-size: 6px; border-radius: 8px; font-size: 16px; font-weight: 700; color: #fff; line-height: 1.6; letter-spacing: -0.02em;}

.recruit-period{padding: 0 20px; font-family: "Pretendard Variable"; background-color: #FFFFFFB2; margin-top: 16px; height: 102px; display: flex; flex-direction: column; justify-content: center;}
.recruit-period span{display: block; font-size: 18px; font-weight: 600; line-height: 1.8; letter-spacing: -0.02em; color: #41454A}
.recruit-period strong{font-size: 28px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: #E93456}

.intro-box-footer{display: flex; margin-top: 4px; gap: 4px;}
.intro-box-footer a{width: 50%; font-family: "Pretendard Variable"; font-size: 22px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; text-align: center; padding: 0.55em 0.9em; flex: 1 0; color: #fff}
.intro-box-footer a:focus-visible {outline: auto; outline-color: #000;}
.intro-box-footer a:nth-child(1){background-color: #3093BA;}
.intro-box-footer a:nth-child(2){background-color: #0078AB;}

.intro .quick-box {width:100%; position:absolute; left:0; bottom:0; padding:1em 0;}
.intro .quick-box:before {content:""; width:500%; height:100%; background-color: #004072CC; position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:0; pointer-events: none}
.intro .quick-box ul {width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; position:relative; z-index:10;}
.intro .quick-box ul li {position:relative; margin-right: 36.6px;}
.intro .quick-box ul li:focus-within {outline: auto;}
.intro .quick-box ul li:last-child {margin-right:0;}
.intro .quick-box ul li::before{content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: -18.3px; width: 1px; height: 1.4em; background-color: #D1D4D6}
.intro .quick-box ul li:last-child::before{background-color: transparent}
.intro .quick-box ul li a {display:block; font-family: "Pretendard Variable"; font-size: 20px; font-weight:500; line-height: 1.4; letter-spacing: -0.02em; color:#fff; }

.intro .quick-box .close-btn {position:absolute; right:0; top:-40px; background:rgba(0,0,0,0.4); border-radius:20px; height:32px; justify-content: center; align-items:center; padding:0 8px; display: none;}
.intro .quick-box .close-btn span:before {content:""; width:1px; height:12px; border-left:1px solid #fff; box-sizing:border-box; position:absolute; left:50%; top:50%; transform:translateY(-50%);}
.intro .quick-box .close-btn span:nth-child(1):before {display:none;}
.intro .quick-box .close-btn span a {font-size:11px; font-weight:500; color:#fff; padding:0 8px; display:block;}



/*  intro footer  */
.intro .intro-footer {width:100%; background:#fff; position:relative;}
.intro .intro-footer .fnb{width: 100%; padding: 0 2%;}
.intro .intro-footer .fnb .fnb-wrap {width: 100%; display:flex; justify-content: space-between; /* gap: 10.5px; */ padding-top: 40px;}
/* .intro .intro-footer .fnb .fnb-wrap dl.music {width: } */
.intro .intro-footer .fnb .fnb-wrap dl {padding: 0 4px;}
.intro .intro-footer .fnb .fnb-wrap dl > * {width:100%; color:#41454A; white-space: nowrap}
.intro .intro-footer .fnb .fnb-wrap dl dt {padding: 0 6px; font-family: "Pretendard Variable"; font-size:16px; font-weight:700;  border-bottom:1px solid #D1D4D6; height: 40px; margin-bottom:12px; display:flex; flex-wrap:wrap; align-items:center;}
.intro .intro-footer .fnb .fnb-wrap dl dt:focus-within {outline: auto;}
.intro .intro-footer .fnb .fnb-wrap dl dt a {font-size: inherit; color: inherit; font-weight: inherit;}

.intro .intro-footer .fnb .fnb-wrap dl dd a {font-size:14px; font-weight:400; display:block; padding: 0 6px; height: 20px; line-height: 1}
.intro .intro-footer .fnb .fnb-wrap dl dd + dd a{margin-top: 10px;}
.intro .intro-footer .fnb .fnb-wrap dl.music dd:nth-of-type(1){padding-right: 36px;}
.intro .intro-footer .fnb .fnb-wrap dl dd a:focus {outline: auto;}
.intro .intro-footer .fnb .fnb-wrap dl dd span {display: flex; flex-wrap: wrap; align-items: center; gap: 2px;}
.intro .intro-footer .fnb .fnb-wrap dl dd span span {display: inline-block; width: 16px; height: 16px;background: url(/images/icon_new.svg) no-repeat center / cover; font-size: 0; vertical-align: middle;}

/* address, copyright */
.intro .intro-footer .footer-conts {width:100%; text-align: center; margin: 20px auto;}
.intro .intro-footer .footer-conts .inner{padding: 24px 16px;}
.intro .intro-footer .footer-conts .info{display: flex; justify-content: center; gap: 1em;}
.intro .intro-footer .footer-conts .info div{display: flex; gap: 1em;}
.intro .intro-footer .footer-conts .inner p{position: relative; font: 16px/1.6 "Pretendard Variable"; letter-spacing: -0.02em; color: #41454A}
.intro .intro-footer .footer-conts .info > p:nth-child(1)::after,
.intro .intro-footer .footer-conts .info div p:nth-child(1)::after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: -.5em; width: 1px; height: .8em; background-color: #41454A;}
.only900{display: none;}
.only900none{display: block}



/* FHD 3840x2160 */
/* QHD 2560 1440 */
/* 3000~ */
@media screen and (min-width: 2500px) {
	.intro .intro-tit-img img{width: 800px;}
	.intro-tit-txt h2{font-size: 55px;}
	.intro-tit-txt h2 em{font-size: 72px;}
	
	/* .intro .intro-conts {min-height: 1400px;} */
	.intro .intro-conts > .inner {max-width: 3200px; min-height:100vh; padding:0 0 60px; display: flex; flex-direction: column; justify-content: center;}
	.intro .intro-header .logo {width: 500px;height: 67px;}
	.intro .intro-header .close-btn {border-radius: 30px; height: 60px; top: 40px;}
	.intro .intro-header .close-btn span a {font-size: 22px; padding: 0 20px;} 

	.intro .intro-links, .intro-boxes{width: 2048px}
	.intro-box img{width: 105px; height: 198px; right: 40px;}
	
	.intro .intro-links li{border-radius: 10vh;}
	.intro .intro-links li a{font-size: 40px;}
	.intro-box-inner{padding: 45px 38px 25px;}
	.intro-box-header h3{font-size: 45px; border-left-width: 3px;}
	.intro-box-header h3 span{font-size: 40px;}
	.recruit-period{padding: 26px 30px; height: auto; margin-top: 32px;}
	.recruit-period span{font-size: 40px;}
	.recruit-period strong{font-size: 55px; font-weight: 800}
	.intro-box-img img{max-height: none}
	
	.intro-box-footer{margin: 0; gap: 0;}
	.intro-box-footer a{font-size: 40px;}
	.intro .quick-box ul li a{font-size: 37px;}
	
	.intro .intro-footer .fnb .fnb-wrap dl dt{font-size: 24px; height: 50px; border-bottom-width: 2px;}
	.intro .intro-footer .fnb .fnb-wrap dl dd a{font-size: 18px}
	.intro .intro-footer .fnb .fnb-wrap dl dd + dd a{margin-top: 20px;}
	
	.intro .intro-footer .footer-conts .inner{padding: 34px 26px;}
	.intro .intro-footer .footer-conts .inner p{font-size: 26px;}
	
}

@media screen and (max-width: 1800px){
	.intro .intro-footer .fnb {padding: 0 1%;}
}

@media screen and (max-width: 1680px){
	.intro .intro-footer .fnb .fnb-wrap dl > *{
		white-space: normal;
	}
	.intro .intro-footer .fnb .fnb-wrap dl dd a{
		height: auto
	}
	.intro .intro-footer .fnb .fnb-wrap dl.music dd:nth-of-type(1){
		padding-right: 20px;
	}

}

@media screen and (max-width: 1690px){
	/* 3px�� font-size ���� */
	.intro .intro-links li a{font-size: 19px;}
	.intro-box-header h3{font-size: 29px;}
	.intro-box-header h3 span{font-size: 17px}
	.recruit-period{padding: 0 16px;}
	.recruit-period span{font-size: 15px; line-height: 1.4;}
	.recruit-period strong{font-size: 25px;}
	.intro-box-footer a{font-size: 19px;}
	
	.intro .intro-footer .fnb .fnb-wrap{flex-wrap: wrap; justify-content: flex-start; gap: 20px 0;}
	.intro .intro-footer .fnb .fnb-wrap dl {width:calc(100% / 5);}
}


@media screen and (max-width: 1440px){
	.intro .intro-tit-img{width: 380px;}
	.intro .intro-tit-img img{max-width: 100%;}
	.intro-tit-txt h2{font-size: 30px;}
	.intro-tit-txt h2 em{font-size: 42px;}
	
	.intro-box-inner{padding: 24px}
	.intro-boxes{gap: 3.5%}
	
	.intro .quick-box ul li {margin-right:40px;}
	.intro .quick-box ul li a {font-size:18px;}
}

@media screen and (max-width: 1150px){
	.intro .intro-links, .intro-boxes{width: 100%}
	.intro-box-img{gap: 8px}
}
@media screen and (max-width: 1024px){
	
	.intro .quick-box ul li {margin-right:30px;}
	.intro .quick-box ul li a {padding:8px;}

	.intro .intro-links{flex-wrap: wrap; gap: 8px; margin-bottom: 30px;}
	.intro .intro-links li{width: calc((100% - 8px) / 2 )}
	
	.intro .intro-conts{height: max-content}
	.intro .intro-conts > .inner{width: 100%; padding: 14% 16px; height: max-content}
	.intro-boxes{flex-direction: column; gap: 12px;}
	.intro-box{width: 100%}
	.recruit-period{height: auto; padding: 16px;}
	.intro-box-img{height: auto}
	.intro-box-img img{max-height: none}
	.intro .intro-footer:before {background-size:auto 30%;}
	
	

}


@media screen and (max-width: 900px){
	.only900{display: block;}
	.only900none{display: none;}
	
	.intro .intro-conts{background-image:url(../images/m_bg_01.jpg); background-position: center;}
	.intro-boxes{box-shadow:  8px 8px 15px #00000066;}
	
	.intro .intro-footer .fnb .fnb-wrap dl {width:calc(100% / 3);}
	.intro .quick-box ul li{
		margin-right: 0;
		flex: 1 0 calc(100% / 3);
		text-align: center;
	}
	.intro .quick-box ul li::before{right: 0}
	.intro .quick-box{position: relative;padding: 0;}
	.intro .quick-box:before{background-color: #33668E}
	.intro .quick-box ul li:nth-child(even)::before{
		background-color: transparent
	}
	.intro .quick-box ul li a{padding: 16.5px 0; border-bottom: 1px solid #D1D4D6}
	.intro .quick-box ul li{flex-basis: 50%}
	.intro .intro-footer .fnb .fnb-wrap{padding: 20px 16px 40px;}
	/* .intro .intro-footer .fnb .fnb-wrap dl dt{padding: 0 10px;} */
	.intro .intro-footer .fnb .fnb-wrap dl dd a{ line-height: 1.4}	
	.intro .intro-footer .footer-conts .info{display:block;}
	.intro .intro-footer .footer-conts .info > p:nth-child(1)::after{content: none}
	.intro .intro-footer .footer-conts .info div{justify-content: center}
}


/* ����� */
@media screen and (max-width: 768px){
	.intro .intro-conts{min-height: auto}
	.intro .intro-conts > .inner{padding: 20% 16px 10%; height: auto}
	.intro .intro-header .logo {width:244px; height:40px;}

	.intro-box:first-child::before{width: 47px; height: 78px;}
	.intro .intro-conts .com-link {bottom:15%;}
	.intro .intro-conts .com-link ul li a {height:60px; font-size:20px;}

	.intro .quick-box ul li a {font-size:17px;}

	.intro .intro-footer .footer-conts .logo  {width:244px; height:40px;}
	.intro .intro-footer .fnb .fnb-wrap dl dt {font-size:17px;}
	.intro .intro-footer .fnb .fnb-wrap dl dt a {font-size:17px;}
	.intro .intro-footer .fnb .fnb-wrap dl dd a {font-size:15px;}
	.intro .intro-footer .footer-conts {margin: 0;}
	.intro .intro-footer .footer-conts .inner{padding: 12px 16px}
	.intro .intro-footer .footer-conts .end-box > * {width:100%; margin-bottom:20px;}
	.intro .intro-footer .footer-conts .end-box > *:last-child {margin-bottom:0;}
	.intro .intro-footer .footer-conts .end-box .sns-box ul {justify-content:flex-start;}

	.intro .intro-tit-img{width: 300px}
	.intro-tit-txt h2{font-size: 20px;}
	.intro-tit-txt h2 em{font-size: 32px; letter-spacing: 0.2px}

}

@media screen and (max-width: 600px){
	.intro{min-height: auto}
	.intro .intro-conts > .inner{padding: 120px 16px 24px; min-height: auto;}
	.intro .intro-header > .inner {height:100px;}
	.intro .intro-header .logo {width:180px; height:36px;}
	.intro .intro-header .close-btn {height:36px; top:30px;}
	.intro .intro-header .close-btn span:before {height:15px;}
	.intro .intro-header .close-btn span a {font-size:12px; padding:0 8px;}
	
	.intro .intro-links li a{font-size: 17px; padding: 1em 0;}
	.intro-box-inner{min-height: auto; padding: 10px 16px;}
	
	
	.intro-box-header h3{font-size: 20px;}
	.intro-box-header h3 span{font-size: 12px;}
	.intro .btnRecruit{background-size: 4px; background-position: center right 9px; padding: 6px 20px 6px 12px; font-size: 12px; font-weight: 600}
	.recruit-period{padding: 6px 12px;}
	.recruit-period span{font-size: 12px}
	.recruit-period strong{font-size: 18px;}
	.intro-box-footer a{font-size: 14px; padding: 12px 0;}
	


}

@media screen and (max-width: 480px){
	.intro .intro-conts > .inner{padding: 100px 16px 70px; height: auto;}
	.intro .intro-header{padding-top: 25px;}
	
	.intro .intro-header .logo {width:183px; height:30px; position:relative; left:auto; top:auto; transform:none; margin:0 auto; animation: up-fadein 1s 1.8s forwards;}
	
	.intro .intro-header .close-btn {height:32px; width:170px; justify-content:center; position:relative; top:auto; margin:0 0 20px auto; display: none;}
	.intro .intro-header .close-btn span:before {height:12px;}
	.intro .intro-header .close-btn span a {font-size:11px;}

	.intro-box > img{width: 37px; height: 58px; right: 12px;}
	
	.intro .quick-box .close-btn {display: flex; z-index: 10; right: 16px;}

	.intro .intro-footer .footer-conts .logo {width:183px; height:30px;}
	.intro .intro-footer .fnb .fnb-wrap dl {width:calc(100% / 2);}
	.intro .intro-footer .fnb .fnb-wrap dl dt {font-size:16px; height:50px;}
	.intro .intro-footer .fnb .fnb-wrap dl dt a {font-size:16px;}
	.intro .intro-footer .fnb .fnb-wrap dl dd a {font-size:14px;}
	.intro .intro-footer .fnb .fnb-wrap dl dd + dd a{margin-top: 8px;}
	.intro .intro-footer .footer-conts {padding:40px 0;}
	.intro .intro-footer .footer-conts .info {margin:25px 0;}
	
	.intro .intro-footer .footer-conts .info .info-wrap {margin-top:-8px;}
	.intro .intro-footer .footer-conts .info .info-wrap span {margin-top:8px; width:100%; margin-right:0; font-size:13px;}
	.intro .intro-footer .footer-conts .end-box .copyright {font-size:11px;}

	.intro .intro-footer .fnb .fnb-wrap dl {width:calc(100% / 2);}
	.intro .intro-footer .footer-conts .inner p{
		font-size: 13px;
	}
}

@media screen and (max-width: 365px){
	.intro .intro-conts > .inner{padding: 80px 12px 70px;}
	.intro .intro-tit-img{width: 280px;}
	.intro .intro-tit-wrap{margin-bottom: 2em}
	.intro-tit-txt h2{font-size: 18px;}
	.intro-tit-txt h2 em{font-size: 28px;}
	.intro .intro-links li a{padding: .8em 0; font-size: 16px;}
}