@charset "utf-8";

/*
 *
 * file : 원서접수
 * writer : eun
 *
 */

/*부트스트랩 css 적용*/
body, html {font-size: 15px; /* 기본 14px에서 15px나 16px로 키우기 */}
/* 폼 내부 텍스트나 입력창 크기 보정 */
.sub-con .input-text, .sub-con select.input-text {font-size: 15px;height: 44px;}

/* 레이아웃 크기 지정 */
#hd, #wrapper, #ft{min-width:1400px}

#hd .hd-wrap,
.cinner,
#ft_wr{width:1400px;margin:0 auto}

/* 팝업레이어 */

/*원서 접수 확인 팝업 */
#onsubmitModal .modal-dialog {width: 1000px !important;}

/* 상단 레이아웃 수정 */
#hd{background:url('../img/sub/bg01.png') center bottom/cover no-repeat;overflow:hidden}

#hd .subject-wrap{
	position: relative;
	/* 배경 심볼 대신 크기 제어를 위해 백그라운드 위치 조정 */
	background: url('../img/comm/symbol.png') left 20px center / 110px auto no-repeat;
	font-size: 1.25rem;
	padding-left: 140px; /* 심볼 크기만큼 좌측 여백 확보 */
	margin: 120px 0;
	color: #111111;
	min-height: 120px; /* 심볼이 잘리지 않도록 최소 높이 확보 */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#hd .subject-wrap .tit{
	font-size: 1.5em;
	font-weight: bold;
	color: #111111;
	-webkit-text-stroke: 0;
	line-height: 1.3;
}

#hd .subject-wrap .stit{
	color: #333333;
	margin-bottom: 5px;
	font-weight: bold;
	line-height: 1.2;
}

#hd_h1{position:absolute;font-size:0;line-height:0;overflow:hidden}
#wrapper{min-height:500px;overflow:hidden}

#ft{background-color:var(--color-h);padding:20px 0}
/*#ft .ft-txt{display:flex;margin-top:20px;justify-content:space-between;color:rgba(255,255,255,.3);font-size:.875rem;line-height:1.6;align-items:flex-end}
#ft .ft-txt-link a{color:#fff}
*/
#ft .ft-txt{text-align:center;display:flex;flex-direction:column;justify-content:center;gap:20px;color:rgba(255,255,255,.8);font-size:.875rem}
#ft .ft-txt-link a{color:var(--color-p);display:block;margin-bottom:20px}

#js-quick{position:fixed;right:0;top:130px;width:90px;border-top-left-radius:15px;border-bottom-left-radius:15px;overflow:hidden;text-align:center;font-size:.875rem;z-index:10}
#js-quick .btn-close{display:none}
#js-quick .tit{color:#fff;padding:10px 0;background-color:#0066d8}
#js-quick ul{background-color:#0091ea}
#js-quick li{position:relative;transition:.3s}
#js-quick li:after{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;background-color:rgba(255,255,255,.3);content:"";height:1px}
#js-quick li:last-child{background-color:#0066d8}
#js-quick li:last-child:after{display:none}
#js-quick li:last-child a{padding:5px 0}
#js-quick li a{display:inline-block;padding:15px 0;color:#fff}
#js-quick .caption{margin-top:5px}
#js-quick li:hover{background-color:#053770}
#js-quick i{display:block}

/* Search 210810 */
.search-wrap{position:fixed;background-color:rgba(0,0,0,.75);top:0;width:100%;z-index:100;padding:100px 0;text-align:center;color:#fff}
.search-wrap .search-wrap-inner{position:relative;width:800px;margin:0 auto}
.search-wrap .subject{font-family:'paybooc';font-size:3.75rem;font-weight:600;margin-bottom:50px}
.search-wrap .tag-wrap{margin-top:50px}
.search-wrap .tag-wrap .tag{display:inline-block;border:1px solid #fff;border-radius:10px;background-color:rgba(255,255,255,.1);text-align:Center;padding:10px 30px;font-size:1.25rem;margin:5px;cursor:pointer;transition:.3s}
.search-wrap .tag-wrap .tag:hover{background-color:rgba(255,255,255,.3)}
.search-wrap .input-text{height:85px;max-height:85px;padding:30px 100px 30px 30px;font-size:1.125rem}
.search-wrap fieldset{position:relative}
.search-wrap button{position:absolute;color:#004b9f;right:30px;top:50%;transform:translateY(-50%);font-size:3rem}
.search-wrap .js-close{position:absolute;top:0;right:0;font-size:3rem;color:#fff}

/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}


/*2026.08.12 table 스크롤*/
.scroll-table{position: relative; overflow-x: auto;}
.scroll-table.has-scroll .ico-scroll{display:block; width:60px; aspect-ratio: 1 / 1; background:url('../img/sub/ico-mobile.png') rgba(0, 184, 110, .8) center / 60% no-repeat; border-radius:50%; position:absolute; top:20px; left:50%; z-index:10; animation: table-scroll 1s infinite;}
@keyframes table-scroll {
	0% {transform:translate(-50%, 0);}
	50% {transform:translate(-50%, -10px);}
	100% {transform:translate(-50%, 0);}
}

@media (max-width:1400px){
	/* header */
	#hd,
	#hd .hd-wrap,
	.cinner, #wrapper,#ft{width:100%;min-width:100%}
	.cinner{padding:0 20px}

	#hd #logo{left:20px}
	#hd .btn-menu{right:20px}
}

@media (max-width:1200px){
	nav .gnb1-ul{padding-left:90px}
	nav .gnb1-li:last-child{padding-right:0}
	nav .gnb1-item{padding:0 .5vw;font-size:1.5vw}
	nav .gnb2-item{font-size:.9rem}
	nav .gnb2-wrap-inner{width:100%}
	.hd-top ul > li a{display:inline-block;padding-left:20px;width:20px;height:20px;font-size:16px;overflow:hidden}

	/* type02 *//*
	#hd #logo a{width:220px}
	#hd .hd-wrap{padding-left:50px}
	nav .gnb1-item{font-size:1.125rem;padding:0 20px}
	nav .gnb1-item .light{height:22px}
	nav .gnb2-item{font-size:1rem}*/

	#ft .ft-link-site a{font-size:.9rem;padding:0 10px}
	#ft .ft-btn button{width:160px;padding:10px 15px;font-size:.85rem}

	.layPop .box .con .sns {width:70%; height:50%;}
	.layPop .box .con .sns-insta {width: 500px;}

	.js-site-map .js-site-mapinner{width:80%}
	.js-site-map .site-1ul{margin-top:20px}
	.js-site-map .site-2ul{font-size:2vw}
	.js-site-map .site-2li{width:50%}
	.js-site-map .site-2li:nth-child(4n + 1){clear:none}
	.js-site-map .site-2li:nth-child(2n + 1){clear:both}
	.js-site-map .site-2item{font-size:1.2rem}
}

@media (max-width:1024px){

	html{font-size:14px}

	#hd{background-position:center}

	#hd .subject-wrap{
		margin: 30px 15px;
		background: url('../img/comm/symbol.png') left 15px center / 90px auto no-repeat,
		rgba(255, 255, 255, 0.9);
		padding-left: 100px;
		padding-top: 20px;
		padding-bottom: 20px;
		padding-right: 15px;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: left;
	}

	#hd .subject-wrap .tit{
		font-size: 1.15rem;
		color: #111111;
		font-weight: bold;
	}
	#hd .subject-wrap .stit{
		font-size: 0.8rem;
		color: #333333;
		font-weight: bold;
	}

	/* 첫 번째 칸이 밀리는 현상 방지 */
	.sub-nav .sub-1li:first-child {
		margin-left: 0 !important;
		left: auto !important;
	}

	.mode-mobile{display:block}
	.mode-pc{display:none}

	.sub-nav .sub-1ul {
		display: flex !important;
		flex-wrap: wrap !important;
		padding: 0 !important;
		margin: 0 !important;
		list-style: none !important;
		float: none !important;
		border-top: 1px solid #ddd !important;
		border-left: 1px solid #ddd !important;
		box-sizing: border-box !important;
	}

	/* 3개씩 배치하면서 모든 칸에 우측/하단 테두리 고정 */
	.sub-nav .sub-1li {
		flex: 0 0 33.3333% !important;
		max-width: 33.3333% !important;
		box-sizing: border-box !important;
		float: none !important;
		margin: 0 !important;
		border-right: 1px solid #ddd !important;
		border-bottom: 1px solid #ddd !important;
	}

	/* 링크 영역 패딩 및 높이 고정 */
	.sub-nav .sub-1li a.sub-1item {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		box-sizing: border-box !important;
		width: 100% !important;
		height: 100% !important;
		min-height: 48px;
		padding: 8px 4px !important;
	}

	/* mobile */

	.scroll-view{width:100%;overflow-x:auto}
	.scroll-view table{width:1024px}

	.badge{font-size:.8rem;width:80px}

	#ft{font-size:.8rem}

	#js-quick{position:absolute;right:10px;top:75px;width:auto}
	#js-quick .tit{position:relative;text-align:right;padding-right:60px;background-color:transparent;cursor:pointer}
	#js-quick .tit span{text-align:right}
	#js-quick .tit:before{position:absolute;right:0;top:50%;transform:translateY(-50%);width:60px;height:60px;background:url('../img/comm/qico05.png') center no-repeat;right:0;content:""}
	#js-quick ul{display:none}
	#js-quick.on .btn-close{display:block;cursor:pointer;color:#fff;font-size:2rem;right:0;top:20px;position:absolute;z-index:1}
	#js-quick.on{top:0;z-index:100}
	#js-quick.on ul{display:block;position:fixed;top:0;left:0;bottom:0;right:0;width:100%;height:100vh;padding-top:60px}
	#js-quick.on li{display:inline-block;width:30%}
	#js-quick.on li:last-child{display:none;background-color:transparent}
	#js-quick.on li:after{display:none}

	.search-wrap{padding:60px 0}
	.search-wrap .search-wrap-inner{width:80%}
	.search-wrap .subject{font-size:2.5rem;margin-bottom:30px}
	.search-wrap .js-close{padding-left:0;font-size:2rem}
	.search-wrap .input-text{padding:10px 60px 10px 10px;height:50px}
	.search-wrap .tag-wrap{margin-top:30px}
	.search-wrap .tag-wrap .tag{font-size:1rem;padding:10px 20px;margin:4px 2px}
	.search-wrap button{right:10px;font-size:2rem}
}

/* only pc */
@media (min-width:1025px){
	#hd.on{background-color:#fff}
	#hd.on nav .gnb1-item{color:#232323}
	#hd.on nav .gnb1-item:hover{color:#004b9f}
	#hd.on .hd-top ul > li a{color:#222222}
	#hd.on #site-map .btn-sitemap{color:#222}
	#wrapper + #hd.fixed{position:fixed;background-color:rgba(0,0,0,.4)}
	#wrapper + #hd.on{background-color:#fff}
	#wrapper + #hd.on.fixed{background-color:#fff}
	nav .gnb1-item:after{content:'';z-index:20;display:block;position:absolute;bottom:0;left: 0;right: 0;width: 0;height:4px;margin: 0 auto;background-color:#004b9f;transition:.3s}
	nav .gnb1-item:hover:after{width:100%;left:0}
	nav .gnb2-bg{display:none}

	/* type02
	#hd:has(.gnb1-li.on){background-color:#fff}
	nav .gnb1-item{display:flex;height:85px;align-items:center;justify-content:center}
	nav .gnb1-li.on .gnb1-item span,
	nav .gnb1-item:hover span{transform:translateY(-100%)}
	nav .gnb1-item span{transition:.3s}
	nav .gnb2-wrap{opacity:0;transition:.3s}
	nav .gnb2-wrap::before{position:absolute;width:12px;height:12px;content:"";top:0;transform:rotate(45deg) translateX(-50%);left:50%;background:var(--bg-grd);border-radius:50%;z-index:10}
	nav .gnb1-li.on .gnb1-item{color:var(--color-ss)}
	nav .gnb1-li.on .gnb2-wrap{display:block;animation:fadeInMenu 0.5s ease-in-out forwards}
	nav .gnb2-item::before{position:absolute;background:var(--bg-trans-grd);border-radius:20px 0 0 20px;content:"";width:94%;right:-100%;height:100%;transition:.3s;top:50%;transform:translateY(-50%)}
	nav .gnb2-item:hover::before{right:0}
	*/
}

@media (max-width:720px){
	.search-wrap{padding:30px 0}
	.search-wrap .subject{font-size:1.6rem}
	.search-wrap .input-text{height:40px;padding:5px 50px 5px 5px}
	.search-wrap .tag-wrap .tag{padding:5px 15px;border-radius:5px}

	#js-show-popup iframe.sns-insta{width:80%;height:calc(80% * 1.5)}

	#onsubmitModal .modal-dialog {width: 100% !important;}

	/*2026.08.12 스트롤 테이블*/
	.scroll-table .tbl-basic tbody :is(th, td){padding: 12px;}
	.scroll-table{overflow-x: auto; position: relative;}
	.scroll-table table{min-width: 740px;}
	.ico-scroll{display:block; width:60px; aspect-ratio: 1 / 1; background:url('../img/sub/ico-mobile.png') rgba(0, 184, 110, .8) center / 60% no-repeat; border-radius:50%; position:absolute; top:20px; left:50%; z-index:10; animation: table-scroll 1s infinite;}
	@keyframes table-scroll {
		0% {transform:translate(-50%, 0);}
		50% {transform:translate(-50%, -10px);}
		100% {transform:translate(-50%, 0);}
	}

}

@media (max-width:320px){
	#ft{font-size:.75rem}
	#ft .ft-link-page ul{display:block;text-align:center}
	#ft .ft-link-page li{display:inline-block}
}

@keyframes fadeInMenu{
	from{
		opacity:0;
		top:100px;
	}
	to{
		opacity:1;
		top:85px;
	}
}