@charset "utf-8";
/* *******************************************************
	* filename : content.css
	* description : 서브 CSS
	* date : 2025-03-18
******************************************************** */
/*#content {padding-top: 32px;}*/
article.w100{ width: 100%}
/* 타이틀 영역 */
.hgroup{ padding-top: 0px !important; width: 100%;
	.inner{ display: flex; flex-direction: column; gap:20px; align-items: center; position: relative; width: 100%; padding:30px 0 0 0; position: relative}
	h2{ font-size: 3rem; font-weight: 700; color: var(--black-color)}
	h3{font-size: 2rem; font-weight: 700;color: var(--gray-900-color) }
	p{ font-size: 1.125rem; color: var(--gray-900-color); text-align: center; word-break: keep-all;}
	.btn_box{ position: absolute; right: 0; top: 40px; display: flex; align-items: center; justify-content: flex-end;
		button, a{ display: flex; align-items: center; padding: 0 1rem; font-size: 1rem; font-weight: 600; gap:1rem; width: auto; border-radius: 0.5rem; background: rgba(0,0,0,0); border: 1px solid var(--black-color); color: var(--gray-900-color); transition: .3s}

		.ico-calendar{ background-size: 22px}
		button:not(:disabled):hover, a:not(:disabled):hover,button:not(:disabled):focus, a:not(:disabled):focus{ background-color: var(--gray-800-color); color: var(--white-color);
			i{  filter: contrast(0) brightness(30)}
		}
	}
}

@media only screen and (max-width: 1023px){
	.hgroup.m_only_left .inner{ display: flex; justify-content: space-between; align-items: center; flex-direction: row;
		.btn_box{ position: relative; right: auto; top: auto;}
	}

}

/* 페이지 하단 주요 버튼 */
.btn_page_box{ margin-top: 80px; display: flex; align-items: center; justify-content: center;
	.btn_more{ height: 45px; display: flex; align-items: center; justify-content: center; padding: 0 12px; font-size: 1.125rem; gap:0.5rem; font-weight: 600; color: var(--black-color); border-bottom: 2px solid var(--black-color);}
	.btn_more:after{ content: ""; display: block; width: 25px; height: 25px; background: url("data:image/svg+xml,%3Csvg width='26' height='25' viewBox='0 0 26 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 12.5H6.5' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M13 19L13 6' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;}
}




/***********
서브 공통요소
************/
section > article {margin:0 auto; max-width:var(--area-width); padding-top: 40px;clear:both; float:none; width: 100%}
/* 탭 */
.innertab{position: relative; display: flex; flex-direction: column; gap:60px;
	.tab {display: inline-flex; align-items: center; justify-content: center; gap: 40px; width: 100%; padding: 0;}
	.tab > button {border: 0; padding: 12px 0; color: var(--gray-600-color); position: relative; font-size: 1.5rem; font-weight: 600; line-height: 32px;}
	.tab > button.on {color: var(--black-color);}
	.tab > button::before {content: ''; position: absolute; left: 50%; bottom: 0; height: 2px; width: 0%; background: var(--black-color); transition: .3s; transform: translate(0%, 0);}
	.tab > button.on::before {width: 100%; transform: translate(-50%, 0);}
}
[data-element="content"]{display: none;}
[data-element="content"].on {display: block;}


/*통합검색*/
#content.total {width: 100%;
	.sch_box {padding-bottom: 60px; text-align: center;}
	.search_content{height: 52px; display: flex; justify-content: center;}
	.input_box {background-color: var(--white-color); width: 680px; height: 52px; padding: 0; border-radius: 2px; border: 1px solid var(--gray-300-color); align-items: center; position: relative; display:flex; vertical-align: top;

		&:focus-within {border: 1px solid var(--gray-800-color);}
		input::placeholder {color: var(--gray-600-color);}
		input[type="text"] {background: none; border: none; outline: none !important; font-size: 1.125rem; font-weight: 400; height: 100%; width: 100%; transition: 0.5s; line-height: 40px; float: left; padding-left: 24px;}
		.searchform_submit {height: 100%; align-items: center; border: 0; width: 56px; background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 22.6668C18.7865 22.6668 22.6667 18.7866 22.6667 14.0002C22.6667 9.21369 18.7865 5.3335 14 5.3335C9.21357 5.3335 5.33337 9.21369 5.33337 14.0002C5.33337 18.7866 9.21357 22.6668 14 22.6668Z' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M25.9596 27.3738C26.3501 27.7643 26.9832 27.7643 27.3738 27.3738C27.7643 26.9832 27.7643 26.3501 27.3738 25.9596L25.9596 27.3738ZM19.2929 20.7071L25.9596 27.3738L27.3738 25.9596L20.7071 19.2929L19.2929 20.7071Z' fill='black'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; float: right;}
		.searchform_cancel {width: 32px; height: 100%; flex: none;}
		.searchform_cancel::before {width: 100%; height: 100%; content: ""; background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.0967 17.0962L7.9043 7.90381' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M7.90332 17.0962L17.0957 7.90381' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; display: block;}
		input:placeholder-shown + .searchform_cancel{display: none !important;}
		button {font-size: 0;}
	}
	p.rslt {padding-top: 20px; font-weight: 500; font-size: 1.75rem; text-align: center; color: var(--gray-700-color); margin: 0;}
	p.rslt strong, p.rslt em {font-weight: 700; color: var(--gray-900-color);}
	hr {margin: 40px 0 60px 0; border: none; width: 100%; outline: none; height: 2px; background: var(--gray-100-color); display: block !important;}
	h3 {font-weight: 500; padding-bottom: 12px; font-size: 1.312rem;}
	.list-txt h3 {padding-bottom: 0; font-size: 1.75rem; font-weight: 600;}
}

.common_wrap{width: 100%;
	/*검색*/
	.sch_box {padding-bottom: 60px; text-align: center;}
	.search_content{ display: flex; justify-content: center; width: 100%}
	.input_box {background-color: var(--white-color); width: 100%; max-width: 680px; padding: 0; border-radius: 2px; border: 1px solid var(--gray-300-color); align-items: center; position: relative; display:flex; vertical-align: top;

		&:focus-within {border: 1px solid var(--gray-800-color);}
		input::placeholder {color: var(--gray-600-color);}
		input[type="text"] {background: none; border: none; outline: none !important; font-size: 1.125rem; font-weight: 400; height: 100%; width: 100%; transition: 0.5s; line-height: 40px; float: left; padding-left: 24px; height: 50px}
		.searchform_submit {height: 100%; align-items: center; border: 0; width: 56px; background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 22.6668C18.7865 22.6668 22.6667 18.7866 22.6667 14.0002C22.6667 9.21369 18.7865 5.3335 14 5.3335C9.21357 5.3335 5.33337 9.21369 5.33337 14.0002C5.33337 18.7866 9.21357 22.6668 14 22.6668Z' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M25.9596 27.3738C26.3501 27.7643 26.9832 27.7643 27.3738 27.3738C27.7643 26.9832 27.7643 26.3501 27.3738 25.9596L25.9596 27.3738ZM19.2929 20.7071L25.9596 27.3738L27.3738 25.9596L20.7071 19.2929L19.2929 20.7071Z' fill='black'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;  flex: none; display: block;}
		.searchform_cancel {width: 32px; height: 100%; flex: none;}
		.searchform_cancel::before {width: 100%; height: 100%; content: ""; background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.0967 17.0962L7.9043 7.90381' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M7.90332 17.0962L17.0957 7.90381' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; display: block;}
		label[for="searchKeyword"] {width: 100%;}
		input:placeholder-shown + .searchform_cancel {display: none !important;}
		button {font-size: 0;}
	}
	.search_form fieldset,.search_form  {display: flex; width: 100%; justify-content: center}
	.align_box {width: 200px; height: 52px; vertical-align: top;}
	.align_box + .input_box, .input_box + .align_box, .align_box + legend + .input_box {margin-left: 20px;}
	.align_box > select {width: 100%; height: 100%; font-size: 1.125rem; font-weight: 500; min-width: 120px}

	/*그외*/
	.title {text-align: center; padding-bottom: 40px; font-size: 3rem; font-weight: 700; line-height: normal;}
	.year + span.month::before, .month + span.day::before {content: '.';}
	.btn_box {text-align: center; margin-top: 60px; clear: both; float: none; }
}
#content .toplist_box{ position: absolute; left: 40px; top: 12px}
.toplist_box, .view_box .toplist_box, .hgroup .toplist_box{ z-index: 5;
	.btn_box{ right: auto; display: flex; align-items: center; padding-top: 0;}
	.btn_box a, .btn_box button{ height: 50px; background: none !important; border: none !important; color: var(--black-color) !important;padding-left: 62px;gap: 12px;padding-right: 0;white-space: nowrap;max-width: none;padding-left: 62px;font-size: 1.125rem;font-weight: 400;display: flex; align-items: center }
	.btn_box .prv::before, .btn_box .nxt::before {content: ''; border: 1px solid var(--gray-300-color); width: 50px; height: 50px; display:flex; position: absolute; left: 0; top: 0; line-height: 50px; text-align: center; border-radius: 50%;}
	.btn_box .prv::before {background: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 6.5L5.5 12.5L11.5 18.5' stroke='%23000000' stroke-width='1.5'/%3E%3Cpath d='M5.5 12.5H20.5' stroke='%23000000' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;}
	.btn_box .nxt::before {left: auto; right: 0; background: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 6.5L20.5 12.5L14.5 18.5' stroke='%23000000' stroke-width='1.5'/%3E%3Cpath d='M20.5 12.5H5.5' stroke='%23000000' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;}
}

.toplist_box {
	.btn_box{ margin: 0;
		a{ background: none; color: var(--black-color); gap:12px; padding-right: 0; white-space: nowrap; max-width: none; padding-left: 62px; font-size: 1.125rem; font-weight: 400}
		a.list:after{ display: none}
		a>span{}

	}
}
span.ico.file, .filedn {background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 11.1144L11.9763 18.7053C10.1516 20.4316 7.1932 20.4316 5.36851 18.7053C3.54383 16.9791 3.54383 14.1803 5.36851 12.454L13.3922 4.86313C14.6087 3.71229 16.581 3.71229 17.7974 4.86313C19.0139 6.01396 19.0139 7.87983 17.7974 9.03067L10.0883 16.3239C9.48012 16.8993 8.49399 16.8993 7.88576 16.3239C7.27753 15.7484 7.27753 14.8155 7.88576 14.2401L14.6509 7.83994' stroke='%23949494' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ") no-repeat 50% 50%; display: block;}
/*스와이퍼*/
.swiper-container {margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1;}
.play_pause {text-align: right; position: absolute; z-index: 11; background: none; overflow: visible; bottom: 20px; left: 10px; max-width: none; margin-left: 0; right: auto;}
.swiper-button-pause, .swiper-button-play {border: 1px solid var(--white-color) !important; color: var(--white-color) !important; background: none; font-size: 0 !important; line-height: 0 !important; min-width: auto; padding: 0; width: 28px !important; height: 28px !important; border-radius: 50%;}
.swiper-button-play::before {content: ''; padding: 8px; background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 8L5.5 13.1962L5.5 2.80385L13 8Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;}
.swiper-button-pause::before {content: ''; padding: 8px; background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.14307 2.85742V13.1431' stroke='white' stroke-width='2'/%3E%3Cpath d='M10.8574 2.85742V13.1431' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;}
.swiper-slide img {width: 100%;}

@media only screen and (max-width: 1023px){
	#content { padding-top: 0px; padding-bottom: 70px}
	.hgroup .inner { padding-top: 100px;gap:12px}
	.hgroup h2{font-size: 2rem}
	.hgroup h3{font-size: 1.52rem}
	.hgroup p{ font-size: 1rem}

	.innertab{gap:40px;
		.tab {gap: 20px; white-space: nowrap; overflow-x: auto; position: relative; z-index: 2; justify-content: flex-start;}
		.tab > button{ padding: 4px 0; font-size: 1rem;line-height: 20px;}
	}
	.int_wrap {
		.txt + .c-wrap, .txt + article, .concept + .c-wrap, .concept + article{ margin-top: 40px !important}
	}
	.btn_page_box{margin-top: 40px}
	.breadcrumb {height: 65px; justify-content: flex-start; align-items: center; position: absolute; left: 20px; top: 0;z-index: 4; padding-top: 40px;
		.bx_menus {
			&> ul {gap: 8px; flex-wrap: wrap; height: 50px; align-items:center}
			&> ul > li {gap: 8px; height: auto}
			&> ul > li:after {border-left: 4px solid transparent; border-right: 4px solid transparent;}
			ul > li > a {width: auto; min-width:auto; font-size: 14px; height: auto;}
			ul > li .depth2{ top: 20px; left: 0}
			ul > li:after{ }
		}
	}
	#content .toplist_box{ position: relative; left: auto; top: auto; padding-top:80px}
	.toplist_box + {		}

	.toplist_box, .view_box .toplist_box, .hgroup .toplist_box {z-index: 2;
		.btn_box{justify-content: flex-start}
		.btn_box a, .btn_box button {font-size: 1rem; padding-left: 0px; height: 40px; line-height: 40px}
		.btn_box .prv::before, .btn_box .nxt::before{ width: 40px; height: 40px; position: relative; left: auto; top: auto}
	}
	section.concert .concert_w{ margin-top: 0; gap:0;
		.monthtit h3+.arrow-box{ width: 100%}
		.calendar_sec{ margin-top: 0}
	}
	.concert_bx .sch_option .opt_month .labelinfo { position: relative; right: auto; bottom: auto; flex-wrap: wrap; justify-content: flex-end; margin-top: 1rem}
	.concert_bx .sch_option .opt_month .labelinfo [class^="play"]{ white-space: nowrap; font-size: 13px}
	.labelinfo [class^="play"] i{ width: 10px; height: 10px}
	.common_wrap {
		.search_form fieldset,.search_form {gap: 8px;}
		.sch_box {padding-bottom: 40px;}
		.input_box input[type="text"], .input_box .searchform_submit{ height: 46px;}
		.input_box input[type="text"]{ font-size: 1rem; padding-left: 14px; padding-right: 20px;}
		.align_box{width: auto; height: auto}
		.align_box + .input_box, .input_box + .align_box, .align_box + legend + .input_box{ margin-left: 0}
		.align_box > select{ font-size: 1rem}
		.btn_box {margin-top: 24px;}
	}
	section > article{padding-top: 40px}
	section >.breadcrumb + .hgroup.blind + article{ padding-top: 100px}
	section >.toplist_box+.breadcrumb + .hgroup.blind + article{ padding-top: 40px}
	div:has(table):not(:has(.footer_box)) {overflow: hidden; overflow-x: auto;
		th, tr, td {font-size: 14px; line-height: 24px; padding: 8px 12px; height: auto;}
		td a {padding: 0;}
	}
}



@media only screen and (max-width: 767px){

	.btn_box, .hgroup .btn_box {gap: 4px;
		button, a {padding: 0 12px; font-size: 1rem; min-width: 120px;}
	}

	section.concert .hgroup .btn_box {
		button, a { white-space: nowrap; gap:0.5rem}
	}

	.common_wrap {
		.search_form fieldset, .search_form {flex-direction: column;}
	}

	.innertab{gap:40px;}

	/*section > article{padding-top: 20px}*/
	section >.breadcrumb + .hgroup.blind + article{ padding-top: 100px}
	section >.toplist_box+.breadcrumb + .hgroup.blind + article{ padding-top: 40px}
	div:has(table):not(:has(.footer_box)) {
		table {min-width: 100%;}
	}
}





/*게시판 공통요소*/
span.thum {display: inline-block; vertical-align: middle; background: #DC3633; color: var(--white-color); padding: 6px 10px; line-height: 20px; border-radius: 2px; font-size: 1rem; font-weight: 600;}
span.new {white-space: nowrap; display: inline-block; vertical-align: middle; background: var(--white-color); color: var(--gray-900-color); padding: 6px 10px; line-height: 20px; border: 1px solid var(--gray-300-color); border-radius: 2px; font-size: 1rem; font-weight: 600;}
span.ico.file, .filedn {width: 24px; height: 24px; font-size: 0; line-height: 0; display: inline-block; overflow: hidden; position: relative; vertical-align: middle; margin-left: 8px;}
h3 span.ico.file {vertical-align: text-bottom;}
.thum + h3 +.ico.file {vertical-align: middle !important;}

/*--리스트 게시판--*/
.default_info > div {padding-bottom: 12px; display: inline-block; vertical-align: middle; font-size: 1rem; font-weight: 400; width: auto;}
.default_info > div > div {display: inline-block; vertical-align: middle; color: var(--gray-600-color); line-height: 32px;}
.default_info em {font-weight: 600; color: var(--black-color); font-style: normal;}
.default_info .total + .page::before, .default_info .align button + button::before {content: ''; display: inline-block; vertical-align: middle; margin: 0 12px; width: 1px; height: 6px; background: var(--gray-300-color);}
.default_info .align button {border: 0; background: none; vertical-align: middle; color: var(--gray-600-color);}
.default_info .align button.on {font-weight: 600; color: var(--black-color);}
.rowtable {border-collapse: collapse; border-top: 1px solid var(--gray-300-color); border-bottom: 1px solid var(--gray-300-color); border-right: 0;

	thead th {background: var(--gray-50-color); border-left: 0; border-bottom: 1px solid var(--gray-300-color); height: 52px; font-size: 1rem; font-weight: 600;}
	tbody td {border-bottom: 1px solid var(--gray-300-color);  padding: 20px 12px; text-align: center; border-left: 0;}
	tbody td[data-th="등록일"]{color: var(--gray-600-color); font-size: 1rem; font-weight: 400;}
	tr.key span + a {margin-left: 16px;}
	tr.key span + span {margin-left: 4px;}
	tr a { vertical-align: middle; font-size: 1.125rem; font-weight: 400; padding: 10px 0}
}
#tbl:has(td[data-th="번호"]){table-layout: auto !important;
	col:nth-child(1) {width: 52px !important;}
	col:nth-child(2) {width: auto !important;}
	col:nth-child(3) {width: 120px !important;}
	td[data-th="번호"] {white-space: nowrap;}
}
#tbl1:has(td[data-th="번호"]), #tbl2:has(td[data-th="번호"]){table-layout: auto !important;
	col:nth-child(1) {width: 52px !important;}
	col:nth-child(2) {width: auto !important;}
	col:nth-child(3) {width: 120px !important;}
	col:nth-child(4) {width: 52px !important;}
	td[data-th="번호"] {white-space: nowrap;}
}

.rowtable.coltable{border-right: 1px solid var(--gray-300-color);
	th,td{ border-left: 1px solid var(--gray-300-color);border-bottom: 1px solid var(--gray-300-color); }
}
.table_box:has(table) {overflow-x: auto;}
@media only screen and (max-width: 1023px) {
	.default_info > div,.default_info .align button, .al span.thum{font-size: 14px}
	thead th {white-space: nowrap;}
	.rowtable tr a,thead th,tbody th,tbody td  {font-size: 1rem;}
	.rowtable tbody td[data-th="등록일"]{font-size: 14px; white-space: nowrap; vertical-align: bottom}
}

/*--리스트 + 이미지 게시판--*/
.thumlist {border-top: 1px solid var(--gray-300-color); clear: both; float: none;

	.list {padding: 0px 12px; position: relative; clear: both; float: none; border-bottom: 1px solid var(--gray-300-color);}
	.list > a {display: inline-flex; align-items: center; justify-content: flex-start; width: 100%; gap:40px}
	.list .img {width: 240px; height: 150px; overflow: hidden; padding: 0; position: relative; align-content: center; text-align: center; position: relative; flex: none;}
	.list .img img { object-fit: cover; object-position: center; position: absolute; left: 50%;top:50%; transform: translate(-50%,-50%); }
	.list .txt {width: 100%; position: relative;overflow: hidden;}
	.list .txt h3 {padding: 0; overflow: hidden;font-size: 1.125rem; font-weight: 600; display: inline-block; white-space: nowrap;text-overflow: ellipsis; max-width: 100%;}
	.list .txt .date {margin-top: 16px; color: var(--gray-600-color);}
	.list .num {white-space: nowrap;}
	.list a.no_img > .img img {}
	span.ico.file, .filedn{ vertical-align: unset;}
}
@media only screen and (max-width: 1023px) {
	.thumlist{
		.list{ padding:0;}
		.list > a{gap:20px}
		.list .txt h3{ font-size: 1rem;overflow: hidden;white-space: normal;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; }
		.list .img{ width: 120px; height: 80px;}
		.list .txt{ padding:20px 0;min-height: 45px;}
		.list .txt .date{ margin-top: 8px;}
		span.ico.file, .filedn{ bottom: 15px !important; right: 0 !important}
		.list .num {display: none}
		.list .txt .date {display: block; font-size: 14px;}
	}
}
/*--썸네일 게시판--*/
.card_box + .card_box {margin-top: 40px;}
.cardlist.book_list {margin-top: 12px;}
.cardlist {clear: both; float: none; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; align-content: flex-start; gap: 40px;

	.list {width: calc(25% - 30px); }
	.list a {display: block;}
	.img {position: relative; width: 100%; margin: 0; padding: 0; font-size: 0; border: 1px solid var(--gray-300-color); border-radius: var(--radius-S);aspect-ratio: 3 / 3.4; background-color: var(--gray-200-color)}
	.img img,.noImg:before {width: 100%; height: 100%; object-fit: cover; object-position: center;aspect-ratio: 3 / 3.4;}

	.txt h3 {font-size: 1.25rem; font-weight: 700; padding-top: 12px;}
	.txt p {font-size: 1.125rem; font-weight: 400; color: var(--gray-800-color); word-break: keep-all; padding-top: 4px;}
	.txt .more {position: absolute; left: 0; top: 0; text-align: center; background: var(--white-color); width: 100%; overflow: hidden; transition: .3s; height: 0; line-height: 0; z-index: 3; opacity: 0;}
	.point{ position: absolute; left: 0;top:-4px;z-index: 2;
		svg path{fill:var(--main-color);}
		strong{ position: absolute; left: 0; top: 0; font-size: 14px; display:flex; align-items: center; justify-content: center; height: 100%; width: 100%; padding-bottom: 10px; text-align: center; color: #000}
	}
}
.man_list .list .txt .h4-title {font-size: 1.25rem; font-weight: 600; padding-bottom: 4px;}
.man_list .list .txt p {font-size: 1.125rem; font-weight:400; color: var(--gray-800-color); padding-top: 0;}

@media only screen and (max-width: 1023px) {
	.cardlist{gap:30px 20px;
		.list {width: calc(25% - 15px); }
		.txt h3{ font-weight: 600; font-size: 1.125rem;}
		.txt p {font-size: 1rem;}
	}

	.man_list .list .txt .h4-title {font-size: 1.125rem;}
	.man_list .list .txt p {font-size: 1rem;}
}

@media only screen and (max-width: 767px) {
	.cardlist{gap:30px 10px;
		.list {width: calc(50% - 5px); }
	}
}


/*--게시판 페이지 넘버링--*/
.footer_box {
	.pagination {margin-top: 60px; text-align: center; display: flex; flex-wrap: wrap; gap:6px; justify-content: center}
	.pagination li {display: inline-block; margin: 0; padding: 0; vertical-align: middle; font-size: 1rem; font-weight: 400;}
	.pagination li a {display: flex; padding: 0 ; height: 48px; min-width: 48px; padding: 0 6px; align-items: center; justify-content: center; text-align: center; align-content: center;border-radius:24px; }
	.pagination li.fst a, .pagination li.prv a, .pagination li.next a, .pagination li.end a {height: 48px; padding: 0;}
	.pagination li a i {width: 100%; height: 100%; border: 1px solid var(--gray-300-color); border-radius: 50%; font-size: 0; line-height: 0; text-indent: -999px; overflow: hidden;}
	.pagination li.fst a i {background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.2853 4.28627L3.71387 12.0006L12.2853 19.7148' stroke='%23757575' stroke-width='2'/%3E%3Cpath d='M19.2853 4.28627L10.7139 12.0006L19.2853 19.7148' stroke='%23757575' stroke-width='2'/%3E%3C/svg%3E ") no-repeat 50% 50%; display: block;}
	.pagination li.prv a i {background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.2857 4.28566L6.7143 11.9999L15.2857 19.7142' stroke='%23757575' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; display: block;}
	.pagination li.next a i {background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.7147 19.7137L16.2861 11.9994L7.71471 4.28515' stroke='%23757575' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; display: block;}
	.pagination li.end a i {background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7147 19.7137L19.2861 11.9994L10.7147 4.28515' stroke='%23757575' stroke-width='2'/%3E%3Cpath d='M3.7147 19.7137L12.2861 11.9994L3.71471 4.28515' stroke='%23757575' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; display: block;}
	.pagination li.active {}
	.pagination li.active a {color: var(--white-color); font-weight: 600;background: var(--black-color);}
	.pagination li.prv {margin-right: 10px;}
	.pagination li.next {margin-left: 10px;}
}

@media only screen and (max-width: 1023px){
	.footer_box .pagination{margin-top: 40px;
		li.fst,li.end{ display: none}
		li a i{  background-size: 15px !important}
		li a{ margin: 0; min-width: 32px !important; height: 32px !important}
	}

}


/*--게시글 자세히 보기--*/
.viewheader {padding-bottom: 20px; text-align: center;
	span.cate {display: inline-block; vertical-align: middle; background: var(--white-color); color: var(--gray-900-color); padding: 6px 10px; line-height: 20px; border: 1px solid var(--gray-300-color); border-radius: 2px; font-size: 1rem; font-weight: 600; margin-bottom: 20px; border-width: 1px 0;}
	h3 {font-size: 2rem; font-weight: 700; line-height: 40px; padding-bottom: 6px;}
	span.thum {background: var(--gray-900-color); color: var(--white-color); vertical-align: middle; margin-bottom: 10px;}
	.detail {color: var(--gray-600-color); font-size: 0;}
	.detail > div {display: inline-block; font-size: 1rem;}
	.detail .date, .detail b {font-weight: 600;}
	.detail > div + div::before {content: ''; display: inline-block; width: 1px; height: 6px; vertical-align: middle; background: var(--gray-300-color); margin: 0 12px;}
	.detail .count label {color: var(--gray-600-color);}
}
.file_link {background: var(--gray-50-color); border-top: 1px solid var(--gray-300-color); border-bottom: 1px solid var(--gray-300-color); padding: 16px 20px;
	li {padding: 4px 0;}
	li a {color: var(--gray-800-color); text-decoration: underline; font-size: 1rem; font-weight: 400;}
	li.cate:before{background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='16' cy='9.3335' rx='4' ry='4' stroke='black' stroke-width='2'/%3E%3Cpath d='M5.33337 22.6667C5.33337 20.4576 7.12424 18.6667 9.33337 18.6667H22.6667C24.8758 18.6667 26.6667 20.4576 26.6667 22.6667V26.6667H5.33337V22.6667Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A")no-repeat 50% 50%; background-size: 16px; margin-bottom: 2px;}
	li.date:before{background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.6667 9.3335H5.33337V26.6668H26.6667V9.3335Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M26.6667 9.3335H5.33337V16.0002H26.6667V9.3335Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.33337 5.3335V9.3335' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.6666 5.3335V9.3335' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; background-size: 16px; margin-bottom: 2px; filter: invert(49%) sepia(0%) saturate(6334%) hue-rotate(163deg) brightness(90%) contrast(55%);}
	li::before {margin-right: 8px; background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 11.1144L11.9763 18.7053C10.1516 20.4316 7.1932 20.4316 5.36851 18.7053C3.54383 16.9791 3.54383 14.1803 5.36851 12.454L13.3922 4.86313C14.6087 3.71229 16.581 3.71229 17.7974 4.86313C19.0139 6.01396 19.0139 7.87983 17.7974 9.03067L10.0883 16.3239C9.48012 16.8993 8.49399 16.8993 7.88576 16.3239C7.27753 15.7484 7.27753 14.8155 7.88576 14.2401L14.6509 7.83994' stroke='%23949494' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E ") no-repeat 50% 50%; content: ''; display: inline-block; width: 16px; height: 16px; vertical-align: middle; filter: invert(49%) sepia(0%) saturate(6334%) hue-rotate(163deg) brightness(90%) contrast(55%);}
	li.link::before {margin-right: 8px; background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 6.55556H6V19H18.4444V12M12.6111 12.3889L20 5M20 5H15.3333M20 5V9.66667' stroke='%23949494' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; content: ''; padding: 0 8px; vertical-align: middle;}
}
.view_box {
	.file_link + .view {border-top: 0;}
	.view {border-top: 1px solid var(--gray-300-color);}
	.view, .editor_area {border-bottom: 1px solid var(--gray-300-color); padding: 40px 0; min-height: 300px;
		* {max-width: 100% !important;}
	}
	.view:not(.se2_outputarea), .editor_area:not(.se2_outputarea){white-space: pre-line;}
	.btn_box {text-align: center; clear: both; float: none; display: flex; align-items: center; justify-content: center; gap: 8px;
		a, button {display: inline-flex; text-align: center; background: var(--gray-600-color); color: var(--white-color); height: 50px; padding: 0 28px; font-size: 1.125rem; font-weight: 700; align-items: center; justify-content: center; gap: 8px; border-radius: 2px;}
		a.key {background: var(--main-color); color: var(--black-color);}
	}
	.file_apply{border-bottom: 1px solid #010101; padding: 30px 0px;
		dl{ padding:30px 20px; position: relative}
		dl:first-of-type{ padding-top: 0}
		dl + dl{  border-top: 1px dashed #999; }
		dl:last-of-type{ padding-bottom: 0}
		dt{ font-weight: 700; font-size: 1.2rem}
		dd{ color: #666; padding-left: 10px; max-width: calc(100% - 200px)}
		dd.round strong:before{ content: "- "}
		dd.info{ color: #2984B7; padding-left: 0px; padding-top: 6px;}
		dd.btn{ position: absolute; right: 30px; top: 0%; padding-top: 30px;}
		dl:first-of-type dd.btn {padding-top: 0; padding-bottom: 30px;}
		dd.btn button{width: 100%; height: 100%; background: #ef4c49; border: none; color: #fff; font-size: 1.125rem; font-weight: 700; padding: 14px 12px;}
		dd.btn button:disabled{background: #999; color: rgba(255,255,255,0.5); cursor: default }
		dd.file{ margin-top: 10px; display: flex; align-items: center; gap: 8px;}
		dd.file:before{background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 16.5V20H21V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5V16' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 12L12 16L8 12' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; content: ''; width: 24px; height: 24px; background-size: 24px; filter: contrast(0) brightness(0);}
		select {width: 32%;}
	}
	.footer_box {
		.btn_box {position: relative; display: block;}
		.btn_box .prv p {text-align: left;}
		.btn_box .nxt p {text-align: right;}
		.btn_box .prv, .btn_box .nxt {position: absolute; left: 0; top: 0; text-align: left; max-width: calc(50% - 320px); min-width: 288px;}
		.btn_box .prv::before, .btn_box .nxt::before {content: ''; border: 1px solid var(--gray-300-color); width: 50px; height: 50px; display: inline-block; position: absolute; left: 0; top: 0; line-height: 50px; text-align: center; border-radius: 50%;}
		.btn_box .nxt {left: auto; right: 0; text-align: right;}
		.btn_box .prv::before {background: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 6.5L5.5 12.5L11.5 18.5' stroke='%23000000' stroke-width='1.5'/%3E%3Cpath d='M5.5 12.5H20.5' stroke='%23000000' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;}
		.btn_box .nxt::before {left: auto; right: 0; background: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 6.5L20.5 12.5L14.5 18.5' stroke='%23000000' stroke-width='1.5'/%3E%3Cpath d='M20.5 12.5H5.5' stroke='%23000000' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;}
		.btn_box .prv a, .btn_box .nxt a {width: auto; line-height: 30px; background: none; color: var(--gray-800-color); font-size: 1.125rem; font-weight: 400; position: relative; padding-left: 62px; display: inline-block; max-width: 100%; height: 50px;}
		.btn_box .nxt a {padding-right: 62px; padding-left: 0;}
		.btn_box p {margin: 0; padding: 0;}
		.btn_box .prv strong, .btn_box .nxt strong {display: block; color: var(--black-color);}
		.btn_box .prv a span, .btn_box .nxt a span {max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 0.875rem; padding-top: 4px;}
		.btn_box .list {width: auto; min-width: 168px; color: var(--white-color); background: var(--black-color); padding: 0 50px; font-size: 1.125rem; font-weight: 700; height: 50px; line-height: 50px; display: inline-block; overflow: hidden; vertical-align: middle;}
		.btn_box .list::after {content: ''; margin-left: 8px; background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 8L5 8' stroke='white' stroke-width='2'/%3E%3Cpath d='M23 14L5 14' stroke='white' stroke-width='2'/%3E%3Cpath d='M23 20L5 20' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; display: inline-block; width: 24px; height: 24px; vertical-align: sub;}
		.btn_box .prv.no::before {background: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 6.5L5.5 12.5L11.5 18.5' stroke='%23757575' stroke-width='1.5'/%3E%3Cpath d='M5.5 12.5H20.5' stroke='%23757575' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;}
		.nxt.no::before {left: auto; right: 0; background: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 6.5L20.5 12.5L14.5 18.5' stroke='%23757575' stroke-width='1.5'/%3E%3Cpath d='M20.5 12.5H5.5' stroke='%23757575' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;}
		.no p {line-height: 50px; font-size: 1rem; font-weight: 400; color: var(--gray-600-color); padding: 0 62px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	}
}

@media only screen and (max-width: 1023px){
	.viewheader {
		span.cate {font-size: 13px; line-height: 18px; padding: 4px 8px; margin-bottom: 12px;}
		h3{ font-size: 1.5rem; line-height: 1.45; padding-bottom: 0.5rem}
		.detail > div,.detail .count label{font-size: 14px}
	}
	.view_box{
		.view, .editor_area{ overflow: auto}
		.btn_box {flex-wrap: wrap;
			a, button {font-size: 1rem; height: 46px;}
			a span {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
		}
		.file_apply {
			dt {font-size: 1.125rem;}
			dd, dd.info {font-size: 14px;}
			dd.file:before {width: 20px; height: 20px; background-size: 20px;}
			dd.btn button {font-size: 1rem; padding: 12px 12px;}
		}
		.footer_box {
			.btn_box .prv::before, .btn_box .nxt::before{display: none}
			.btn_box .prv, .btn_box .nxt{order:1;min-width:auto; width: 100%; max-width: none; position: relative; left: auto; top: auto; right: auto; text-align: left; padding-left: 0; padding-right: 0}
			.btn_box .prv a, .btn_box .nxt a{font-size: 1rem;padding-left: 0; padding-right: 0; height: auto}
			.btn_box .prv a span, .btn_box .nxt a span{ font-size: 1rem}
			.btn_box .nxt p{text-align: left}
			.btn_box .prv p, .btn_box .nxt p{ display:flex; align-items: center; gap:10px}
			.btn_box .prv a span, .btn_box .nxt a span{padding-top: 0}
			.btn_box .list{order: 2; max-width: 600px; margin: 0 auto; width: 100%}
			.btn_box .prv + .list{ margin-top: 1rem}
			.btn_box .prv strong, .btn_box .nxt strong{ white-space: nowrap}
			.btn_box .no p{padding: 0; line-height: inherit; }
		}
	}
	.common_wrap .view_box .footer_box {
		.btn_box {display: flex; flex-direction: column; gap:12px}
	}
}
@media only screen and (max-width: 767px) {
	.view_box {
		.btn_box {flex-wrap: wrap;
			a, button {width: 100%;}
		}
		.file_apply {padding: 20px 0;
			dl {padding: 20px;}
			dd, dd.info {width: 100%; max-width: 100%;}
			dd {padding-left: 0;}
			dd.btn {position: relative; width: 100%; margin-top: 12px; height: auto; top: auto; right: auto; padding-top: 0px;}
			dl:first-of-type dd.btn {padding-bottom: 0;}
			select {width: 92%;}
		}
	}
}

.eduview_wrap_2024 {


}


/* 큰 달력-공연일정 */
.calendar_sec{
	.labelinfo{display: flex; align-items: center; justify-content:flex-start; gap:1rem;}
	.play1, .play1 i{ background:rgba(239, 111, 56, 0.6) !important; color: var(--black-color) !important;}
	.play2, .play2 i{ background:rgba(245,155,21,0.4) !important; color: var(--black-color) !important;}
	.play3, .play3 i{ background:rgba(139,98,82,.25) !important; color: var(--black-color) !important; }
	.play4, .play4 i{ background:rgba(179, 96, 226, .25) !important;; color: var(--black-color) !important;}
	.play5, .play5 i{ background:var(--gray-400-color) !important; color: var(--black-color) !important; }
	.play6, .play6 i{ background:var(--white-color) !important; border: 1px solid var(--gray-500-color) !important; color: var(--gray-900-color) !important; }
	.labelinfo [class^="play"]{ display: flex; align-items: center; color:var(--gray-600-color) !important; gap:3px; border: none !important; outline: none !important; background: none !important; border-radius: 100%; flex: none;  }
	[class^="play"] i,td [class^="play"]{ width: 20px; height: 20px; border-radius: 100%; font-size: 12px; flex: none; display: flex; align-items: center; justify-content: center }

}


.sch_option .opt_month dt .tit,.monthtit { font-weight: 700; font-size: 2rem;letter-spacing: -0.32px; display: flex; gap:3px;
	select{ width: 100%; border: 1px solid rgba(0,0,0,0); padding-left: 0; padding-right: 20px; font-size: 2rem; font-weight: 700; letter-spacing: -0.32px; white-space: nowrap; background-position: right 0 top 50%; }
	.sel_year{ min-width:130px }
	select:focus{border: dashed 1px #EF6F38 !important; outline: none !important}
}
.monthtit, .monthtit h3, .monthtit .tit {gap:1rem; display: flex; align-items: center;
	h3{}
	select{width: auto !important; padding-right: 30px !important; }
}
.concert_w .monthtit{gap:2rem}
.monthly_table{ margin-bottom: 1rem; margin-top: -10px;
	thead th{ background:var(--gray-50-color)}
	ul.schedule_list{ display: flex; flex-direction: column; gap:0.5rem}
	ul.schedule_list a{ display: flex; align-items: flex-start; gap:0.5rem}
	td{ height: 100px; vertical-align: top !important}
	td [class^="play"]{ margin-top: 2px}
	td>strong{font-size: 1.5rem;font-weight: 700; line-height: 1em;display: block;margin-bottom: 0.8125rem;color:var(--gray-900-color);}
	tr th:first-of-type, tr td:first-of-type>strong{ color:#DD2828}
	tr th:last-of-type, tr td:last-of-type>strong{ color:#045DD6}
}

@media only screen and (max-width: 1023px){
	.monthtit .arrow-box button:not(.today-button){ width: 40px !important; height: 40px !important;}
	table.monthly_table{ margin-top: 0; border: none ;
		colgroup,thead{ display: none}
		tbody,tr,td{display: block; width: 100%}
		td{ display: flex; gap:1rem; height: auto; border-left: none }
		td>strong{width: 40px;  flex: none; margin-bottom: 0; font-size: 1.125rem; padding-top: 3px}
		td:not(.have_data){ display: none}
	}
	.calendar_sec .labelinfo{ flex-wrap: wrap; font-size: 13px}

	.concert_w > .monthtit{ }
}

@media only screen and (max-width: 767px){
	.concert_w > .monthtit{justify-content: center}
	section.concert .concert_w .monthtit h3+.arrow-box {display: none}

}


/* 공연상세 */
/*.hgroup{ position: relative} */
.concert .concert_detail{ display: flex; gap:40px;position: relative; flex-wrap: wrap;
	.guide_msg{ color: var(--gray-800-color); font-size: 0.9rem; text-align: center }
}
.pkg.concert .concert_detail {flex-wrap: nowrap; flex-direction: column;}
.concert_booking{ width:var(--poster); position: sticky; right: 0; top: 120px;--poster:345px; order: 2 }
.layout_grid{ display: flex; flex-direction: column; --poster:345px;position: relative;width: calc(100% - var(--poster) - 60px); order: 1;
	&>div{}
	*{ max-width: 100%}
	h4{ font-size: 1.5rem; font-weight: 600}
}
.layout_grid + .layout_grid{order: 3}


.concert_detail .layout_grid{ display: flex; flex-direction: column;
	.poster{ position: relative}
	img{ max-width: 100%}
	.btn_imgview{ position: absolute; left: 0; top: 0; background: rgba(0,0,203,0); z-index: 2; width: 100%; height: 100%}
	.concert_moreinfo > *{ border-top: 1px solid var(--gray-300-color);}
}

.concert_summary{ display: flex; flex-direction: column; gap:40px;
	.viewheader{text-align: left; display: flex; flex-direction: column; gap:20px;align-items: flex-start; padding-bottom: 0;
		h3{ font-size: 2.375rem; font-weight: 600; letter-spacing: -1px; line-height: 1.35}
	}
	.badge-box{ gap:6px; padding: 0}
	.summary_g{ display: flex; flex-direction: column; gap:26px;
		dd dl + dl {margin-top: 12px;}
		dl{ display: flex; gap:12px; font-size: 1.125rem; color: var(--gray-900-color);}
		dt{ flex: none; min-width:100px; font-weight: 700; }
		.sponsor img{ height: 32px}
		dl.sponsor{ align-items: center}
		dd p+p{ margin-top: 0.5rem}
		.pay strong {color: var(--sub-color-amber); font-weight: 800;}
		.pay dd span + span {padding-left: 12px;}
	}
	.comment{background: var(--gray-50-color); padding: 60px 70px; font-size:1rem; color: var(--gray-800-color); line-height: 1.7;
		&>strong, &>em{ display: block; padding-bottom: 0.8rem}
		&>em{ font-weight: 400; padding-bottom: 0.5rem}
		a{ text-decoration: underline}
	}
	.bt_more{ display: inline-flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 30px; border: 1px solid var(--gray-600-color); height: 26px; padding: 0 24px 0 10px; color: var(--gray-800-color); align-self: center; line-height: 24px;background: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M37 23L28 33L19 23' stroke='%23757575' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 100% 50%; background-size: 25px}
	.bt_more#close{background-image: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M37 33L28 23L19 33' stroke='black' stroke-width='2'/%3E%3C/svg%3E%0A")}
}

.concert_moreinfo{display: flex; flex-direction: column;
	[class^="accord_bx_"]{ border-top: 1px solid var(--gray-300-color);}
	.guiding_concert{ color: var(--gray-700-color); font-size: 1.125rem}
	.pkg_box{ padding: 40px 0}
}

[class^="accord_bx_"]{gap:0;
	h4{ padding: 0px 0; width: 100%}
	h4 > button{ padding: 30px 0;font-size: 1.5rem; font-weight: 600; width: 100%; text-align: left; background: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M37 23L28 33L19 23' stroke='%23757575' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 100% 50%; }
	.accordion-panel{ padding: 40px 0}
	.thum_w .list_box{gap:40px 20px}
	.thum_w .list_box .list{gap:12px}
	.thum_w .list_box .img img, .thum_w .list_box .img.noImg:before{aspect-ratio: 3 / 4;}
	h4 > button[aria-expanded="true"]{background-image: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M37 33L28 23L19 33' stroke='black' stroke-width='2'/%3E%3C/svg%3E%0A");}
	.view, .editor_area{ border-bottom: none; padding: 0}
	.accordion-panel * + .editor_area{ padding-top: 40px}

}

.pkg_box {
	h4{ padding: 0 0 30px 0}
	.list_box { gap:40px 20px;
		.list{gap:14px}
		.noImg{ height: auto}
		.list-img img, .noImg:before{aspect-ratio:4/3 }
		& .list-con, & .list-txt{gap:6px;
			h3{ font-size: 1.3125rem}
			.font-subTitle{ font-size: 1rem}
			p.font-b4{ font-size: 0.875rem; padding-top: 6px}
		}
	}

}
.concert_booking{ display: flex; flex-direction: column; gap:20px;
	*{ max-width: 100%}
	.poster{ min-height: 345px; position: relative}
	.poster.noImg{ background-color: rgba(237,237,237,1.00); max-height: 400px}
	.poster .btn_imgview{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
	.btn_box.edu_type {gap: 6px;}
	.btn_box{ margin: 0; width: 100%; display: flex; flex-direction: column; gap:1px; margin-top: -12px;
		button{background: var(--gray-900-color); height: 50px; color: var(--white-color); width: 100%; font-weight: 600; font-size: 1.125rem; display: flex; align-items: center; justify-content: center;gap:6px;
			&:disabled{ cursor: auto;background: var(--gray-300-color); color: var(--gray-900-color)}
			&.ticket:after{background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 6.55556H6V19H18.4444V12M12.6111 12.3889L20 5M20 5H15.3333M20 5V9.66667' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;display: block;width: 25px; height: 25px; content: "" }
			&.ticket:disabled:after{ filter:brightness(0.25) }
		}
	}
}

.favorite_box{ display: flex; gap:9px;position: relative; flex-wrap: wrap; width: 100%;
	button{ background: var(--white-color); height: 50px; display: flex; align-items: center; justify-content: center;width: calc(50% - 5px);border: 1px solid var(--gray-300-color); font-size: 1.125rem; color: var(--gray-900-color); font-weight: 600; white-space: nowrap; gap:6px }

	button:after{content: "";background: url("data:image/svg+xml,%3Csvg width='25' height='26' viewBox='0 0 25 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4934 20.5C12.3746 20.3931 12.2413 20.2729 12.0956 20.1409C11.4708 19.5753 10.6189 18.7964 9.7099 17.9428C7.86762 16.2127 5.86782 14.2465 4.99514 13.1079C3.45019 11.0922 3.71749 8.24403 5.70394 6.52316C7.60566 4.87569 10.1654 5.29954 11.7757 7.20834L12.4934 8.05907L13.2111 7.20834C14.8143 5.30798 17.3406 4.88651 19.2927 6.53156C21.2974 8.22093 21.5449 11.0813 19.9916 13.1079C19.119 14.2465 17.1192 16.2127 15.2769 17.9428C14.3679 18.7964 13.516 19.5753 12.8912 20.1409C12.7455 20.2729 12.6121 20.3931 12.4934 20.5Z' stroke='%23949494' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; width: 26px; height: 26px; display: block }
	.share:after{background-image: url("data:image/svg+xml,%3Csvg width='25' height='26' viewBox='0 0 25 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.5' cy='13' r='2.5' stroke='%23949494' stroke-width='1.5'/%3E%3Ccircle cx='17.5' cy='7' r='2.5' stroke='%23949494' stroke-width='1.5'/%3E%3Ccircle cx='17.5' cy='19' r='2.5' stroke='%23949494' stroke-width='1.5'/%3E%3Cpath d='M9.5 14L15 17.5' stroke='%23949494' stroke-width='1.5'/%3E%3Cpath d='M9.5 12L15 8.5' stroke='%23949494' stroke-width='1.5'/%3E%3C/svg%3E%0A");}

	.fav.on:after {background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4934 20C12.3746 19.8931 12.2413 19.7729 12.0956 19.6409C11.4708 19.0753 10.6189 18.2964 9.7099 17.4428C7.86762 15.7127 5.86782 13.7465 4.99514 12.6079C3.45019 10.5922 3.71749 7.74403 5.70394 6.02316C7.60566 4.37569 10.1654 4.79954 11.7757 6.70834L12.4934 7.55907L13.2111 6.70834C14.8143 4.80798 17.3406 4.38651 19.2927 6.03156C21.2974 7.72093 21.5449 10.5813 19.9916 12.6079C19.119 13.7465 17.1192 15.7127 15.2769 17.4428C14.3679 18.2964 13.516 19.0753 12.8912 19.6409C12.7455 19.7729 12.6121 19.8931 12.4934 20Z' fill='%23F59B15'/%3E%3C/svg%3E%0A");}
	.share.on{ border-color: var(--gray-600-color)}

	.layer{ width: 100%; display: none }
	.layer.active{ display: block}
	.sns{ width: 100%}
	.sns ul{  display: flex; align-items: center; justify-content: center; background: #fff; align-items: center; gap:10px; padding:9px 10px; border: 1px solid var(--gray-300-color); width: 100%; }
	.sns li>a{ width: 36px; height: 36px; display: flex; flex: none; background-size: 22px}
}


@media only screen and (max-width: 1200px){
	.layout_grid,.concert_booking{--poster: 260px;}
	[class^="accord_bx_"] .thum_w .list_box .list,.pkg_box .list_box .list{min-width: auto; width: calc(33.3% - 14px)}
	.concert_booking .poster, .concert_booking .poster.noImg{ min-height:260px; height: auto}

}

@media only screen and (max-width: 1023px){
	.layout_grid,.concert_booking{--poster: 200px;}
	.concert_summary {gap:32px;
		.viewheader h3 {font-size: 1.625rem}
		.summary_g dl{ font-size: 1rem}
		.comment{ padding: 24px; font-size: 14px;
			&>strong{font-size: 1rem}
		}
	}
	.favorite_box button{ font-size: 1rem; gap:4px; height: 46px}
	.favorite_box button:after{background-size: 20px; width: 20px; height: 20px}
	[class^="accord_bx_"]{
		h4 > button{padding: 20px 0; font-size: 1.3rem}
		.accordion-panel{ padding: 30px 0}
		.thum_w .list_box{gap:30px 10px}
	}
	[class^="accord_bx_"] .thum_w .list_box .list, .pkg_box .list_box .list{width: calc(33.3% - 7px); font-size: 14px}
	.pkg_box .list_box{gap:30px 10px}

	.pkg_box {
		.list_box { flex-wrap: nowrap; overflow-x: auto;
			.list{min-width: 200px}
			.list-con, .list-txt {gap:4px;
				h3 { font-size: 1.125rem; margin-bottom: 4px}
				.font-subTitle{ font-size: 11px;}
				p.font-b4{ font-size: 10px; padding-top: 4px}
			}
		}
	}


}

@media only screen and (max-width: 767px){
	.concert .concert_detail{ flex-direction: column;}
	.layout_grid, .concert_booking{--poster: 100%; width: 100%; order: 2; position: relative}
	.concert_booking{ order: 1; top: auto;z-index: 3; height: auto; position: unset}
	.concert_summary{
		.summary_g dt{ min-width: 70px}
	}
	.concert_booking .btn_box{ position: fixed;bottom: 0; left: 0;}
	[class^="accord_bx_"] .thum_w .list_box { flex-wrap: nowrap; overflow-x: auto;
		.list{ min-width: 130px}
	}
}

/* 패키지 */
.pkg_int,  .pkg_list{
	h4{ font-size: 2.25rem; font-weight: 600; color: var(--black-color); margin-bottom: 28px; text-align: left;}
	.txt{ display: flex; flex-direction: column; gap:40px; font-size: 1.125rem; color: var(--gray-900-color);
		h4{ margin-bottom: 0}
	}
}
.schedule.pkg_int, .pkg_list{
	.inner+.inner{ margin-top: 60px}
}
.schedule.pkg_int .inner, .pkg_list .inner,  .pkg_list .list{
	h4{ margin-bottom: 28px}
	.table_box + h4{ margin-top: 60px}
}
.schedule.pkg_int{padding: 0;
	.box1{ display: flex; gap:20px; }
	dl{ border: 1px solid var(--gray-300-color); padding: 32px; display: flex; flex-direction: column; align-items: flex-start;min-width: calc(33.3% - 13px); gap:20px;}
	dt>strong{ border: 1px solid var(--gray-300-color); height: 32px; display: flex; align-items: center; justify-content: center; padding: 0 10px; font-weight: 600; width: auto; color: var(--gray-900-color); align-content: center; line-height: 32px }
	dl .date{ font-size: 1.5rem; font-weight: 600; margin-bottom: 6px}
	dd {text-align: left;}
	dd > p{ display: flex; padding: 4px 0; gap:20px}
	dd > p>strong{ min-width:90px; flex: none }

	dl.on dt>strong{ border: none; background:var(--main-color) }
}
.schedule.pkg_int:before {background: none; content: none;}
.pkg_list .schedule.pkg_int{
	dl{ padding: 40px; margin-bottom: 40px}
	dd{ flex-direction: row; display: flex; gap:30px; align-items: center}
	dd .date{font-size: 2.25rem; letter-spacing: -0.5px; margin-right: 20px}
	dd>p{ font-size: 1.125rem}
	dd > p>strong{ min-width: auto}
	ul.list_box {border: 0; margin-bottom: 0;

		li {border-bottom: 0;}
		.list-txt h3 {font-size: 1.75rem; font-weight: 600; line-height: 36px; padding-bottom: 0;}
		.list-txt p {font-size: 1rem;}
	}
}
.pkg_list{
	.thum_w .list_box .list .list-img img{aspect-ratio:19 / 12;}
	.thum_w .list_box .list-txt h3{ white-space: normal; text-overflow: unset; margin-bottom: 0; align-content: center; font-size: 1.75rem;}
	.thum_w .list_box .list-txt h3 .total{ display: inline-flex; align-items: center; justify-content: center; background:var(--gray-100-color); height: 26px; font-size:1rem; font-weight: 600; padding: 0 0.5rem; border-radius: var(--radius-SS); align-content: center }
}
.pkg_wrap{
	article+article{ margin-top: 60px}
	.program .img{ display: flex; flex-wrap: wrap; gap:9px;
		&>div{ width:calc(12.5% - 8px); flex: none; border-radius: var(--radius-S); overflow: hidden;aspect-ratio: 3 / 3; position: relative; position: relative  }
		img{ width: 100%; height: 100%; object-fit: cover; }
		&>div>span{ position: absolute; left:0px; bottom: 0px; color: #fff; font-size:0.875rem;z-index: 2; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 15.48%, rgba(0, 0, 0, 0.80) 82.14%); padding:20px 10px 10px 14px; width: 100%  }
		&>div>span>strong{ display: block}
	}
	.program + .schedule{ margin-top: 28px}
	.info{ background: var(--gray-50-color); color: var(--gray-800-color); padding: 40px 50px; }
	ul.info{ display: flex; flex-direction: column; gap:8px; border: 0; margin-bottom: 0;
		li {display: block; text-align: left; border-bottom: 0; line-height: 24px;}
		li:before{ content: "-"}
	}
	ul.box{ display: flex; flex-direction: column; gap:8px;
		li{ position: relative; padding-left: 1rem}
		li:before{ content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 100%; background: var(--black-color)}
	}
	*+.info{ margin-top: 28px}
	.package_all .thum_w .list_box{ justify-content: center}
	.package_all .thum_w .list_box .list, .package_all .thum_w .list_box .list>a{ flex-direction: row; width: auto; gap:30px}
	.package_all .thum_w .list_box .list .list-img{ width: 200px}
	.package_all .thum_w .list_box .list .list-img img{aspect-ratio: 3 / 4.5;}

	.pkg_list .pkgimg .info{background: none; margin: 0; padding: 0;
		h4{margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;}
		h4 span.type {padding: 0 10px; text-align: center; border-radius: 2px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: none; white-space: nowrap; font-weight: 600; font-size: 1rem; background-color: var(--white-color); box-shadow: 0 0 0 1px var(--gray-300-color) inset; color: var(--gray-900-color);}
	}
}

.pkgimg{display: flex; justify-content: flex-start; gap:80px 20px; flex-wrap: wrap;
	&+&{ margin-top: 60px}
	&>h4{ width: 100%; margin-bottom: -80px !important}
	.brick{ width: calc(25% - 15px) ; flex: none; display: flex; flex-direction: column; gap:20px; min-width: 205px; position: relative  }
	.brick>a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0 }

	.pic{ object-fit: cover; border-radius: var(--radius-S); overflow: hidden; display: block; background-color: #ddd;
		img, &.noImg:before { width: 100%; height: 100%; aspect-ratio: 3/4.5;  object-fit: cover;  object-position: center;}
		&.noImg {aspect-ratio: 3/4.5; height: auto;}
	}

	.info{ display: flex; flex-direction: column; gap:14px; text-align: left; background: none; margin: 0; padding: 0;
		h4{letter-spacing: -0.56px; text-align: left; font-size:1.35rem; margin: 0 }

	}
	.badge-box{ height: auto; display: flex; gap:6px; justify-content: flex-start;
		[class^="badge-"]{height: 34px}
	}
}

.inner.thum_w{display: flex; justify-content: flex-start; gap:80px 20px; flex-wrap: wrap; align-items: stretch;
	&>.list,&>a {max-width: calc(33.33% - 15px); min-width: 285px; width: 100%  }
	dl {position: relative; text-align: left;  border: 1px solid var(--gray-300-color); width: 100%; display: flex; flex-direction: column; height: 100%; padding-bottom: 30px }
	dl dt {font-size: 28px; font-weight: 700; word-break: keep-all;
		&>strong{ padding: 30px 40px 20px 40px; display: block;}
	}
	dl dd {color: var(--gray-800-color); font-size: 1rem; font-weight: 400; padding: 0 40px}
	.noImg{aspect-ratio: 3 / 2; height: auto	}
	.img {width: 100%;  margin: 0; padding: 0; overflow: hidden;  position: relative;
		img{width: 100%; height:100%;aspect-ratio: 3 / 2;object-fit: cover;object-position: center;}
	}
}
.news span.bul {background: var(--white-color); border: 1px solid var(--gray-300-color); color: var(--gray-600-color); white-space: nowrap; vertical-align: middle; font-size: 1rem; font-weight: 700; min-width: 62px; border-radius: 2px; padding: 7px 10px; line-height: 20px; display: inline-block;}
.news span.ing {background: var(--main-color); border: 0; color: var(--black-color);}
.view_box span.bul {margin-bottom: 10px;}
.se2_outputarea * {width: unset; max-width: 100%;}
@media only screen and (max-width: 1023px){
	.pkg_int,  .pkg_list {
		.txt {gap: 16px;}
		h4 {font-size: 1.5rem; margin-bottom: 16px;}
		p{font-size: 1rem;}
	}
	.pkg_list {
		.table_box table th, .table_box table tr {padding: 12px 8px; white-space: nowrap;}
		table td {white-space: nowrap;}
		.indiList .pkgimg {gap: 40px 20px;
			&>h4{margin-bottom: -20px !important;}
			.brick {gap: 12px; min-width: auto;}
			.info {gap: 4px;}
			p.date {font-size: 0.875rem;}
			.info h4 {font-size: 1.125rem !important;}
		}
		.thum_w .list_box .list-txt h3 .total {font-size: 0.875rem; height: 24px;}
	}
	.schedule.pkg_int, .pkg_list{
		.inner+.inner{ margin-top: 0px}
	}
	.schedule.pkg_int .inner, .pkg_list .inner,  .pkg_list .list{
		h4{margin-bottom: 16px; font-size: 1.5rem !important}
		.table_box + h4 {margin-top: 40px;}
		h4 + ul {margin-top: 0;}
	}
	.pkg_wrap {
		article+article{ margin-top: 40px}
		.program .img {gap: 6px;
			&>div {width: calc(25% - 13px);}
			&>div>span {font: 13px; padding: 0 0 8px 8px;}
		}
		.info{padding: 24px; margin-top: 40px;}
		ul.info {
			li {padding: 0; font-size: 14px;}
		}
		.package_all .thum_w .list_box .list, .package_all .thum_w .list_box .list>a {gap: 20px; width: 100%; flex-wrap: wrap; justify-content: center;}
		.pkg_list .pkgimg .info {
			h4 span.type {font-size: 0.875rem; height: 24px;}
		}
	}
	.schedule.pkg_int {
		.box1 {gap: 12px; flex-direction: column;}
		dl {padding: 24px; gap: 16px;}
		dt>strong {padding: 0 6px; height: 24px; font-size: 13px;}
		dl .date {font-size: 1.312rem;}
		dd > p {gap: 16px; font-size: 14px;}
		.list.thum_w ul.list_box {gap: 20px;
			li {padding: 0;}
		}
	}
	#all_pkg_list {margin-bottom: 40px;}
	.pkg_list .schedule.pkg_int {
		dl {padding: 24px;}
		dd {flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12px;}
		dd .date {font-size: 1.312rem;}
		dd>p {font-size: 14px; padding: 0; gap: 12px;}
		.individualPackage {margin-bottom: 0;}
		ul.list_box {
			.list-txt h3 {font-size: 1.312rem; line-height: 32px;}
			.list-txt p {font-size: 0.875rem;}
		}
	}
	.inner.thum_w{gap:40px 20px;
		&>.list,&>a{ min-width: auto}
		dl dt>strong,dl dd{padding-left: 20px; padding-right: 20px}
		dl dt>strong{ font-size: 1.125rem; padding-bottom: 12px}
	}
}
@media only screen and (max-width: 767px){
	.pkg_wrap{
		.package_all .thum_w .list_box .list, .package_all .thum_w .list_box .list>a {justify-content:center; gap: 12px;}
		.program .img {
			&>div {width: calc(33.33% - 4px);}
		}
	}
	.pkg_list {
		.indiList .pkgimg {
			.brick {width: calc(50% - 10px); min-width: auto;}
		}
	}
	.inner.thum_w{
		&>.list,&>a{max-width: calc(50% - 10px)}

	}

}



/* 신청 폼 */
.formbox.orderbox{ max-width: 960px; margin: 0 auto;
	.table_box:first-child {padding-top: 40px !important;}
	.table_box{ display: flex; flex-direction: column; gap:40px; padding-top: 0 !important;}
	h4{ font-size: 1.5rem; font-weight: 600; border-bottom: 1px solid var(--gray-300-color); padding-bottom: 24px}
	h4>span{ font-size: 1rem; display: block; color: var(--gray-800-color); font-weight: 500; padding-top: 0.5rem}
	form#form[novalidate="novalidate"] {display: flex; flex-direction: column; gap:60px;}
	.input_sec{ display: flex; flex-direction: column; gap:60px; margin-top: 60px;
		#introduceLength, #careerContentLength {padding-top: 6px;}
		table.coltable {gap: 0; display: table;}
		.coltable{ display: flex; /*flex-wrap: wrap;*/ gap:40px; flex-direction: column;}
		span.bul {margin-bottom: 0; margin-left: 12px;}
		dl{ flex: none; width: /*calc(50% - 20px)*/100%; display: flex; flex-direction: column;gap:16px}
		dt{ font-size: 1rem; font-weight: 600}
		dd strong{ font-weight: 400; white-space: nowrap; color:var(--gray-700-color)}
		dd{ display: flex; align-items: center; gap:1rem; min-height: 50px; position: relative}
		input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], input[type="time"]{ padding-right: 8px; min-width: 60px; padding-left: 8px;}
		input[type="text"].error, input[type="password"].error, input[type="number"].error, input[type="email"].error, input[type="tel"].error, input[type="time"].error, .input textarea.error, select.error {border: 2px solid #DF2211 !important;}
		dl.adres, .max-width, dl.type, dl.fileadd{ width: 100%}
		dl.adres dd{ flex-direction: column; gap:10px}
		dl.adres dd>div{ width: 100%; display: flex; gap:10px; align-items: center}
		dl.adres dd>div strong{ width: 88px; flex: none; text-align: center}
		.tdbtn, button.dn, button.add, button.del{ background: var(--gray-200-color); flex: none; padding: 0 1rem; height: 50px; border-radius: var(--radius-SS); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem}
		.date-picker, .picker{ width: 100%}
		dl.adres [type="text"]:disabled, dl.adres [type="text"]:read-only{ background: var(--gray-50-color); }
		.seat{ display: flex; gap:1rem; align-items: center; width: 100%}
		label.chk span, .seat span{ white-space: nowrap}
		label.chk + .seat{ margin-left: 20px}
		dd span.info{ position: absolute; bottom: -26px; left: 0; font-size: 0.85rem; color: var(--gray-600-color)}
		dl.fileadd dd{ flex-direction: column; align-items: flex-start}
		tbody td {padding: 20px 6px;}
		td[data-th="교육기간"], td[data-th="근무기간"], td[data-th="활동기간"] {display: flex; flex-direction: row; align-items: center; justify-content: flex-start; border-bottom: 0; gap: 4px;
			.picker {display: flex; flex-direction: row; align-items: center; gap: 4px;}
		}
		table.result td[data-th="교육기간"], table.result td[data-th="근무기간"], table.result td[data-th="활동기간"] {display: table-cell; align-items: center; border-bottom: 1px solid var(--gray-300-color);
			.picker {display: flex; flex-direction: row; align-items: center; gap: 4px;}
		}
		select[name="careerForm"] {padding-right: 32px;}

		/*폼 추가변경*/
		.patit {border-bottom: 1px solid var(--gray-300-color); padding-bottom: 24px}
		.patit h4 {border-bottom: none; padding-bottom: 0;}
		.conment {font-size: 0.875rem; color: var(--gray-700-color); padding-top: 8px;}
		.coltable .list div.tit {display: block;}
		.coltable .list div.tit .conment {padding-top: 4px;}
		.coltable .list {flex: none; width: 100%; display: flex; flex-direction: column;gap:8px}
		.coltable .list span {font-size: 1rem; font-weight: 600;}
		.coltable .list div {display: flex; align-items: center; gap:1rem; min-height: 50px; position: relative;}
		.coltable .list div.input_g, .coltable .list div.guide {display: block;}
		.coltable .list div.fileadd {flex-direction: column; align-items: flex-start;}
		.list .input textarea {height: 220px;}
		.list.term_sec .box {display: block;}
		.list.term_sec .box span {font-weight: 400;}
		.list.term_sec .checkbox {justify-content: flex-end;}
		.list.term_sec .box .txt {flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px;}
		.list .adres {flex-direction: column; gap:10px; align-items: flex-start;}
		.list .adres > div {width: 100%; display: flex; gap: 10px; align-items: center;}
		.adres [type="text"]:disabled, .adres [type="text"]:read-only{ background: var(--gray-50-color); }
		.adres div.detail_adr strong{ width: 88px; flex: none; text-align: center; font-weight: 400; white-space: nowrap; color: var(--gray-700-color);}
		.lintit {font-size: 0.875rem; font-weight: 500; text-align: center}
		.list .rowtable .chk {justify-content: center;}
		.esin .tit > span:after {content: '*'; font-weight: 600; font-size: 1rem; color: #DF2211; padding-left: 2px;}
		.date_wrap, .period_wrap {display: flex; gap: 0.5rem; align-items: center; flex-direction: column !important;}
		.date_w {width: 100%;}
		.range_w {position: relative; display: inline-block; border-radius: 0px; line-height: 1;    border-radius: 0.25rem; background-color: #fff; width: 100%;}
		.range_w:before{ position: absolute; left: 0; top: 0;width: 40px; content: ""; background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.6667 9.3335H5.33337V26.6668H26.6667V9.3335Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M26.6667 9.3335H5.33337V16.0002H26.6667V9.3335Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.33337 5.3335V9.3335' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.6666 5.3335V9.3335' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; background-size: 24px; height: 50px; display: block;}
		input.datepicker{height: 50px; display: block; margin: 0 !important; background-color: initial; padding-left: 40px;}
		input.datepicker.has-value {color: #000; /* 선택 완료 시 검정색 */}
		.dateTime {display: flex; width: 100%; align-items: center;}
		.dateTime #conferenceHour {margin-right: 8px;}
		.dateTime #conferenceMin {margin-right: 8px; margin-left: 16px;}

		.small_info li{position: relative; padding: 4px 0 4px 10px;}
		.small_info li:before {content: ""; display: block; width: 3px; height: 3px; background: var(--black-color); position: absolute; left: 0px; top: 14px; border-radius: 100%;}
	}
	.program_info{background:var(--gray-50-color); color:var(--gray-900-color); padding: 50px 80px;
		.coltable{ flex-direction: column; gap:26px}
		dl{ flex-direction: row; align-items: center; width: 100%;gap:1rem; font-size: 1.125rem;}
		dt{ min-width: 100px; color:var(--gray-900-color); font-weight: 700 }
		dd{ min-height: auto; color:var(--gray-900-color);}
		dl.tit dt{ display: none}
		dl.tit dd{ font-size: 1.5rem; font-weight: 700}

		/*폼 추가변경*/
		.coltable span {font-size: 1.125rem; olor:var(--gray-900-color); font-weight: 400}
	}
	.prd_box, .prd_box .picker{display: flex; gap:3px; align-items: center;  }
	.term_sec{ position: relative;
		h4{ border: none; }
		.txt{ border: 1px solid var(--gray-300-color); padding: 30px 40px; color: var(--gray-800-color); border-radius: var(--radius-SS)}
		.checkbox{ position: absolute; right: 0; top: 0}
	}
	.guide{ font-size: 1rem; color:var(--gray-800-color) }
	h4 + .input{ margin-top: -41px}
	h4 + .input textarea{ height: 220px}
	.btn_box{ font-size: 1rem; display: flex; align-items: center; justify-content: center;gap:10px; margin-top: 0;
		a{ border: 1px solid var(--gray-300-color); border-radius: var(--radius-SS); background: #fff; color: var(--gray-900-color); height: 50px; min-width: 160px; font-weight: 600; display: flex; align-items: center; justify-content: center }
		a.key{ border: none; background:var(--gray-900-color); color: var(--white-color) }

	}
	.flex{ gap:1rem}
}
/* 별점 */
.star_g{ display: flex; gap:0px; justify-content: center}
.star_g .star{  flex: none; display: flex; flex-direction:column ; gap:12px; align-items: center; justify-content: center; color:var(--black-color); font-size: 1rem}
.star_g .star:before{background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L24.4498 15.8056L35 17.077L27.2 24.4086L29.2705 35L20 29.7256L10.7295 35L12.8 24.4086L5 17.077L15.5502 15.8056L20 6Z' stroke='%23F59B15' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; content: ""; display: block; width: 40px; height: 40px}
.star_g .star.s-half:before{ background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L24.4498 15.8056L35 17.077L27.2 24.4086L29.2705 35L20 29.7256L10.7295 35L12.8 24.4086L5 17.077L15.5502 15.8056L20 6Z' stroke='%23F59B15' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M10.7295 35L20 29.7256V6L15.5502 15.8056L5 17.077L12.8 24.4086L10.7295 35Z' fill='%23F59B15' stroke='%23F59B15' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}
.star_g .star.on:before{ background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L24.4498 15.8056L35 17.077L27.2 24.4086L29.2705 35L20 29.7256L10.7295 35L12.8 24.4086L5 17.077L15.5502 15.8056L20 6Z' fill='%23F59B15' stroke='%23F59B15' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}
.star_g .star:disabled{ opacity: 1; cursor: default}

/* 날짜 피커 */
/* jQuery Date Range Picker */
.date-picker {width: 170px; height: 25px; padding: 0; border: 0; line-height: 25px;  padding-left: 10px; font-weight: bold; cursor: pointer; color: #303030; position: relative; z-index: 2;}
.date-picker-wrapper {position: absolute; z-index: 2; padding: 5px 0px; line-height: 20px; -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); -webkit-box-sizing: initial; box-sizing: initial; background: #fff}
.dp-clearfix {clear: both; height: 0; font-size: 0; display: none}
.date-picker-wrapper.inline-wrapper {position: relative; -webkit-box-shadow: none; box-shadow: none; display: inline-block; padding: 5px 0; line-height: 20px}
.date-picker-wrapper.single-date {width: auto}
.date-picker-wrapper.no-shortcuts {padding-bottom: 12px}
.date-picker-wrapper.no-topbar {padding-top: 12px}
.date-picker-wrapper .footer {font-size: 11px; padding-top: 3px}
.date-picker-wrapper b {color: #666; font-weight: 700}
.date-picker-wrapper a {color: #6bb4d6; text-decoration: underline}
.date-picker-wrapper .month-name {text-transform: uppercase; font-size: 1.08rem; font-weight: 700; color: #111; height: auto}
.date-picker-wrapper .select-wrapper {position: relative; overflow: hidden;display: inline-block; vertical-align: middle;}
.date-picker-wrapper .select-wrapper:hover {text-decoration: underline}
.date-picker-wrapper .month-element {display: inline-block; vertical-align: middle}
.date-picker-wrapper .select-wrapper select {position: absolute; margin: 0; padding: 0; left: 0; top: -1px; font-size: inherit; font-style: inherit; font-weight: inherit; text-transform: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: 0; outline: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; filter: alpha(opacity=1); opacity: 0.01;}
.date-picker-wrapper .month-wrapper {border-radius: 3px; background-color: #fff; padding: 0 0 5px 0; cursor: default; position: relative; _overflow: hidden; display: flex; justify-content: space-between; flex-wrap: wrap}
.date-picker-wrapper .month-wrapper table {width: 224px; border: none; flex: none}
.date-picker-wrapper.single-date .month-wrapper table {width: 260px}
.date-picker-wrapper .month-wrapper table.month2 {flex: none}
.date-picker-wrapper .month-wrapper table th, .date-picker-wrapper .month-wrapper table td {vertical-align: middle; text-align: center; line-height: 14px; margin: 0px; padding: 0px; height: auto}
.date-picker-wrapper .month-wrapper table .day {padding: 5px 0; line-height: 1; font-size: 14px; margin-bottom: 1px; color: #ccc; cursor: default; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex: none; font-size: 16px;}
.date-picker-wrapper .month-wrapper table div.day.lastMonth, .date-picker-wrapper .month-wrapper table div.day.nextMonth {color: #999; cursor: default}
.date-picker-wrapper .month-wrapper table .day.checked {background-color: #004DE5; color: #fff !important; border-radius: 50%; font-weight: 600;}
.date-picker-wrapper .month-wrapper table .week-name {height: 20px; line-height: 20px; font-weight: 100; text-transform: uppercase; font-size: 14px;}
.date-picker-wrapper .month-wrapper table .day.has-tooltip {cursor: help !important}
.date-picker-wrapper .month-wrapper table .day.has-tooltip .tooltip {white-space: nowrap}
.date-picker-wrapper .time label {white-space: nowrap; display: flex; width: 100%; gap: 0.5rem; margin: 0; font-weight: 400}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid {color: #333; cursor: pointer}
.date-picker-wrapper .month-wrapper table .day.toMonth.hovering {background-color: #E7EFFF; color: #333 !important;}
.date-picker-wrapper .month-wrapper table .day.nextMonth, .date-picker-wrapper .month-wrapper table .day.lastMonth {display: none}
.date-picker-wrapper .month-wrapper table .day.real-today {background-color: #ffe684; border-radius: 100%; color: #333 !important;}
.date-picker-wrapper .month-wrapper table .day.real-today.checked, .date-picker-wrapper .month-wrapper table .day.real-today.hovering {background-color: #E7EFFF; border-radius: 0}
.date-picker-wrapper .month-wrapper table .day.real-today.first-date-selected {border-radius: 100%}
.date-picker-wrapper table .caption {height: 50px}
.date-picker-wrapper table .caption > th {padding: 5px 0}
.date-picker-wrapper table .caption > th:first-of-type, .date-picker-wrapper table .caption > th:last-of-type {width: 32px;}
.date-picker-wrapper table .caption .next, .date-picker-wrapper table .caption .prev {padding: 0 5px; cursor: pointer; height: 32px; width: 100%; display: block; line-height: 30px; border-radius: 0.25rem}
.date-picker-wrapper table .caption .next:hover, .date-picker-wrapper table .caption .prev:hover {background-color: #ccc; color: white}
.date-picker-wrapper .gap {position: relative; z-index: 1; width: 15px; height: 100%; font-size: 0; line-height: 0;float: left; top: 15px; margin: 0 10px -10px; visibility: hidden; height: 0; flex: none}
.date-picker-wrapper .gap .gap-lines {height: 100%; overflow: hidden}
.date-picker-wrapper .gap .gap-line {height: 15px; width: 15px; position: relative}
.date-picker-wrapper .gap .gap-line .gap-1 {z-index: 1; height: 0; border-left: 8px solid white; border-top: 8px solid #eee; border-bottom: 8px solid #eee}
.date-picker-wrapper .gap .gap-line .gap-2 {position: absolute; right: 0; top: 0px; z-index: 2; height: 0; border-left: 8px solid transparent; border-top: 8px solid white}
.date-picker-wrapper .gap .gap-line .gap-3 {position: absolute; right: 0; top: 8px; z-index: 2; height: 0; border-left: 8px solid transparent; border-bottom: 8px solid white}
.date-picker-wrapper .gap .gap-top-mask {width: 6px; height: 1px; position: absolute; top: -1px; left: 1px; background-color: #eee; z-index: 3}
.date-picker-wrapper .gap .gap-bottom-mask {width: 6px; height: 1px; position: absolute; bottom: -1px; left: 7px; background-color: #eee; z-index: 3}
.date-picker-wrapper .selected-days {display: none; font-style: normal}
.date-picker-wrapper .drp_top-bar {line-height: 1.4; position: relative; padding: 0px 0px 0px 0}
.date-picker-wrapper .drp_top-bar .error-top, .date-picker-wrapper .drp_top-bar .normal-top {display: none}
.date-picker-wrapper .drp_top-bar .default-top {display: block}
.date-picker-wrapper .drp_top-bar.error .default-top {display: none}
.date-picker-wrapper .drp_top-bar.error .error-top {display: block; color: red}
.date-picker-wrapper .drp_top-bar.normal .default-top {display: none}
.date-picker-wrapper .drp_top-bar.normal .normal-top {display: block; background: var(--gray-disabled); border-radius: 0.25rem; padding-left: 0.25rem}
.date-picker-wrapper .drp_top-bar.normal .normal-top .selection-top {color: #333}
.date-picker-wrapper .drp_top-bar .apply-btn {height: 30px; border: 1px solid var(--gray-300-color); font-size: 0.91rem; padding: 0 10px; background: var(--white-color); color: var(--gray-800-color); min-width: 45px; white-space: nowrap; border-radius: 0.25rem; position: absolute; right: 0rem; top: 0rem}
.date-picker-wrapper .drp_top-bar .apply-btn:hover {background: var(--gray-900-color); color: var(--white-color)}
.date-picker-wrapper .drp_top-bar .apply-btn.disabled {opacity: 0.5; }
.date-picker-wrapper .custom-footer {padding: 0.5rem 0 !important; gap: 4px;}
.date-picker-wrapper .custom-footer button {height: 40px; border: 1px solid var(--gray-300-color); font-size: 0.91rem; padding: 0 10px; background: var(--white-color); color: var(--gray-800-color); min-width: 45px; white-space: nowrap; border-radius: 0.25rem; width: 100%;}
.date-picker-wrapper .custom-footer button.btn-apply{background: var(--gray-900-color); color: var(--white-color)}
.date-picker-wrapper .custom-footer button:hover {background: var(--gray-900-color); color: var(--white-color)}
.date-picker-wrapper .time {position: relative; width: 100%; flex: none; justify-content: space-between; display: none}
.date-range-9bit-time.date-picker-wrapper .time {display: flex;}
.date-picker-wrapper.single-month .time {display: block}
.date-picker-wrapper .time input[type=range] {vertical-align: middle; width: 100%; padding: 0; margin: 0; height: 20px}
.date-picker-wrapper .time > div {width: 100%; max-width: 224px; flex: none; border-radius: 0.5rem; padding: 10px; background: var(--gray-disabled);}
.date-picker-wrapper.single-date .time > div {max-width: none}
.date-picker-wrapper:not(.inline-wrapper) {display: flex; flex-direction: column; position: absolute; padding: 1rem; border: 1px solid #444444; border-radius: 0.5rem; background: #fff; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10); margin-top: 10px; margin-right: -25px;
	.drp_top-bar {padding-right: 50px; min-height: 30px; display: flex; align-items: center; justify-content: flex-start}
	.drp_top-bar>div {width: 100%}
}
.date-picker-wrapper.single-month .month-wrapper {flex-direction: column; justify-content: flex-start}
.date-picker-wrapper .month1 th, .date-picker-wrapper  .month1 td {border: none;}
@keyframes foldUp {
	0% {
		transform: scaleY(1);
		opacity: 1;
	}
	100% {
		transform: scaleY(0);
		opacity: 0;
	}
}
@keyframes slideDownOut {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(100%);
		opacity: 0;
	}
}
.date-picker-wrapper.fold-hide {
	animation: foldUp 0.3s ease forwards;
	transform-origin: top center;
}

/*새로운 데이터피커(포커스 가능한)*/
#ui-datepicker-div {padding: 16px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); font-size: 14px; z-index: 9999 !important; width: auto; max-width: 320px; display: none;
	.ui-datepicker-header {background: none; border: none; text-align: center; padding: 0; position: relative; margin-bottom: 12px; padding: 0 32px;}
	.ui-datepicker-title {display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 16px; font-weight: bold; position: relative;}
	.ui-datepicker-title > span {display: none;}
	select.ui-datepicker-month,
	select.ui-datepicker-year {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; padding: 2px 4px; font-size: 16px; font-weight: 700; color: #222; cursor: pointer; position: relative; border-bottom: 1px dotted #aaa; height: auto; line-height: 32px; width: auto;}
	select.ui-datepicker-month::after,
	select.ui-datepicker-year::after {content: none;}
	.ui-datepicker-prev,
	.ui-datepicker-next { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; text-align: center; line-height: 24px; cursor: pointer; z-index: 10; font-size: 16px; font-weight: bold; color: #222;}
	.ui-datepicker-prev {left: 0px;}
	.ui-datepicker-next {right: 0px;}
	.ui-datepicker-prev span,
	.ui-datepicker-next span {display: none !important;}
	.ui-datepicker-prev::before {content: "<";}
	.ui-datepicker-next::before {content: ">";}
	th {font-weight: 500; color: #666; padding: 4px 0; text-align: center;}
	td {padding: 4px; text-align: center;}
	td a {display: inline-block; width: 32px; height: 32px; line-height: 32px; border-radius: 50%; color: #333; text-decoration: none; transition: background 0.2s;}
	td a:hover {background: #f5f5f5;}
	.ui-state-active {background: #004DE5; color: #fff;}
	.ui-datepicker-today a {background: #ffeeaa !important; color: #222 !important; font-weight: bold;}
	/* 🔶 포커스 시 테두리 강조 효과 */
	select.ui-datepicker-month:focus,
	select.ui-datepicker-year:focus {border: 1px dotted #ff6600;}
}
@media (max-width: 767px) {
	#ui-datepicker-div { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2); z-index: 9999 !important; padding: 20px 24px !important; background: white; animation: slideUp 0.3s ease-out;
		/* 상단 연/월 select도 모바일에서 더 크게 */
		select.ui-datepicker-month, select.ui-datepicker-year {padding: 4px 8px;}
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}



}

/*.star_bx{ display: flex; gap:40px}
.item_star{ position: relative;}
.form_bx dl.item_star{ flex-direction: row; gap:30px; width: auto; align-items: center}
.form_bx dl.item_star dt{ font-size: 1rem; font-weight: 400; color: var(--gray-t1); line-height: 1}
li.end .form_bx dl.item_star{ gap:12px; flex: none}
li.end .form_bx dl.item_star dt{ font-size: 12px}
*/
#popcontent{ padding-bottom: 100px}

/*채용 버튼 및 신청폼*/
.recruit {
	.input_sec {margin-top: 0 !important;}
	.coltable {display: block !important;}
	#bMonth, #bDate {width: calc(50% - 12px) !important;}
	table.coltable:has(#lastName, #firstName, #nationCd) tr td {width: 50% !important;}
	#nationCd {width: 240px !important;}
	.ph:has(#mobile1, #mobile2, #mobile3, #mobile4) {display: flex; max-width: 700px; gap: 8px; align-items: center}
	#email1, #email2, #email2 + select {width: calc(33% - 12px);}
	td[data-th="Period"] {display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 6px; border-bottom: 0;
		select {width: 45%;}
	}
}

@media only screen and (max-width: 1023px) {
	.view_box:has(.formbox.orderbox) {
		.viewheader h3 {font-size: 2rem; padding-bottom: 12px;}
		.formbox.orderbox {
			form#form[novalidate="novalidate"] {gap: 40px;}
			.input_sec {gap: 40px; margin-top: 40px;
				dl {gap: 8px; width: 100%;}
				dt {font-size: 14px;}
				dd {justify-content: flex-start; flex-wrap: wrap; gap: 6px;}
				.coltable {gap: 28px; flex-direction: column;}
				dd span.info {position: relative; bottom: 0;}
				.tdbtn, button.dn, button.add, button.del {height: 46px; white-space: nowrap;}
				dl.adres dd>div strong {width: 91px;}

				/*추가*/
				.adres div.detail_adr strong {width: 91px;}
				.lintit {width: 16%;}
			}
			.program_info {padding: 32px;
				.coltable {gap: 12px;}
				dl {font-size: 1rem;}
				dl.tit dd {font-size: 1.125rem;}

				/*추가*/
				.coltable span {font-size: 1rem;}
			}
			.table_box {gap: 20px;}
			h4 + .input {margin-top: -21px;}
			.term_sec {
				.checkbox {position: relative;}
			}

		}
		h4 {font-size: 1.312rem; padding-bottom: 20px; justify-content: flex-start; align-items: flex-start;}
		table td, th {white-space: nowrap;}
	}
	#popcontent{padding: 0 20px 70px}

	.recruit {
		table.coltable:has(#lastName, #firstName, #nationCd) th {min-width: 120px !important;}
		table.coltable:has(#lastName, #firstName, #nationCd) tr td {width: auto !important;}
		td[data-th="Period"] {height: 116px; display: flex !important; flex-wrap: nowrap; align-items: center;
			select {width: 140px !important;}
		}
	}
}

@media only screen and (max-width: 767px) {
	.view_box:has(.formbox.orderbox) {
		.formbox.orderbox {
			.input_sec {
				/*추가*/
				.list.term_sec .box .txt {padding: 16px 24px;}
				.lintit {font-size: 13px;}
				.coltable .list div.date_w {flex-direction: column;}
			}
			.program_info {
				dl {flex-direction: column; align-items: flex-start;}
			}
		}
	}

	.formbox.orderbox {
		.input_sec {
			.range_w:before {width: 40px;}
			input.datepicker {padding: 0 8px 0 40px !important;}
		}
	}

	.date-picker-wrapper {position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100%; padding: 1.2rem 1rem 2rem; background-color: #fff; border-radius: 1rem 1rem 0 0 !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.1) !important; animation: slideUp 0.25s ease-out; z-index: 9999; box-sizing: border-box; max-height: 65vh; overflow-y: auto; font-size: 1.4rem; border-color: #bdbdbd !important;}
	.date-picker-wrapper .month-wrapper {flex-wrap: nowrap; overflow: auto; overflow-x: hidden;}
	.date-picker-wrapper .month-wrapper table {width: 100% !important; table-layout: fixed !important; border-collapse: collapse;}
	.date-picker-wrapper .month-wrapper .month-name {max-width: 72%; width: 100%;}
	.date-picker-wrapper .month-wrapper th, .date-picker-wrapper .month-wrapper td {text-align: center !important; vertical-align: middle; padding: 0.5rem 0 !important; white-space: normal !important; word-break: keep-all; box-sizing: border-box; font-size: 1.4rem; letter-spacing: 0;}
	.date-picker-wrapper .month-wrapper td * {display: inline-block; text-align: center; width: 100%; margin: 0 auto; font-size: 1.125rem;}
	.date-picker-wrapper .month-wrapper td.active, .date-picker-wrapper .month-wrapper td.hovering {margin: 0 !important; padding: 0.5rem 0 !important; display: block !important; width: 100% !important; text-align: center;}
	.date-picker-wrapper .drp_top-bar {font-size: 1rem; margin-bottom: 1rem; padding: 0 0.5rem;}
	.date-picker-wrapper .time {margin-top: 1.5rem; text-align: center;}
	.date-picker-wrapper select {font-size: 1.4rem; padding: 0.3rem 0.5rem; max-width: 6rem;}
	.date-picker-wrapper.fold-hide {animation: slideDownOut 0.3s ease-out forwards;}
	.date-picker-wrapper .month-wrapper table .week-name th {font-size: 14px;}
	.date-picker-wrapper .time1 div {text-align: left;}
	.date-picker-wrapper .time1 {font-size: 1rem;}
	.date-picker-wrapper .time1 .hour {margin-top: 12px;}
	.date-picker-wrapper .time label {font-size: 0.875rem;}
	.date-picker-wrapper .custom-footer button.btn-cancel {display: none;}
}

@media only screen and (max-width: 320px) {
	.view_box:has(.formbox.orderbox) {
		.formbox.orderbox {
			.input_sec {
				dl.adres dd>div strong {
					width: 80px;
				}
			}
		}
	}
}

/*로그인&회원가입*/
.login_wrap {
	.login {max-width: 480px; position: relative; margin: 0 auto;}
	.login .id {padding-bottom: 20px;}
	.login .pw {padding-bottom: 12px;}
	.login .id label, .login .pw label {font-size: 1rem; font-weight: 700; color: var(--gray-800-color);}
	.login .id input, .login .pw input {margin-top: 6px; padding-right: 15px;}
	.login .save {padding-bottom: 32px;}
	.login .save label span {font-size: 1rem; font-weight: 400; color: var(--gray-600-color); line-height: 28px; padding-left: 4px;}
	.login .save label input {vertical-align: inherit;}
	.login .ok {width: 100%; height: 50px; text-align: center; align-content: center; background: var(--gray-900-color); border-radius: 2px; margin-bottom: 40px;}
	.login .ok a {color: var(--white-color); font-size: 1.125rem; font-weight: 700; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center}
	.login .sns {text-align: center;}
	.login .sns h3 {font-size: 1.125rem; font-weight: 700; color: var(--black-color); padding-bottom: 20px;}
	.login .sns ul {display: flex; align-items: flex-start; justify-content: center; gap: 20px;}
	.login .sns li button {display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 8px;}
	.login .sns li button strong {font-size: 1rem; font-weight: 400;}
	.login .sns li button.kt .ico {background: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='72' height='72' rx='36' fill='%23F9DB00'/%3E%3Cpath d='M36 22C28.2763 22 22 27.3846 22 34.0175C22.1338 38.2885 24.5665 42.1556 28.3614 44.0892L27.0478 50L33.3606 45.8269C34.2363 45.9738 35.1121 46.0472 36 46.0472C43.7237 46.0472 50 40.6626 50 34.0297C50 27.3969 43.7359 22.0122 36 22.0122' fill='%233E1918'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; width: 72px; height: 72px; background-size: 72px; display: inline-block;}
	.login .sns li button.naver .ico {background: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='72' height='72' rx='36' fill='%2301C73C'/%3E%3Cpath d='M31.5705 48H24V24H31.5705L40.0913 36.9429V24H48V48H40.0913L31.5705 36.9429V48Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; width: 72px; height: 72px; background-size: 72px; display: inline-block;}
	.etc {max-width: 960px; margin: 80px auto 0; display: flex; gap: 12px; justify-content: flex-start; align-items: stretch;}
	.etc a {border: 1px solid var(--gray-300-color); padding: 32px; width: 100%;}
	.etc a dl dt {font-size: 1.25rem; font-weight: 700; padding-bottom: 8px; color: var(--black-color);}
	.etc a dl dd strong {font-size: 1.125rem; font-weight: 400; color: var(--gray-900-color);}
	.etc a dl dd {font-size: 1rem; font-weight: 400; color: var(--gray-600-color); display: flex; flex-direction: column; gap: 12px;}
}
.find_wrap {
	.find_step01 {border-bottom: 1px solid var(--gray-300-color);}
	.find_step01, .find_step02 {position: relative; margin: 0 auto 40px; max-width: 960px;}
	h3 {font-size: 1.312rem; font-weight: 600; color: var(--gray-900-color); padding-top: 4px;}
	h3::before {content: ''; width: 84px; height: 40px; background: var(--main-color); border-radius: 4px; display: block; position: absolute; left: 0; top: 0; overflow: hidden;}
	h3 strong {position: relative; z-index: 2; color: var(--black-color); padding: 0px 12px 0 8px; font-size: 1.312rem; font-weight: 800;}
	.email, .find_step02 p {padding-top: 20px;}
	label, .find_step02 p {display: block; padding-bottom: 12px; margin: 0; font-size: 1rem; font-weight: 400; color: var(--gray-800-color);}
	.email input[type="text"], .email.ph select {width: 100%; height: 50px; padding: 0 15px;}
	.email.ph input[type="text"], .email.ph select {width: calc(33% - 16px);}
	.email.ph input#mTabId {width: 100%;}
	.email.ph .dash {margin: 0 4px;}
	.find_step01 .txt_type {margin-top: 20px; color: var(--gray-900-color); font-size: 0.875rem; font-weight: 500; border: none; border-bottom: 1px solid var(--gray-900-color);}
	.find_step01 > *:last-child {margin-bottom: 40px;}
	.email label + input + label {margin-top: 20px;}
	#emailTab .txt_type::before {background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 2.5L15 2.5L15 17.5L5 17.5L5 2.5Z' stroke='%230000FF' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M5 13.3333L15 13.3333' stroke='%230000FF' stroke-width='1.25'/%3E%3Ccircle cx='10.0001' cy='15.4167' r='0.833333' fill='%230000FF'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; content: ''; width: 20px; height: 20px; background-size: 20px; display: inline-block; vertical-align: sub; filter: contrast(0) brightness(0);}
	#mobileTab .txt_type::before {background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 15V4.16666H17.5V15H2.5Z' stroke='%230000FF' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M2.5 4.16666L10 9.99999L17.5 4.16666' stroke='%230000FF' stroke-width='1.25'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; content: ''; width: 20px; height: 20px; background-size: 20px; display: inline-block; vertical-align: sub; filter: contrast(0) brightness(0);}
	.btn_box {text-align: center; clear: both; float: none;}
	.btn_box a {display: inline-block; min-width: 200px; line-height: 50px; height: 50px; overflow: hidden; background: var(--gray-900-color); color: var(--white-color); font-size: 1.125rem; font-weight: 700; margin: 0 5px; border: none; vertical-align: middle; padding: 0 20px;}
	.etc {max-width: 960px; margin: 60px auto 0;}
	ul.info {padding: 32px; background: rgba(255,102,51,0.1); color: #600; border: 1px solid rgba(255,102,51,0.31);}
	ul.info li {padding-left: 24px; word-break: keep-all; position: relative;}
	ul.info li::before {background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z' stroke='%23660000' stroke-width='1.25'/%3E%3Cpath d='M10 13.75V9.25' stroke='%23660000' stroke-width='1.25'/%3E%3Cpath d='M10 6.25C10.4142 6.25 10.75 6.58579 10.75 7C10.75 7.41421 10.4142 7.75 10 7.75C9.58579 7.75 9.25 7.41421 9.25 7C9.25 6.58579 9.58579 6.25 10 6.25Z' fill='%23660000'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; content: ''; width: 20px; height: 20px; position: absolute; left: 0; top: 1px;}
	ul.info li + li {margin-top: 8px;}
	.rsltbox {max-width: 960px; margin: 0 auto; position: relative;}
	.rsltbox div.ok {border: 1px solid var(--gray-300-color); padding: 60px; font-size: 1.312rem; font-weight: 500; text-align: center; position: relative; padding-left: 30%;}
	.rsltbox div.ok::before {background: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 15C84.85 15 105 35.15 105 60C105 84.85 84.85 105 60 105C35.15 105 15 84.85 15 60C15 35.15 35.15 15 60 15Z' stroke='%23949494' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M45 45V50' stroke='%23949494' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M75 45V50' stroke='%23949494' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M40 70C42.5 77.5 48.95 85 60 85C71.05 85 77.5 77.5 80 70' stroke='%23949494' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; content: ''; width: 30%; height: 120px; position: absolute; left: 0; top: 50%; text-align: center; line-height: 120px; border-right: 1px solid var(--gray-200-color); margin-top: -4rem;}
	.rsltbox div.fail::before {background: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 15C84.85 15 105 35.15 105 60C105 84.85 84.85 105 60 105C35.15 105 15 84.85 15 60C15 35.15 35.15 15 60 15Z' stroke='%23949494' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M45 45V50' stroke='%23949494' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M75 45V50' stroke='%23949494' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M40 80C42.5 75 48.95 70 60 70C71.05 70 77.5 75 80 80' stroke='%23949494' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;}
	.rsltbox div.ok label {font-size: 1.312rem; font-weight: 500; display: inline; padding: 0;}
	.rsltbox label + strong {color: var(--sub-color-amber); text-decoration: underline;}
	.rsltbox .btn_box {margin-top: 40px;}
	.rsltbox .btn_box a {background: var(--white-color); color: var(--black-color); border: 1px solid var(--gray-300-color);}
	.btn_box a.key {background: var(--main-color); border: 0px;}
	ul.small_info {font-size: 0.875rem; font-weight: 400; text-align: center; color: var(--gray-600-color);}
	p.alert {font-size: 1rem; margin: 20px 0 0 40px; color: #cb4014; background:#fff7e7; padding: 8px 40px; text-align: center; border: 1px solid #ffb529; font-weight: 600; word-break: keep-all;}
	.rsltbox div.fail p {font-size: 1rem; color: var(--gray-800-color); }
	.rsltbox div.fail p strong {font-size: 1.312rem; font-weight: 700; color: var(--sub-color-amber); display: inline-block; text-decoration: underline; padding-bottom: 12px; display: block}
}
ul.certify {display: flex; justify-content: flex-start; align-items: stretch; gap: 20px;

	li {width: 100%;}
	li button {width: 100%; height: 100%; position: relative; vertical-align: bottom; word-break: keep-all; font-size: 1.125rem; font-weight: 700; border: 1px solid var(--gray-300-color); padding: 20px;}
	li button::before {background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='26' r='4' fill='black'/%3E%3Cpath d='M30 38V28' stroke='black' stroke-width='3'/%3E%3Cpath d='M12 16.2632L30 8L48 16.2632V36.7895C46.125 42.9649 30 52 30 52C30 52 13.875 42.9649 12 36.7895V16.2632Z' stroke='black' stroke-width='3'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; content: ''; width: 100%; height: 60px; background-size: 60px; display: block;}
	li button.mobile::before {background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 8L45 8L45 52L15 52L15 8Z' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M15 42H45' stroke='black' stroke-width='3'/%3E%3Ccircle cx='30' cy='47.25' r='2.5' fill='black'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;}
	li button.pin::before {background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M52 8H8V38.25H52V8Z' stroke='black' stroke-width='3'/%3E%3Cpath d='M8 29.45H52' stroke='black' stroke-width='3'/%3E%3Cpath d='M30 38.25V52' stroke='black' stroke-width='3'/%3E%3Cpath d='M19 52H41' stroke='black' stroke-width='3'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;}
}
#content.join {
	.hgroup h2, .hgroup h2 *, .hgroup p {color: var(--gray-800-color);}
	article.w100 {padding-top: 70px !important;}
	.hgroup_small + .join_wrap.w100 {padding-top: 280px !important;}
	.join_wrap {padding-bottom: 100px !important;}
	.hgroup_small {z-index: 3;}
	.join_wrap ul.info li strong {display: inline-block; font-size: 1.2rem;}
	.join_wrap .etc {padding: 0 10px;}
	.stepbox {padding: 30px 0 30px 0; overflow: hidden;}
	.stepbox li {text-align: left; float: left; width: 190px; font-size: 14px; color: #696969; position: relative;}
	.stepbox li strong {display: block; width: 36px; height: 36px; background: none; border: 1px solid #bbb; border-radius: 100%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -999px; margin-bottom: 10px;}
	.stepbox li strong::before {display: block; width: 100%; height: 100%; font-size: 1rem; text-indent: 0; line-height: 34px;font-family: 'spo'; speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content:"\e64c"; text-align:center;}
	.stepbox li.on {color: var(--black-color);}
	.stepbox li.ok {color: rgba(0, 0, 0, 0.68);}
	.stepbox li.on strong {border: 1px solid var(--black-color); background: var(--black-color);}
	.stepbox li.ok strong {background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.75);}
	.stepbox li.on strong::before {content:"\e61d"; color:#fff;}
	.stepbox li.ok strong::before {color: #fff;}
	.stepbox li + li::before {content: ""; height: 1px; width: 142px; background: #ccc; position: absolute; left: -149px; top: 16px;}
	.formbox {overflow: hidden; margin: 0 auto;  max-width: 960px; padding: 50px 30px;}
	.formbox h3 {font-size: 1.125rem; color: var(--black-color); margin: 0; padding: 0 0 10px 0; font-weight: 600;}
	.formbox h3 span {color: #F09;}
	.formbox p {margin :0; padding: 0; color: var(--gray-800-color); font-weight: 300;}
	.term_sec .title {position: relative; padding-bottom: 45px; border-bottom: 1px solid #ccc; margin-bottom: 5px;}
	.term_sec .checkbox {position: absolute; right: 0; bottom: 45px; font-size: 1.2rem;}
	.term_sec div.box {margin-top: 40px; position: relative;}
	.term_sec div.box .txt {border: 1px solid #ddd; height: 200px; overflow-y: auto; color: #999; font-size: 14px; padding: 12px;}
	.term_sec div.box .checkbox {bottom: auto; top: 0px; font-size: 1rem;}
	.certify_sec ul.certify::after {display: block; content: ""; clear: both; float: none;}
	.certify_sec p {padding-bottom: 20px;}
	.certify_sec p strong {color: #db5d13;}
	.certify_sec ul.certify {padding-bottom: 50px;}
	.ok_sec {text-align: center;}
	.ok_sec .ok_box {border: 1px solid #ccc; padding: 0px; font-size: 1.3rem; color: #bbb;}
	.ok_sec p + .ok_box {margin-top: 45px;}
	.ok_sec .ok_box p {font-weight: 600; color: #aaa; padding: 60px 50px 20px 50px; margin: 0;}
	.ok_sec .ok_box p strong {color: var(--gray-800-color); font-weight: 600;}
	.ok_sec .ok_box dl dt, .ok_sec .ok_box dd {display: inline-block; font-size: 1.15rem; color: var(--black-color);}
	.ok_sec .ok_box dt::after {content: ":"; padding: 0 5px;}
	.ok_sec .ok_box dd {color: #db5d13; text-decoration: underline; font-weight: 600;}
	.ok_sec .ok_box .btn_box a, .ok_sec .ok_box .btn_box button {height: 34px; width: 150px; line-height: 34px; font-size: 1rem; font-weight: 400;}
	.ok_sec .ok_box .btn_box {padding-top: 30px; padding-bottom: 60px;}
	.ok_sec .ok_box .info {border-top: 1px solid #ccc; padding: 20px; font-size: 1rem; color: var(--gray-600-color); background: rgba(255,204,153,0.1);}
	.join_wrap.w100 {background: #fff;}
	ul.certify li button::before {font-size: 2rem; padding-top: 0rem;}
	.join_wrap ul.certify li button::before {padding-top: 1rem;}
	.join_wrap .input_sec table {table-layout: auto;}
	.join_wrap .input_sec table td, .join_wrap .input_sec .coltable th {padding: 12px 20px;}
	.join_wrap .input_sec .coltable th {word-break: keep-all; background: var(--gray-50-color); line-height: 1.5; color: var(--black-color); text-align: left; line-height: 1.5; font-weight: 600; font-size: 1rem; width: 26%;}
	.join_wrap .input_sec table td {text-align: left; line-height: 1.5; color: var(--gray-900-color);}
	.join_wrap .input_sec table input[type="text"], .join_wrap .input_sec  table input[type="password"], .join_wrap .input_sec  table select { min-width: 250px; padding-left: 5px; margin-top: 1px; margin-bottom: 1px; height: 40px; vertical-align :middle; width: calc(100% - 130px); line-height: 32px;}
	.join_wrap .input_sec .birth, .join_wrap .input_sec .ph, .join_wrap .input_sec .email  {display: flex; align-items: center; justify-content: flex-start; gap: 12px;}
	.join_wrap .input_sec .ph input, .join_wrap .input_sec .email input {min-width: unset !important;}
	.join_wrap .input_sec .birth input {height: 40px; padding: 8px; margin-left: 4px;}
	.join_wrap .input_sec .birth input:first-child {margin-left: 0;}
	.join_wrap .input_sec td:has(input[name="sex"]) {height: 51px;}
	.join_wrap .input_sec td:has(input[name="receiptYn"]) {height: 75px;}
	.join_wrap .input_sec td:has(input[name="sex"]), .join_wrap .input_sec td:has(input[name="receiptYn"]) {display: flex; align-items: center; justify-content: flex-start}
	.join_wrap .input_sec td:has(input[name="sex"]) label, .join_wrap .input_sec td:has(input[name="receiptYn"]) label {display: flex; gap: 6px; align-items: center; justify-content: flex-start}
	td .adres input[type="text"] {width: calc(100% - 300px);}
	.join_wrap .table_box {margin-top: 50px;}
	.join_wrap .input_sec .table_box:first-child {margin-top: 0;}
	.join_wrap .input_sec table td .tdbtn {line-height: 40px; height: 40px; margin: 1px; vertical-align: middle;}
	.join_wrap .input_sec label + label {margin-left: 20px;}
	.join_wrap .input_sec table .birth label select {min-width: auto; width: auto;}
	.join_wrap .input_sec .parentAgree {margin-top: 30px;}
	.join_wrap .input_sec .parentAgree label {display: block; margin: 5px 0;}
	.join_wrap .input_sec span.must {color: #F09;}
	.join_wrap .input_sec span.info {font-size: 0.875rem; color: var(--gray-800-color);}
	td span.alert {color: #EF0575; font-size: 0.9rem; display: inline-block;}
	td span.alert.ok {color: #4FB039}
	.join_wrap .input_sec .tdbtn {border: 1px solid var(--gray-300-color); line-height: 40px; padding: 0 20px; min-width: 120px; height: 40px; color: var(--gray-800-color); font-size: 1rem; display: inline-block; margin-left: 12px; font-weight: 600;}
	ul.small_info {font-size: 13px; background: none !important; text-align: center; color: #888 !important; padding-top: 30px;}
	ul.small_info li {padding-left: 0 !important; font-size: 1rem; color: var(--gray-800-color);}
	.btn_box {margin: 0; display: flex; justify-content: center; align-items: center; margin-top: 40px; gap: 8px;}
	.btn_box a {display: inline-flex; min-width: 200px; text-align: center; background: var(--white-color); color: var(--gray-900-color); padding: 0 28px; font-size: 1.125rem; font-weight: 700; align-items: center; justify-content: center; gap: 8px; border-radius: 2px; border: 1px solid var(--gray-300-color); height: 50px;}
	.btn_box a.key {background: var(--main-color); border: 0;}
	/*관심공연,교육*/
	.list-con .btn_box {margin-top: 0;}
	ul.info {padding: 32px; background: rgba(255,102,51,0.1); color: #600; border: 1px solid rgba(255,102,51,0.31);}
	ul.info li {padding-left: 24px; word-break: keep-all; position: relative;}
	ul.info li::before {background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z' stroke='%23660000' stroke-width='1.25'/%3E%3Cpath d='M10 13.75V9.25' stroke='%23660000' stroke-width='1.25'/%3E%3Cpath d='M10 6.25C10.4142 6.25 10.75 6.58579 10.75 7C10.75 7.41421 10.4142 7.75 10 7.75C9.58579 7.75 9.25 7.41421 9.25 7C9.25 6.58579 9.58579 6.25 10 6.25Z' fill='%23660000'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; content: ''; width: 20px; height: 20px; position: absolute; left: 0; top: 1px;}
	ul.info li + li {margin-top: 8px;}
	.ok_sec{ text-align:center}
	.ok_sec .ok_box{ border:1px solid #ccc; padding:0px; font-size:1.3rem; color:#bbb}
	.ok_sec p + .ok_box{ margin-top:45px;}
	.ok_sec .ok_box p{ font-weight:600;color:#aaa; padding:60px 50px 20px 50px; margin:0}
	.ok_sec .ok_box p strong{ color:#333; font-weight:600}
	.ok_sec .ok_box dl dt, .ok_sec .ok_box dd{ display:inline-block; font-size:1.15rem; color:#000}
	.ok_sec .ok_box dt:after{ content:":"; padding:0 5px}
	.ok_sec .ok_box dd{ color:#f8991c; text-decoration:underline; font-weight:600}
	.ok_sec .ok_box .btn_box a, .ok_sec .ok_box .btn_box button{ height:34px; width:150px; line-height:34px; font-size:1rem; font-weight:400}
	.ok_sec .ok_box .btn_box{ padding-top:30px; padding-bottom:60px}
	.ok_sec .ok_box .info{border-top:1px solid #ccc; padding:20px; font-size:1rem; color:#666; background:rgba(255,204,153,0.1) }
}
.loginfindbox .tdbtn {border: 1px solid var(--gray-300-color); line-height: 50px; padding: 0 20px; min-width: 120px; height: 50px; color: var(--gray-800-color); font-size: 1rem; display: inline-block; margin-left: 12px; font-weight: 600;}
.popup .loginfindbox input[type="text"] {width: 40%;}
#content.join:has(input[value="en"]) {
	.input_sec .table_box input#memberId {width: calc(100% - 200px)}
}


/*마이페이지*/
.my_wrap {
	/*내정보*/
	.input_sec {max-width: 960px; margin: 0 auto;}
	.coltable{table-layout: fixed;}
	.coltable th {background: var(--gray-50-color); text-align: left; line-height: 1.5; width: 180px; padding: 12px 20px; font-size: 1rem; font-weight: 600; word-break: keep-all; height: 60px; color: var(--black-color);}
	.coltable td {text-align: left; line-height: 1.5; padding: 12px 20px; color: var(--gray-600-color);}
	.coltable th span.must, .sp_re p span.must {color: #F09; font-size: 1rem; vertical-align: top;}
	.coltable th span.must::before, .sp_re p span.must::before {content: none;}
	.coltable td span.impor {color: #DC3633; font-weight: 600;}
	.tdbtn {border: 1px solid var(--gray-300-color);  line-height: 40px; padding: 0 20px; min-width: 100px; height: 40px; color: var(--gray-800-color); font-size: 1rem; display: inline-block; margin-left: 12px; font-weight: 600;}
	.tdbtn#modifyPwd {margin-left: 0;}
	.coltable td input, .coltable td select {height: 40px; line-height: 40px;}
	.coltable label + label {margin-left: 8px;}
	td .adres input[type="text"] {width: calc(100% - 300px);}
	.ph select, .ph input, .email input, .email select {width: auto;}
	.input_sec  .btn_box {text-align: left; gap: 8px;}
	.input_sec .btn_box a, .input_sec .btn_box button, .inner .table_box .btn_box a {display: inline-block; min-width: 200px; height: 50px; overflow: hidden; color: var(--gray-900-color); font-size: 1.125rem; font-weight: 700; padding: 0 20px; text-align: center; background: var(--gray-100-color);}
	.input_sec .btn_box a.key {background: var(--main-color); margin-left: 20px;}
	.input_sec .btn_box button {background: var(--gray-900-color); color: var(--white-color);}
	button.kt {background: #F9DB00; color: var(--gray-900-color); font-weight: 600; border: 0;}
	button.naver {background: #01C73C; color: var(--gray-900-color); font-weight: 600; border: 0;}
	button.kt::before {background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 0C6.27628 0 0 5.38462 0 12.0175C0.133797 16.2885 2.56646 20.1556 6.36142 22.0892L5.04779 28L11.3606 23.8269C12.2363 23.9738 13.1121 24.0472 14 24.0472C21.7237 24.0472 28 18.6626 28 12.0297C28 5.39685 21.7359 0.012238 14 0.012238' fill='%233E1918'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; width: 20px; height: 20px; background-size: 20px; display: inline-block; content: ''; vertical-align: middle; margin-top: -0.4rem; margin-right: 6px;}
	button.naver::before {background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.57047 24H0V0H7.57047L16.0913 12.9429V0H24V24H16.0913L7.57047 12.9429V24Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; width: 20px; height: 20px; background-size: 20px; display: inline-block; content: ''; vertical-align: middle; margin-top: -0.4rem; margin-right: 6px;}
	.sns_naok, .sns_ktok {display: inline-block; margin-right: 40px;}
	.sns_naok::before {background: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='72' height='72' rx='36' fill='%2301C73C'/%3E%3Cpath d='M31.5705 48H24V24H31.5705L40.0913 36.9429V24H48V48H40.0913L31.5705 36.9429V48Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; width: 28px; height: 28px; background-size: 28px; display: inline-block; content: ''; vertical-align: middle; margin-top: -0.2rem; margin-right: 4px;}
	.sns_ktok::before {background: url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='72' height='72' rx='36' fill='%23F9DB00'/%3E%3Cpath d='M36 22C28.2763 22 22 27.3846 22 34.0175C22.1338 38.2885 24.5665 42.1556 28.3614 44.0892L27.0478 50L33.3606 45.8269C34.2363 45.9738 35.1121 46.0472 36 46.0472C43.7237 46.0472 50 40.6626 50 34.0297C50 27.3969 43.7359 22.0122 36 22.0122' fill='%233E1918'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; width: 28px; height: 28px; background-size: 28px; display: inline-block; content: ''; vertical-align: middle; margin-top: -0.2rem; margin-right: 4px;}
	.formbox {padding: 0 !important;}
	/*공연신청현황*/
	.inner .table_box {padding-bottom: 60px;}
	.inner h3 {font-size: 1.75rem; font-weight: 700; color: var(--black-color); padding-bottom: 28px;}
	.inner p {font-size: 1.125rem; font-weight: 400; color: var(--gray-600-color);}
	.inner .table_box p + p {padding-top: 8px;}
	.inner .table_box .btn30 {margin-top: 40px;}
	.inner .table_box .btn30 a {background: var(--white-color); color: var(--black-color); margin: 0 10px 0; min-width: 350px; border: 1px solid var(--gray-300-color);}
	.inner .table_box .btn30 a.key {background: var(--main-color); border: 0;}
	.inner .list_box .default_info .total {padding-bottom: 0;}
	.inner .list_box .sch_box {text-align: left; margin-top: 40px;}
	.inner .align_box {width: auto; height: auto;}
	.inner .align_box select {width: 200px; height: 50px;}
	.inner .rowtable tbody td a {font-size: 1rem; font-weight: 500; color: var(--black-color);}
	/*후원현황*/
	.sp_grade {text-align: center; font-size: 1.312rem !important; padding-bottom: 40px; margin: 0; color: var(--gray-800-color) !important;}
	.sp_grade strong {color: #ef4c49;}
	.sp_re {text-align: center; padding-bottom: 20px;}
	.sp_re p {font-size: 1.125rem; font-weight: 400; color: var(--gray-900-color); display: inline-block; margin-right: 40px;}
	.sp_re label + label {margin-left: 20px;}
	/*상세*/
	#eduDetail .table_box {max-width: 960px; margin: 0 auto;
		tbody tr {display: flex;}
		tbody th {width: 20%;}
		tbody td {width: 80%;}
	}
}

@media only screen and (max-width: 1023px){
	.login_wrap {
		.login .sns li button.kt .ico, .login .sns li button.naver .ico {width: 64px; height: 64px; background-size: 64px;}
		.etc {margin: 40px auto 0; gap: 8px;}
		.etc a {padding: 24px;}
		.etc a dl dt {font-size: 1.125rem;}
		.etc a dl dd {font-size: 14px; gap: 0;}
	}
	#content.join {
		.join_wrap {padding-bottom: 40px !important;}
		.formbox {padding: 0;}
		.formbox h3 {font-weight: 500; padding-bottom: 8px;}
		.term_sec .checkbox {bottom: 6px;}
		ul.small_info {padding-top: 20px;}
		.certify_sec p {padding-bottom: 12px;}
		.btn_box a {font-size: 1rem; height: 46px;}
		.join_wrap .input_sec .birth input {width: 20%;}
		.join_wrap .input_sec .coltable th {font-size: 14px; line-height: 24px; padding: 8px 12px;}
		.join_wrap .input_sec table td {padding: 8px 12px;}
		.tdbtn {font-size: 14px !important; line-height: 24px !important;}

	}
	.find_wrap {
		h3 {font-size: 1.125rem;}
		h3:before {width: 76px; height: 36px;}
		h3 strong {font-size: 1.125rem;}
		.email, .find_step02 p {padding-top: 16px;}
		label {margin-top: 0 !important}
	}
	#content.join .my_wrap, .my_wrap{
		.formbox {padding: 0}
		.coltable{ table-layout: auto}
		.input_sec {max-width: inherit;}
		.coltable th {max-width: 128px; width: auto; padding: 8px 12px; height: auto; line-height: 24px; font-size: 14px;}
		.coltable td {line-height: 24px; padding: 12px 8px;}
		.coltable td span.info, .coltable td select {font-size: 14px;}
		.tdbtn {padding: 0 12px; margin-left: 6px; font-size: 14px; min-width: inherit;}
		.coltable td input {max-width: 180px; font-size: 14px;}
		button.naver::before, button.kt::before {width: 18px; height: 18px; background-size: 18px;}
		.inner h3 {font-size: 1.5rem; padding-bottom: 16px;}
		.inner p {font-size: 1rem;}
		.btn_box {gap: 4px;}
		.btn_box a, .btn_box button {min-width: 120px; margin: 0; font-size: 1rem; height: 46px;}
		.inner .table_box, .inner .align_box {padding-bottom: 40px;}
		.inner .align_box select {height: 46px; min-width: 160px; width: auto;}
		.inner .list_box .sch_box {padding-bottom: 0;}
		.sp_grade {font-size: 1.125rem !important;}
		#concSec + .rowtable, #eduSec .rowtable {
			th, tr, td, a {font-size: 14px;}
			td {padding: 20px 6px;}
		}
		.thum_w .list_box {
			.list {position: relative;}
			.list-txt h3 {font-size: 1.125rem; letter-spacing: 0; padding-bottom: 0; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 6px}
			.list-txt .font-subTitle {font-size: 13px; line-height: 1.4; letter-spacing: 0; color: var(--gray-800-color);}
			.list-txt .font-b4 {font-size: 12px;}
			.btn_box {position: absolute; left: 0; top: 0; background: none; width: 100%; height: 100%; margin-top: 0;}
			.btn_box button { font-size: 0; line-height: 0; text-indent: -999px; overflow: hidden; width: 100%; height: 100%; background: none; border: none;}
			.btn_box button:not(.detail) {display: none;}
		}
	}
	.login .find_wrap{
		.email label {padding-bottom:6px; padding-top: 12px;}
	}
}
@media only screen and (max-width: 767px){
	.login_wrap {
		.etc{ margin-top: 40px; flex-direction: column}
	}
	#content.join {
		.term_sec div.box .checkbox {position: relative; margin-top: 8px;}
		.join_wrap .etc {padding: 0;}
		ul.small_info {text-align: left;}
		.btn_box a {width: 100%;}
		.certify_sec p {font-size: 14px; padding-bottom: 8px;}
		.certify_sec ul.certify {padding-bottom: 40px;}
		ul.info {padding: 16px;}
		ul.info li {font-size: 14px; padding-left: 20px;}
		ul.info li::before {width: 16px; height: 16px; background-size: 16px;}
		.btn_box {margin-top: 24px;}
		.input_sec .table_box h3 {display: flex; flex-direction: column; gap: 4px;}
		.input_sec table {border-color: var(--black-color); border-right: 0; border-bottom: 1px solid;
			colgroup col {width: auto !important;}
			tr {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; padding: 0;}
			th {background: none !important; border: 0; padding: 12px 0 0 !important; font-size: 14px; line-height: 24px;}
			td {border: 0; padding: 6px 0 !important;}
			tr th, tr td {max-width: inherit; width: 100%; padding: 0;}
			tr th {padding-top: 12px;}
			tr td {padding: 6px 0; font-size: 1rem;}
		}
		.input_sec .table_box h3 {font-size: 14px;}
		.join_wrap .input_sec .coltable th {width: 100%;}
		.join_wrap .input_sec table input[type="text"], .join_wrap .input_sec table input[type="password"], .join_wrap .input_sec table select {min-width: 80px; width: 100%; font-size: 14px;}
		.join_wrap .input_sec span.info {font-size: 13px;}
		.join_wrap .input_sec table td:has(input[name="memberId"]), .join_wrap .input_sec .adres {display: flex; gap: 6px; flex-wrap: wrap;
			input {width: 60%;}
			.info br {display: none;}
		}
		.join_wrap .input_sec .birth, .join_wrap .input_sec .ph, .join_wrap .input_sec .email {gap: 6px;}
		.join_wrap .input_sec .email {flex-wrap: wrap;
			input {width: 45% !important;}
		}
		label span {font-size: 14px;}
		.btn_box {flex-direction: column}
		.join_wrap .input_sec td:has(input[name="receiptYn"]) {height: auto; gap: 8px;}
	}
	ul.certify {gap:10px;
		li button { font-size: 1rem;padding: 14px }
		li button::before{ background-size: 46px !important; height: 50px}
	}
	.find_wrap {
		.find_step01 {margin-top: 20px;}
		.email.ph input[type="text"], .email.ph select, .email input[type="text"] {font-size: 14px; padding: 0 8px;}
		.btn_box a {width: 100%;}
		ul.info li {font-size: 14px; padding-left: 20px;}
		ul.info li::before {width: 16px; height: 16px; background-size: 16px;}
	}
	.find_wrap ul.info{padding: 16px}
	.find_wrap .rsltbox div.ok{ padding: 40px 20px}
	.find_wrap .rsltbox div.ok::before{display: none}
	.find_wrap p.alert{margin-left: 0; padding: 8px 20px}
	#content.join .my_wrap, .my_wrap {
		.input_sec table {border-color: var(--black-color); border-right: 0; border-bottom: 1px solid;
			colgroup col {width: auto !important;}
			tr {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; padding: 0;}
			th {background: none; border: 0;}
			td {border: 0;}
			tr th, tr td {max-width: inherit; width: 100%; padding: 0;}
			tr th {padding-top: 12px;}
			tr td {padding: 6px 0; font-size: 1rem;}
			tr td:has(button.naver) {display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
				.tdbtn.naver {margin-top: 8px;}
				.tdbtn {margin-left: 0;}
			}
			.tdbtn {margin-left: 0; white-space: nowrap;}
			* + .tdbtn, a.key .tdbtn {margin-left: 6px;}
			input {padding: 0 8px; max-width: inherit;}
			.adres {display: flex;}
			td .adres input[type="text"] {width: calc(80% - 8px);}
			.ph input {width: 92px;}
			.email {display: flex;flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 4px;}
			.email input {width: 46%;}
			.email select {width: 99%;}
			.pwdDiv td span.info {font-size: 13px; display: block; margin-top: 4px;}
			td span.info br {display: none;}
		}
		.btn_box {margin-top: 24px; flex-direction: column;}
		.btn_box a, .btn_box button {width: 100%;}
		.list_box .align_box, #eduSec .align_box {display: flex; gap: 4px; flex-wrap: wrap; width: 100%;
			select {min-width: inherit; width: 100%;}
		}
		#concSec + .rowtable, #eduSec .rowtable {border-color: var(--black-color);
			thead, colgroup {display: none;}
			tbody tr {display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--gray-300-color); padding: 12px 0; gap: 8px 14px; position: relative; overflow: hidden; align-items: center; width: 100%; justify-content: flex-start;}
			tbody tr td {border: none; padding: 0; height: auto; text-align: left; position: relative;}
			tbody tr td:not([data-th="공연명"], [data-th="공연 / 교육명"]), tbody tr td:not([data-th="공연명"], [data-th="공연 / 교육명"]) a {color: var(--gray-700-color); font-size: 14px; padding: 0; vertical-align: baseline;}
			tbody tr td:not([data-th="공연명"], [data-th="공연 / 교육명"], [data-th="신청현황"], [data-th="상태"], [data-th="공연 / 교육일"], [data-th="공연일"], [data-th="매수"]):before {content: attr(data-th); padding-right: 6px;}
			tbody tr td[data-th="공연명"], tbody tr td[data-th="공연 / 교육명"] {width: 100%;}
			tbody tr td[data-th="공연명"] a, tbody tr td[data-th="공연 / 교육명"] a {font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; padding: 0;}
			tbody tr td[data-th="예매 / 신청일"]:before {content: '예매일'}
			tbody tr td[data-th="예매 / 신청번호"]:before {content: '예매번호'}
			.tdbtn {border: 0; line-height: normal; margin: 0; padding: 0; text-decoration: underline; height: auto;}
			tbody tr td[data-th="예매 / 신청일"]:after, tbody tr td[data-th="공연 / 교육일"]:after, tbody tr td[data-th="공연일"]:after {content: ''; width: 1px; height: 8px; background-color: var(--gray-700-color); position: absolute; top: 32%; right: -6%;}
			tbody tr td[data-th="신청현황"]:after, tbody tr td[data-th="상태"]:after {content: ''; width: 1px; height: 8px; background-color: var(--gray-700-color); position: absolute; top: 33%; right: 122%;}
		}
	}
	.login .find_wrap{
		.find_step02 .birth select {width: 60%; margin-bottom: 12px;}
		.find_step02 .birth select:last-child {margin-bottom: 0;}
	}
}

@media only screen and (max-width: 1023px) {
	.news .table_box, .news .list_box {
		thead,tbody,tr,th,td{ display: block; border: none; margin: 0; padding: 0}
		thead{ display: none}
		tr{ display: flex; flex-direction: column; gap:0.5rem; border-top: 1px solid var(--gray-200-color); padding:20px 0; position: relative; ;}
		td{ display: inline-flex; gap:0 0.5rem; font-size: 1rem; flex-wrap: wrap; align-items: center; padding:0 1rem;}
		td[data-th="번호"] {display: none;}
		tr span + a{margin: 0}
		tr td>*{order: 3}
		tr td[data-th="제목"]{ padding-top: 36px;}
		tr td>a{ order:1; font-weight: 600; position:absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; height: 100%; padding:20px 1rem 0 1rem}
		tr td>.thum{order: 2}
		a:has(span.ico.file) {position: absolute; padding: 0; width: 30px; height: 30px; bottom: 20px; right: 1rem; left: auto; top: auto;}
		span.ico.file, .filedn{ border: 1px solid var(--gray-300-color); border-radius: 2px; height: 30px; line-height: normal; min-width: 30px; background-size: 20px; margin: 0; flex: none;}
		.filedn {position: absolute; right: 1rem; bottom: 20px;}
		span.new,span.thum, .thumlist .list .txt span.thum{ display: inline-flex; align-items: center; justify-content: center; font-size: 13px;font-weight: 500; line-height: normal; margin: 0; flex: none};
		.thumlist .list .txt span.thum {margin-bottom: 12px;}
		.thumlist a {position: relative !important; width: 100% !important; height: auto !important; bottom:0 !important; right: 0 !important;}
		.thumlist span.ico.file, .filedn{ border: 1px solid var(--gray-300-color); border-radius: 2px; height: 30px; line-height: normal; min-width: 30px; background-size: 20px; margin: 0; flex: none; position: absolute; right: 1rem; bottom: 20px;}

	}
	.news span.bul {font-size: 14px; min-width: 56px; padding: 6px 8px; line-height: 16px;}
	.viewheader {
		span.thum{ font-size: 13px; margin-bottom: 0;}
		span.bul {margin-bottom: 0;}

	}
	/* .thumlist {
        .list > a{ align-items: flex-start; gap:40px}
        .list .img { flex: none;max-height: none; min-height: auto; margin: 0;  width: 180px; background-color: var(--gray-100-color); border-radius: var(--radius-S) }
        .list .noImg{aspect-ratio: 3 / 2; }
        .list .img img, .list .noImg:before{ width: 100%; height: 100%; object-fit: cover;aspect-ratio: 3 / 2; object-position: center }
        .list .txt h3{ font-size: 1rem; margin-bottom: 10px}
        .list .txt .date{ font-size: 0.9rem}
    } */

	.file_link {
		li{ position: relative; padding-left:22px}
		li::before{ position: absolute; left: 0; top: 8px; margin: 0}
	}

	.news.recruit .formbox.orderbox {
		.coltable {border: 0;}
		tr {border-top: 0; border-bottom: 1px solid var(--gray-300-color); flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
		tr th {width: 18%; text-align: left; white-space: wrap}
		tr td {width: 80%; display: block; padding: 0;}
	}
}
@media only screen and (max-width: 767px) {

	/* .thumlist {
        .list > a{ gap:20px}
        .list .img{width: 100px}

    } */

	.news.recruit .formbox.orderbox {
		tr {flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start;}
		tr th {width: 100%;}
		tr th br {display: none}
		tr td {width: 100%;}
		#bMonth, #bDate {width: calc(52% - 12px) !important;}
		#email1, #email2 {width: calc(50% - 12px);}
		#email2 + select {width: 100%; display: block; margin-top: 8px;}
	}
}

/*에러 안내*/
.error_w {height: 100%; padding: 0 !important; justify-content: center;}
.error_w > div {display: flex; flex-direction: column; width: auto; align-items: flex-start; justify-content: center; min-height: 80vh; max-width: 700px; margin: 0 auto; gap: 20px;}
.error_w > div:before {display: block; width: 120px; height: 135px; background: url("data:image/svg+xml,%3Csvg width='120' height='135' viewBox='0 0 120 135' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1756_10311)'%3E%3Cmask id='mask0_1756_10311' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='120' height='135'%3E%3Cpath d='M120 0H0V135H120V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1756_10311)'%3E%3Cpath d='M120 95.0699V39.9199C120 35.4999 117.65 31.4299 113.83 29.2199L66.17 1.65994C62.35 -0.550059 57.65 -0.550059 53.84 1.65994L6.17 29.2299C2.35 31.4399 0 35.5199 0 39.9299V95.0799C0 99.4999 2.35 103.57 6.17 105.78L53.84 133.35C57.66 135.56 62.36 135.56 66.17 133.35L113.84 105.78C117.66 103.57 120.01 99.4899 120.01 95.0799L120 95.0699Z' fill='%23F59B15'/%3E%3Cpath d='M59.5 97C76.0685 97 89.5 83.5685 89.5 67C89.5 50.4315 76.0685 37 59.5 37C42.9315 37 29.5 50.4315 29.5 67C29.5 83.5685 42.9315 97 59.5 97Z' fill='%23F59B15'/%3E%3Cpath d='M89.6998 46.83C79.5298 30.23 57.8598 25.03 41.2898 35.21C24.7198 45.4 19.5298 67.11 29.6898 83.71C38.6498 98.34 56.5398 104.11 71.9998 98.31L83.8798 104.76L83.5198 91.23C95.6898 80.05 98.6498 61.45 89.6998 46.83ZM59.6998 87.02C57.5398 87.02 55.7898 85.27 55.7898 83.1C55.7898 80.93 57.5398 79.18 59.6998 79.18C61.8598 79.18 63.6098 80.93 63.6098 83.1C63.6098 85.27 61.8598 87.02 59.6998 87.02ZM63.6098 76.5H55.7898L52.6598 45.15H66.7398L63.6098 76.5Z' fill='white'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1756_10311'%3E%3Crect width='120' height='135' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat 50% 50%; content: ''; margin: 0 auto 20px;}
.error_w h2 {width: 100%; text-align: center; font-size: 1.7rem; font-weight: 700; color: var(--black-color);}
.error_w > div > p {font-size: 1rem; color: var(--gray-800-color);}
.error_w .btn_box {width: 100%; display: flex; margin-top: 20px;}
.error_w .btn_box button {display: inline-flex; text-align: center; background: var(--main-color); color: var(--black-color); padding: 0 28px; font-size: 1.125rem; font-weight: 700; align-items: center; justify-content: center; border-radius: 2px; height: 50px; width: 100%; margin: 0;}
.error_w .date {width: 100%;}
.error_w .date >p {background: var(--gray-50-color); color: var(--gray-900-color); font-size: 14px; padding: 20px; text-align: center; width: 100%; display: block; font-weight: 500;}
.error_w .date >p + * {margin-top: 15px; display: block; font-size: 13px; color: var(--gray-700-color);}

/*설문 완료안내*/
.form_complete {height: 100%; padding: 0 !important; justify-content: center;}
.form_complete .form_c {display: flex; flex-direction: column; width: auto; align-items: flex-start; justify-content: center; min-height: 80vh; max-width: 700px; margin: 0 auto; gap: 20px;}
.form_complete .form_c:before {display: block; width: 120px; height: 135px; background: url("data:image/svg+xml,%3Csvg width='120' height='135' viewBox='0 0 120 135' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M120 95.0675V39.9175C120 35.4975 117.65 31.4275 113.83 29.2175L66.17 1.6575C62.35 -0.5525 57.65 -0.5525 53.84 1.6575L6.17 29.2275C2.35 31.4375 0 35.5175 0 39.9275V95.0775C0 99.4975 2.35 103.567 6.17 105.777L53.84 133.348C57.66 135.558 62.36 135.558 66.17 133.348L113.84 105.777C117.66 103.567 120.01 99.4875 120.01 95.0775L120 95.0675Z' fill='%23F59B15'/%3E%3Cpath d='M36.6668 73C29.3002 73 23.3335 78.9667 23.3335 86.3333C23.3335 88.8333 24.0335 91.2 25.2668 93.2C27.5668 97.0667 31.8002 99.6667 36.6668 99.6667C41.5335 99.6667 45.7668 97.0667 48.0668 93.2C49.3002 91.2 50.0002 88.8333 50.0002 86.3333C50.0002 78.9667 44.0335 73 36.6668 73ZM43.2335 85.2333L36.1335 91.8C35.6668 92.2333 35.0335 92.4667 34.4335 92.4667C33.8002 92.4667 33.1668 92.2333 32.6668 91.7333L29.3668 88.4333C28.4002 87.4667 28.4002 85.8667 29.3668 84.9C30.3335 83.9333 31.9335 83.9333 32.9002 84.9L34.5002 86.5L39.8335 81.5667C40.8335 80.6333 42.4335 80.7 43.3668 81.7C44.3002 82.7 44.2335 84.3 43.2335 85.2333Z' fill='white'/%3E%3Cpath d='M77.5 36.0986H45.8333C36.3333 36.0986 30 42.432 30 51.932V66.7986C30 67.9653 31.2 68.7986 32.3333 68.4986C33.7333 68.1653 35.1667 67.9986 36.6667 67.9986C46.2 67.9986 54.0667 75.732 54.9333 85.0986C55 86.032 55.7667 86.7653 56.6667 86.7653H58.5L72.6 96.1653C74.6667 97.5653 77.5 96.032 77.5 93.4986V86.7653C82.2333 86.7653 86.2 85.1653 88.9667 82.432C91.7333 79.632 93.3333 75.6653 93.3333 70.932V51.932C93.3333 42.432 87 36.0986 77.5 36.0986ZM72.7667 64.032H50.5667C49.2667 64.032 48.2 62.9653 48.2 61.6653C48.2 60.332 49.2667 59.2653 50.5667 59.2653H72.7667C74.0667 59.2653 75.1333 60.332 75.1333 61.6653C75.1333 62.9653 74.0667 64.032 72.7667 64.032Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; content: ''; margin: 0 auto 20px;}
.form_complete h2 {width: 100%; text-align: center; font-size: 1.7rem; font-weight: 700; color: var(--black-color);}
.form_complete .form_c > p {font-size: 1rem; color: var(--gray-800-color);}
.form_complete .btn_box {width: 100%; display: flex; margin-top: 20px;}
.form_complete .btn_box button {display: inline-flex; text-align: center; background: var(--main-color); color: var(--black-color); padding: 0 28px; font-size: 1.125rem; font-weight: 700; align-items: center; justify-content: center; border-radius: 2px; height: 50px; width: 100%; margin: 0;}

@media only screen and (max-width: 1023px) {
	.error_w .btn_box button, .form_complete .btn_box button  {height: 46px; font-size: 1rem;}

	.error_w h2, .form_complete h2 {font-size: 1.5rem;}
	#movie{ width:100%; height:350px !important; top:50% !important; margin-top:-180px}
	.movieCont{ background:#000; width:100%; height:100vh; overflow:hidden; position:fixed; left:0; top:0; z-index:90;}
	.ut_close{margin:10px;float:right; font-size:30px; color:#fff !important; opacity:0.7 !important;}
	#movie{ width:100%; height:350px ; top:50%; margin-top:-180px}
	.movieCont{ background:#000; width:100%; height:100vh; overflow:hidden; position:fixed; left:0; top:0; z-index:90;}
}
@media only screen and (max-width: 767px) {
	.error_w, .form_complete {padding: 0 20px !important;}
	.ut_tool{left:0; top:0; width: 100%; position:fixed; text-align:right; background:#000; z-index:9999; overflow:hidden;}
}


/*영상*/
#movie {position:fixed;width:100%;height:100%;left:0;top:0;right:0;bottom:0;z-index:90;}
/*#movie:before {content:'';display:block;position:fixed;left:0;top:0;right:0;bottom:0;background:#000;opacity:0.4}*/
#movie .pop-bg {position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.7);width:100% !important;height:100% !important;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter:alpha(opacity=40); transform: none}
#movie > div {position:absolute;z-index:11;left:50vw;top:50%;width:80vw;height:45vw; transform: translate(-50%, -50%)}
#movie > div iframe{display:block;width:100%;height:100%}
#movie > div .movietit {font-size:40px;font-weight:200}
#movie > div .movieupCont {padding:45px 50px}
#movie > div a.ut_close {position:absolute;right:-40px;top:0px;color:#fff;font-size:30px}
#movie > div .movieCont strong {font-size:16px;line-height:1.6;font-weight:400}
#movie.fridge {left:23.1%;top:18%;width:53.8%;height:64%}
#movie .movieCont {max-height: 90%; max-width: 80%;}
.ut_close:before{content: "\e646";font-family: 'spo'; speak: none; font-style: normal;  font-variant: normal;  text-transform: none;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/*신청 폼 외*/
.news.recruit .view_box:has(.formbox), .content.org .view_box:has(.formbox) {
	.viewheader .txt {padding-top: 40px; text-align: left;}
	.input_sec .table_box h4 {padding-bottom: 12px;}
	input_sec {max-width: 960px; margin: 0 auto;}
	.coltable{table-layout: auto; display: table !important;}
	.coltable th {background: var(--gray-50-color); line-height: 1.5; text-align: left; padding: 12px 20px; font-size: 1rem; font-weight: 600; word-break: keep-all; height: 60px; color: var(--black-color);}
	.coltable td {text-align: left; line-height: 1.5; padding: 12px 20px; color: var(--gray-600-color); width: 80%;}
	.coltable th span.must, .sp_re p span.must {color: #F09; font-size: 1rem; vertical-align: top;}
	.coltable th span.must::before, .sp_re p span.must::before {content: none;}
	.coltable td span.impor {color: #DC3633; font-weight: 600;}
	.table_box {padding-top: 40px;}
	.coltable td input, .coltable td select {height: 40px; align-content: center;}
	.coltable td select {line-height: 40px;}
	.ph select, .ph input, .email input, .email select {width: auto;}
	.adres {display: flex; align-content: center; gap: 12px;}
	.adres .tdbtn{ border:1px solid #cdcdcd; background:#f3f3f5; line-height:34px; min-width:80px; box-sizing:border-box; height:40px; color:#525252; font-size:0.9rem; display:inline-block; white-space: nowrap}
	.table_box.term_sec .checkbox {padding-top: 16px;}
	.term_sec.table_box div:has(label) {display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px;
		label {display: flex; flex-direction: row-reverse; gap: 6px;}
	}
}
.edu .formbox.orderbox {
	.btn_box {margin-top: 20px;}
}
.news.recruit .formbox.orderbox {
	table.coltable:has(#lastName, #firstName) th {white-space: nowrap;}
	table.coltable:has(#lastName, #firstName) tr td {width: auto;}
}

@media only screen and (max-width: 1023px) {
	.news.recruit .view_box:has(.formbox), .content.org .view_box:has(.formbox) {
		.input_sec {max-width: inherit; gap: 40px;}
		.coltable th {max-width: 128px; width: auto; padding: 8px 12px; height: auto; line-height: 24px; font-size: 14px;}
		.coltable td {line-height: 24px; padding: 12px;}
		.coltable td span.info, .coltable td select {font-size: 14px;}
		.adres .tdbtn {margin-left: 0px !important;}
		.tdbtn {padding: 0 12px; margin-left: 6px; font-size: 14px; min-width: inherit;}
		.coltable td input {font-size: 14px;}
		.ph {display: flex; align-items: center; justify-content: flex-start; gap: 4px;}
	}
	.news.recruit .view_box:has(.formbox) {
		table:not(.rowtable) {border-right: 1px solid var(--gray-300-color) !important;border-top: 1px solid var(--gray-300-color) !important;
			tbody {display: table-row-group;}
			tr {display: table-row;}
			td, th {display: table-cell; border-left: 1px solid var(--gray-300-color);}
		}
		table.rowtable {
			thead {display: table-header-group}
			tr {display: table-row; font-size: 14px;line-height: 24px;padding: 8px 12px;height: auto;}
			td, th {display: table-cell; white-space: nowrap !important; font-size: 14px;line-height: 24px;padding: 8px 12px;height: auto; text-align: center !important;}
			tbody {display: table-row-group;}
			tr td {width: auto !important; display: table-cell !important; padding: 8px 12px !important;}
			input, select {min-width: 140px !important;}
			td[data-th="교육기간"], td[data-th="근무기간"], td[data-th="활동기간"] {display: flex !important; flex-wrap: nowrap; flex-direction: row; align-items: center; justify-content: flex-start; border-bottom: 0; gap: 4px;
				.picker {display: flex; flex-direction: row; align-items: center; gap: 4px;}
			}
		}
	}
	.news.recruit .formbox.orderbox {
		table.coltable:has(#lastName, #firstName) th {white-space: wrap;}
	}
}

@media only screen and (max-width: 767px) {
	.news.recruit .view_box:has(.formbox) {
		h4 {border-bottom: 0;}
		table:not(.rowtable) {border-color: var(--black-color) !important; border-right: 0 !important;
			tr {border-bottom: 0 !important;}
			td {white-space: wrap;}
			span.bul {margin-left: 0}
			.adres .tdbtn {height: 40px !important;}
			label {display: block; margin-left: 0 !important;}
			td:has(select[name="bMonth"]) {display: flex; justify-content: flex-start; align-items: center; flex-direction: row; flex-wrap: nowrap;}
		}
		table.rowtable {border-color: var(--gray-300-color) !important;
			tr {display: table-row !important; font-size: 14px;line-height: 24px;padding: 8px 12px;height: auto;}
			th {background: var(--gray-50-color) !important;}
			td, th {display: table-cell; white-space: nowrap !important; font-size: 14px;line-height: 24px;padding: 8px 12px !important;height: auto; text-align: center !important;}
			tbody {display: table-row-group;}
		}
		.txtarea textarea {height: 120px;}
		.term_sec .txt {padding: 20px 32px;}
		label {align-items: baseline}
		.table_box .before, .after {min-width: 492px;}
	}

	.edu .formbox.orderbox, .news.recruit .view_box:has(.formbox), .content.org .view_box:has(.formbox) {
		.input_sec table {border-color: var(--black-color); border-right: 0;
			colgroup col {width: auto !important;}
			tr {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; padding: 0;}
			th {background: none; border: 0;}
			td {border: 0;}
			tr th, tr td {max-width: inherit; width: 100%; padding: 0;}
			tr th {padding-top: 12px;}
			tr td {padding: 6px 0; font-size: 1rem;}
			tr td:has(button.naver) {display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
				.tdbtn.naver {margin-top: 8px;}
				.tdbtn {margin-left: 0;}
			}
			.tdbtn {margin-left: 0; white-space: nowrap;}
			* + .tdbtn, a.key .tdbtn {margin-left: 6px;}
			input {padding: 0 8px; max-width: inherit; vertical-align: middle; line-height: 40px;}
			input[type="file"] {width: 100%; padding: 0;}
			.adres {gap: 8px;}
			td .adres input[type="text"] {width: calc(80% - 8px);}
			.ph input {width: 100%;}
			.email {display: flex;flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 4px;}
			.email input {width: 46%;}
			.email select {width: 99%;}
			.pwdDiv td span.info {font-size: 13px; display: block; margin-top: 4px;}
			td span.info br {display: none;}
			label + label {margin-left: 12px;}
		}
		.btn_box {margin-top: 24px; flex-direction: column;}
		.btn_box a, .btn_box button {width: 100%;}
		.list_box .align_box, #eduSec .align_box {display: flex; gap: 4px; flex-wrap: wrap; width: 100%;
			select {min-width: inherit; width: 100%;}
		}
	}

	.edu .formbox.orderbox {
		.coltable {border-bottom: 1px solid}
		h4 {border-bottom: 0;}
		th {white-space: wrap; text-align: left;}
		tr td {padding: 8px 0 !important;}
	}
	.news.recruit .formbox.orderbox {
		table.coltable:has(#lastName, #firstName) tr td {width: 100%;}
	}
}

#tbl tr:hover, #tbl1 tr:hover, #tbl2 tr:hover {background: var(--gray-200-color);
	td {color: #000;}
}
.thumlist .list .txt:has(.ico.new) h3, .thumlist .list .txt:has(.thum) h3 {vertical-align: middle; margin-right: 8px;}

/*호버 액션 추가*/

/* 공연검색 - 포스터 */
/* 이미지 래퍼에 overflow 처리 */
#conList.thum_w .list-img, .pkg_list .indiList .oldimg.pkgimg.list.pkg2023_indi .brick .pic {
	overflow: hidden;
	border-radius: 8px;
	position: relative;
}

/* 이미지 확대 효과 추가 */
#conList.thum_w .list-img img, .pkg_list .indiList .oldimg.pkgimg.list.pkg2023_indi .brick .pic img {
	transition: transform 0.3s ease;
}
#conList.thum_w .list:hover .list-img img,
#conList.thum_w .list:focus-within .list-img img,
.pkg_list .indiList .oldimg.pkgimg.list.pkg2023_indi .brick:hover .pic img,
.pkg_list .indiList .oldimg.pkgimg.list.pkg2023_indi .brick:focus-within .pic img
{
	transform: scale(1.05);
}


@media only screen and (max-width: 1023px) {
	#conList.thum_w .list-img, .pkg_list .indiList .oldimg.pkgimg.list.pkg2023_indi .brick .pic {border-radius: 6px;}
	#conList.thum_w .list:hover .list-img img,
	#conList.thum_w .list:focus-within .list-img img,
	.pkg_list .indiList .oldimg.pkgimg.list.pkg2023_indi .brick:hover .pic img,
	.pkg_list .indiList .oldimg.pkgimg.list.pkg2023_indi .brick:focus-within .pic img
	{
		transform: none;
	}
	#tbl tr:hover, #tbl1 tr:hover, #tbl2 tr:hover {background: none;
		td {color: var(--gray-600-color);}
		.ico {filter: unset;}
	}
}

/*영상 리스트*/
.ut_list .list .img .thumnail{ background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; display: block; background-position: center}
.ut_list .list:hover button.play:before, .ut_list .list:focus-within button.play:before {background: rgba(240, 148, 29,0.7) url("data:image/svg+xml,%3Csvg width='22' height='29' viewBox='0 0 22 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.7882 13.5947C21.3704 13.9916 21.3704 14.8502 20.7882 15.2471L1.56334 28.355C0.899529 28.8076 6.43596e-07 28.3322 6.78715e-07 27.5288L1.82464e-06 1.31304C1.85976e-06 0.509616 0.89953 0.0342125 1.56334 0.486809L20.7882 13.5947Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat 56% 50%; background-size: 18px;}

.magz_list.cardlist {
	.img {aspect-ratio: 3 / 4;}
}

@media only screen and (max-width: 1023px) {
	.ut_list .list:hover button.play:before, .ut_list .list:focus-within button.play:before {background: rgba(0,0,0,0.7) url("data:image/svg+xml,%3Csvg width='22' height='29' viewBox='0 0 22 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.7882 13.5947C21.3704 13.9916 21.3704 14.8502 20.7882 15.2471L1.56334 28.355C0.899529 28.8076 6.43596e-07 28.3322 6.78715e-07 27.5288L1.82464e-06 1.31304C1.85976e-06 0.509616 0.89953 0.0342125 1.56334 0.486809L20.7882 13.5947Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat 56% 50%; background-size: 16px;}
}
@media only screen and (max-width: 767px) {
	.ut_list .list:hover button.play:before, .ut_list .list:focus-within button.play:before {background-size: 12px;}
}

/* --- .viewheader 상단 고정 및 스크롤 제어 CSS --- */

#content.hidetit {padding-top: 85px; /* .viewheader의 높이만큼 패딩 추가 */}
/* #content에 hidetit 클래스가 추가되면 .viewheader를 상단에 고정 */
#content.hidetit .viewheader { position: fixed; top: 0;  left: 0; right: 0; width: 100%; background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-bottom: 1px solid #000; z-index: 100; transform: translateY(0); transition: transform 0.3s ease-in-out; flex-direction: row; align-items: center; padding: 0 40px;
	.heading_w{display: flex; align-items: center; width: 100%; margin: 0 auto; max-width: 1440px; gap:1rem; padding: 10px 0;} 
	h3{ padding: 0; font-size: 1.125rem; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 
	[class^="badge-"]{ font-size: 0.92rem; height: 30px;} 
	@media only screen and (max-width: 767px) {
	.badge-box{ display: none;}
}
}
@media only screen and (max-width: 1023px) {
	#content.hidetit .viewheader{ padding: 0 20px;}
}

#content.hidetit.scroll-up-tit .viewheader { transform: translateY(-100%);}
#content.hidetit.scroll-down-tit .viewheader {transform: translateY(0);}