@charset "utf-8";
@import url('/css/seoularts/reset.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

html {font-size: 62.5%; /* 브라우저 기본 16px의 62.5% = 10px */}


:root{
	--bg: #e9f2ff;  

	--primary: #c4161c;
	--secondary: #0f9fe9;
	--third: #2644a6;
	--cancel: #444444;

	
	--transition-custom: all 0.3s ease-in;

	--osmt: 'OneStoreMobileGothicTitleFont', sans-serif;
	--scd: 'Escoredream', sans-serif;
	--mso: 'Material Symbols Outlined';


	--fs18: clamp(1.5rem, 4vw, 1.8rem);
	--fs20: clamp(1.6rem, 3vw, 2.1rem);
	--fs21: clamp(1.6rem, 3vw, 2rem);
	--fs23: clamp(1.7rem, 3vw, 2.3rem);
	--fs26: clamp(1.9rem, 3vw, 2.6rem);
	--fs32: clamp(2.1rem, 3vw, 3.2rem);
	--fs35: clamp(2.3rem, 3vw, 3.5rem);
	--fs38: clamp(2.5rem, 3vw, 3.8rem);
	--fs45: clamp(3.2rem, 3vw, 4.5rem);
	--fs54: clamp(3.3rem, 5vw, 5.4rem);

	--mgT20: clamp(10px, 5vw, 20px);
	--mgT30: clamp(15px, 5vw, 30px);
	--mgT40: clamp(20px, 5vw, 40px);
	--mgT50: clamp(25px, 5vw, 50px);
	--mgT60: clamp(30px, 5vw, 60px);
	--mgT80: clamp(40px, 5vw, 80px);
	--mgT90: clamp(45px, 5vw, 90px);
	--mgB50: clamp(25px, 5vw, 50px);
	--mgB90: clamp(45px, 5vw, 90px);

	--pd40: clamp(20px, 5vw, 40px);
	--pdY90: clamp(40px, 5vw, 90px) 0;
	--pdT90: clamp(40px, 5vw, 90px);
	--pdB70: clamp(30px, 5vw, 70px);
	--pdB90: clamp(40px, 5vw, 90px);


	--bru20: clamp(10px, 3vw, 20px);
	--bru30: clamp(15px, 3vw, 30px);


	--bs-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}






/********** common **********/

.primary {color:var(--primary) !important;}
.secondary {color:var(--secondary) !important;}
.primary-bg {background:var(--primary) !important;}
.secondary-bg {background:var(--secondary) !important;}
.third-bg {background:var(--third) !important;}




.mgT10 {margin-top:10px;}
.mgT20 {margin-top:var(--mgT20);}
.mgT40 {margin-top:var(--mgT40) !important;}
.mgT60 {margin-top:var(--mgT60);}
.mgT90 {margin-top:var(--mgT90);}






.required:after {content:'*'; top:0; margin:0 0 0 5px; font-weight:500; color:var(--primary)}






/***** layout *****/
.inbox-full {width:100%; padding:0 60px;}
.inbox-max {max-width:1400px; width:100%; margin:0 auto;}
.inbox-max2 {max-width:1600px; width:100%; margin:0 auto;}

@media (max-width:1580px){
	.inbox-full {padding-left:4%; padding-right:4%}
	.inbox-max {padding-left:4%; padding-right:4%}
	.inbox-max2 {padding-left:4%; padding-right:4%}
}






/***** form *****/

/* group */
.group-search {width:100%; display:flex; align-items:center;}
.group-search input {width:calc(100% - 69px) !important}
.group-search button {width:64px; margin-left:5px; flex-shrink:0;}
.group-radio {height:45px; display:flex; align-items:center;}



/* checkbox */
.input-item {display:inline-block; position:relative; padding-left:clamp(28px, 2vw, 35px); margin:2px 0; cursor:pointer;  font-size:clamp(15px, 1.2vw, 18px); color:#000; margin-right:clamp(15px, 3vw, 40px); user-select:none;}
.input-item input {position:absolute; opacity:0; width:0; height:0;}
.checkmark {position:absolute;  top:0; left:0; width:clamp(18px, 1.5vw, 23px); height:clamp(18px, 1.5vw, 23px); background:#fff; border-radius:3px; border:1px solid #999; transition:all .2s ease-out;}
.input-item input:checked ~ .checkmark {background-color:var(--primary); border:none;}
.checkmark:after {content:""; position:absolute; display:none;}
.input-item input:checked ~ .checkmark:after {display:block;}
.input-item .checkmark:after {left:38%; top:20%; width:25%; height:45%; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}

@media (max-width:568px){
	.input-item {padding-left:25px; font-size:15px;}
	.checkmark {height: 20px; width: 20px;}
	.input-item .checkmark:after {left: 7px; top: 3px;}
}



/* radio */
.radio-item {display:inline-block;  position:relative; padding-left:clamp(28px, 2vw, 35px); margin:2px 0; margin-right:clamp(15px, 3vw, 40px); cursor:pointer; font-size:clamp(15px, 1.2vw, 18px); color:#000; user-select:none;}
.radio-item input {position:absolute; opacity:0; width:0; height:0;}
.radiomark {position:absolute; top:0; left:0; width:clamp(18px, 1.5vw, 23px); height:clamp(18px, 1.5vw, 23px);background:#fff; border:1px solid #999; border-radius:50%; transition:all .2s ease-out;}
.radio-item input:checked ~ .radiomark {background:var(--primary); border-color:var(--primary);}/* 선택 시 */
.radiomark:after {content:""; position:absolute; display:none;}/* 내부 점 */
.radio-item input:checked ~ .radiomark:after {display:block;}
.radio-item .radiomark:after {width:8px; height:8px; background:#fff; border-radius:50%; top:50%; left:50%; transform:translate(-50%, -50%);}
.radio-item.disabled {cursor:not-allowed; opacity:0.7;}
.radio-item.disabled .radiomark {background:#e9e9e9; border-color:#ccc;}
.radio-item.disabled input:checked ~ .radiomark {background:var(--primary); border-color:var(--primary); opacity:0.7;}



/* file */
.file-upload-wrapper input[type="file"] {display: none; /* 브라우저 기본 UI 숨김 */}
.file-upload-wrapper {display: flex; align-items: center; gap: 5px; width:100%;}
.file-upload-wrapper .upload-name {max-width: 300px; width:calc(100% - 113px); text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.file-upload-wrapper label {cursor: pointer; font-size:16px !important;}
.file-upload-wrapper .btn-file-save,
.file-upload-wrapper .btn-file-delete {font-size: 16px;}

@media (max-width:1024px){
	.file-upload-wrapper .upload-name {width:calc(100% - 225px);}
	.file-upload-wrapper label {width:88px; padding:0 15px !important;}
	.file-upload-wrapper .btn-file-save,
	.file-upload-wrapper .btn-file-delete  {width:60px; padding:0 15px !important;}
}

@media (max-width:480px){
	.file-upload-wrapper {flex-wrap:wrap}
	.file-upload-wrapper .upload-name {width:calc(100% - 88px);}
	.file-upload-wrapper label {width:83px; padding:0 10px !important; font-size:15px !important;}
	.file-upload-wrapper .btn-file-save,
	.file-upload-wrapper .btn-file-delete  {width:55px; padding:0 10px !important; font-size:15px !important;}
	.file-upload-wrapper .btn-file-delete {margin-left:auto}
}



/* button */
.btn-center {display:flex; justify-content:center; text-align:center; gap:5px}
.btn-right {display:flex; justify-content:flex-end; text-align:center; gap:5px}

.btn {display:inline-block; border-radius:0.5rem; font-weight:400; text-align:center; padding:0 2rem; transition: all 0.35s; letter-spacing:0;  cursor:pointer;}

.btn-primary {background: var(--primary); border:1px solid var(--primary); color:#fff;}
.btn-cancel {background: var(--cancel); border:1px solid var(--cancel); color:#fff;}
.btn-search {background: var(--cancel); border:1px solid var(--cancel); color:#fff; padding:0 1.7rem !important;}
.btn-disabled {background: #e1e1e1; border:1px solid #e1e1e1; color:#a3a3a3; cursor:default}
.btn-second {background: var(--secondary); border:1px solid var(--secondary); color:#fff;}
.btn-third {background:var(--third) !important; border:1px solid var(--third); color:#fff;}

.btn-primary:hover, .btn-primary:focus,
.btn-cancel:hover, .btn-cancel:focus,
.btn-second:hover, .btn-second:focus {box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.2);}

.line-red {background: #fff; border:1px solid var(--primary); color:var(--primary)}
.line-black {background: #fff; border:1px solid #444444;}
.line-gray {background: #f2f2f2; border:1px solid #aaaaaa;}
.btn-rdu {border-radius:60px; padding:0 1.8rem !important;}

.btn-icon {display:flex; align-items:center; justify-content:center; gap:5px;}
.btn-icon span {font-size:26px; color:#fff; font-weight:200;}
.btn-add {border:1px dashed #aaaaaa; background:#fff; cursor:pointer; font-size:18px !important; border-radius:10px; width:100%}
.btn-add span {color:#000 !important;  font-size:26px !important; font-weight:300; transition: all 0.35s;}
.btn-add:hover {border:1px solid var(--primary); color:var(--primary)}
.btn-add:hover span {color:var(--primary) !important}
.btn-link {border:1px dashed #ccc; border-radius:10px;}
.btn-link:hover {background:#ccc;}

.big {line-height:53px; padding:0 4rem; font-size:clamp(1.9rem, 4vw, 2.1rem); font-weight:600; letter-spacing:0}
.medium {line-height:43px; padding:0 2.5rem; font-weight:500; font-size:clamp(1.5rem, 4vw, 1.7rem);}
.small {line-height:38px; padding:0 1.5rem; font-weight:500; font-size:16px;}
.small2 {line-height:26px; padding:0 1rem; font-size:15px;}

@media (max-width:1024px){
	.big {line-height:5rem; padding:0 3rem;}
	.medium {line-height:38px; padding:0 2rem;}
	.small {line-height:34px;}
}

@media (max-width:768px){
	.big {line-height:4.5rem; padding:0 2rem;}
	.medium {padding:0 2rem;}
	.btn-add {font-size:17px !important;}
	.btn-add span {font-size:24px !important;}
	.small {line-height:30px;}
}

@media (max-width:480px){
	.btn-add {font-size:16px !important;}
	.btn-add span {font-size:22px !important;}
}





/***** title *****/
.title35 {font-family:var(--osmt); font-size:var(--fs35);}
.title-icon {display:flex; align-items:center; font-size:var(--fs23); font-family:var(--osmt); line-height:clamp(25px, 4vw, 35px);}
.title-icon:before {content:''; display:inline-block; width:clamp(25px, 4vw, 35px); height:clamp(26px, 4vw, 36px); background:url('/images/dongrang/icon-symbol.png') no-repeat ; background-size:100%; margin-right:7px}




/***** text *****/
.fs18 {font-size: var(--fs18);}
.fs20 {font-size: var(--fs20);}
.fs38 {font-size: var(--fs38);}
.fs45 {font-size: var(--fs45);}




/***** box *****/
.box1 {border-radius:var(--bru30); border:1px solid #dcdcdc; padding: clamp(30px, 5vw, 60px) clamp(20px, 5vw, 50px)}
.box2 {border-radius:var(--bru30); border:1px solid #dcdcdc; overflow:hidden}





.bl640 {display:inline-block}
.sound-only {font-size:0px !important;}
.sound-only2 label {font-size:0px !important;}
.br-ib-768 {display:none}

@media (max-width: 1024px){
	.sound-only2 {padding:0 0 15px 0 !important;}
	.sound-only2 label {display:none}
	.sound-only2 div {margin-top:0 !important}
}

@media (max-width: 768px){
	.br-ib-768 {display:inline-block}
}

@media (max-width: 640px){
	.bl640 {display:block; margin-top:10px}
}





/***** marker *****/
.marker-dot li {position:relative; padding-left:10px; line-height:140%; font-weight:500; color:#a73030}
.marker-dot li:nth-child(n + 1) {margin-bottom:10px}
.marker-dot li:before {content:"·"; position:absolute; left:0; top:0;}
.marker-star {position:relative; padding-left:17px; line-height:140%; font-weight:500; color:var(--primary)}
.marker-star:before {content:"※"; position:absolute; left:0; top:0;}






/***** table *****/
table {table-layout:fixed; width:100%; border-collapse:collapse; border-spacing:0 5px; background:#fff; border:1px solid #bfbfbf} 
caption {padding:0;font-size:0;line-height:0;overflow:hidden}
table th,
table td {padding:clamp(6px, 5vw, 10px); word-break:break-all; height:50px; text-align:center; border:1px solid #bfbfbf; line-height:140%} 
table thead th {font-weight:500; background:#f3f3f3}
table a:hover {text-decoration:none}
table tfoot th, 
table tfoot td {background:#d7e0e2;}

@media (max-width: 768px){
	.vertical-table {display: flex; border:0; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;}
	.vertical-table thead, 
	.vertical-table tbody {display: flex;}
	.vertical-table tr {display: flex; flex-direction: column; /*th, td들이 세로 방향으로 꽉 차게 늘어나도록 설정 */align-items: stretch; width:100%;}
	.vertical-table th, 
	.vertical-table td {border:0; padding:10px; border-top: 1px solid #ccc; border-left: 1px solid #ccc; box-sizing: border-box; /* 고정 높이(height)를 제거, 비율로 늘어나도록 */ flex: 1; /* 내용이 많아질 때 정렬을 위한 설정 */ display: flex; align-items: center; /* 세로 가운데 정렬 */}
	.vertical-table td {text-align:left;}
}

@media (max-width: 500px){
	.vertical-table thead {width:100px}
	.vertical-table tbody {width:calc(100% - 100px)}
}

@media (max-width: 477px){
	.vertical-table th:nth-child(2),
	.vertical-table td:nth-child(2) {min-height:80px}
}




.tbl-div {display:flex; flex-wrap:wrap; gap:2.666%;}
.tbl-div > div {padding:15px 0}
.tbl-div.col1 > div {display:block; width:100%}
.tbl-div.col2 > div {width:48.667%}
.tbl-div.col3 > div {width:31.556%}
.tbl-div.col4 > div {width:23%}
.tbl-div > div label {font-weight:600; font-size:var(--fs18);}
.tbl-div > div > div {margin-top:10px; display:flex; align-items:center; flex-wrap:wrap;}
.tbl-div > div > div select {width:100%;}
.tbl-div > div > div input {width:100%;}

@media (max-width: 1024px){
	.tbl-div.col3 > div,
	.tbl-div.col4 > div {width:48.667%}
}

@media (max-width: 640px){
	.tbl-div.col2 > div,
	.tbl-div.col3 > div,
	.tbl-div.col4 > div {width:100%}
}





/***** list *****/
.tbl-list {border-top:2px solid #282828}
.tbl-list table {table-layout:fixed; width:100%; border-collapse:collapse; border-spacing:0 5px; background:#fff; border:0 !important}
.tbl-list table tr {border-bottom: 1px solid #ccc;}
.tbl-list table th,
.tbl-list table td {border:0; font-size:16px; height:60px;}
.tbl-list table thead th {font-weight:500; background:#f3f3f3}

.td-num {width:90px;}
.td-subject {width:auto; padding-left:0}
.td-datetime {width:120px; color:#666}
.td-views {width:50px}
.flex {display:flex; align-items:center; }
.notice-icon {display:inline-block; vertical-align:middle; display: inline-flex; align-items: center; justify-content: center;}

.bo-subject {display:flex; align-items:center; gap:8px; text-align:left;}
.bo-subject:hover .bo-cate {color:#fff !important; background:none;}
.bo-subject:hover .cate1:before {width:100%;}
.bo-subject:hover .cate2:before {width:100%;}

.bo-subject a {display: inline-flex; align-items: center; gap:6px; width:calc(100% - 90px); vertical-align: middle; }
.bo-subject a .txt {display: inline-block; font-size:16px; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; flex-shrink: 1;}
.bo-subject a .icon-file,
.bo-subject a .icon-new {display: inline-block; flex-shrink: 0;}

@media (max-width: 768px){
	.tbl-list table thead {display:none}
	.tbl-list table tr {display: flex; flex-wrap:wrap}
	.tbl-list table th,
	.tbl-list table td {font-size:15px; display:inline-block; height:auto}
	.td-num {width:60px; display: flex !important; align-items: center; justify-content:center;}
	.td-subject {width:calc(100% -  60px);}
	.bo-subject a {width:calc(100% -  68px);}
	.td-datetime {width:160px; margin-left:auto; text-align:right; padding-top:0}
	.td-datetime:before {content:'작성일 : ';}
}




/* category tab */
.category {display: flex; justify-content:center; gap: 5px; margin-bottom:clamp(20px, 4vw, 50px);}
.category-btn {padding: 10px 30px; border: 2px solid var(--secondary); border-radius: 60px; background: #fff; color: #000; cursor: pointer; transition: all 0.2s ease; font-weight:500; font-size:clamp(1.6rem, 4vw, 1.9rem);}
.category-btn br {display:none}
.category-btn:hover {background: #f5f5f5;}
.category-btn.active {background: var(--secondary); border-color:  var(--secondary); color: #fff; font-weight: 600;}

@media (max-width: 768px){
	.category-btn {padding: 10px 20px;}
}

@media (max-width: 540px){
	.category-btn {border-radius: 15px;}
	.category-btn br {display:inline-block}
}





/* list category */
.bo-cate {position:relative; display:inline-block; width:78px !important; height:32px; line-height:32px; font-size:16px; font-weight:600; text-align:center; background:#e3e3e3; border-radius:5px; overflow:hidden; z-index:1}
.bo-cate.cate1:before {content:''; position:absolute; left:0; top:0; width:5px; height:100%; background:var(--primary); transition:.2s; z-index:-1}
.bo-cate.cate2:before {content:''; position:absolute; left:0; top:0; width:5px; height:100%; background:var(--secondary); transition:.2s; z-index:-1}

@media (max-width: 768px){
	.bo-cate {width:60px !important; height:29px; line-height:29px; font-size:15px;}
}





/* pagination */
.pagination {display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 30px;}
.pagination a {display: flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border: 1px solid #ddd; border-radius: 5px; text-decoration: none; color: #666; background: #fff; font-size:15px; transition: all .2s;}
.pagination a:hover {border-color: #333; color: #333; background: #f9f9f9;}
.pagination .active {background: #282828; border-color: #282828; color: #fff;  font-weight: 600; cursor: default; }










/***** modal popup *****/
.modal {position: fixed; inset: 0; min-width:330px; background: rgba(0,0,0,0.5); display: flex;  justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 100;}/* 배경 */
.modal.show {opacity: 1; visibility: visible;}/* 모달 활성화 */
.modal .modal-content {position:relative; background: #fff; padding:clamp(40px, 5vw, 60px) clamp(25px, 5vw, 80px) clamp(25px, 5vw, 60px); border-radius:var(--bru30); width: 90%; max-width: 650px; transform: translateY(20px); opacity: 0; transition: all 0.3s ease;}
.modal.show .modal-content {transform: translateY(0); opacity: 1;}/* 열릴 때 */
.modal .close {position:absolute; right:20px; top:30px; cursor: pointer; font-weight:100;}
.modal .close:before {content:'\e5cd'; font-family:'Material Symbols Outlined'; font-size:clamp(4rem, 4vw, 5rem);}
.modal h2 {font-family:var(--osmt); font-size:var(--fs26); text-align:center}

@media (max-width: 1024px){
	.modal .close {right:15px; top:25px;}
}

@media (max-width: 768px){
	.modal .close {right:10px; top:20px;}
}

@media (max-width: 480px){
	.modal .close {right:5px; top:15px;}
}




/***** view *****/
.tbl-view {background: #fff; padding:var(--pd40); border-radius: var(--bru30); border:1px solid #999;}
.tbl-view h3 {font-size:clamp(1.8rem, 4vw, 2.7rem); font-weight:600;}
.notice-info {display: flex; justify-content: space-between; flex-wrap:wrap; border-bottom: 1px solid #bebebe; padding: 20px 0 15px;}
.notice-info div {color: #666; font-size:16px;}
.notice-info div span {color: #ccc; padding:0 10px}
.attachment {padding:15px ; background:#f5f5f5; font-size:16px;}
.attachment a {color: var(--secondary); text-decoration: none; font-size:inherit}
.attachment .file-link {display: inline-flex; align-items: center; margin-right: 15px;}
.attachment .file-link .material-symbols-outlined {font-size: 18px; margin-right: 3px;}
.notice-content {min-height: 300px; line-height: 1.8; padding: 30px 0 0; }

@media (max-width: 768px){
	.notice-info div {font-size:15px;}
	.notice-info div:nth-child(2) {width:100%; padding-top:5px}
	.notice-content {padding: 20px 0 0;}
}







/********** header **********/

/***** 상단 레이아웃 *****/
#hd {position:fixed; top:0; width:100%; min-width:360px; border-bottom:1px solid rgba(0,0,0,.0); z-index:10;}
#hd_wrapper {height:100px; display:flex; align-items:center;  justify-content:space-between; zoom:1;}
h1 {width:398px; height:44px;}
h1 a {display:inline-block; width:100%; height:100%; background:url('/images/dongrang/logo-white.png') no-repeat center top; background-size:100% auto}*/

.header {transition:all ease-in .2s;}
.header.enter {background:#fff; border-bottom:1px solid #ddd !important; transition:all ease-in .2s;}
.header.enter #hd_wrapper h1 a {background: url('/images/dongrang/logo-color.png') no-repeat left top; background-size:100%;}
.header.enter #hd_wrapper #gnb .gnb_wrap > ul > li > a {color:#000;}
.header.enter .mobileMenu {background:url('/images/dongrang/btn-menu-black.png') no-repeat left top;}

.hd-sub #hd_wrapper h1 a {background: url('/theme/basic/img/logo.png') no-repeat left top; background-size:100%;} /* sub에서만 */
.hd-sub #hd_wrapper #gnb .gnb_wrap > ul > li > a {color:#fff;} /* sub에서만 */

.header.hd-sub {background:#fff; border-bottom:1px solid #ddd !important}
.header.hd-sub #hd_wrapper h1 a {background: url('/images/dongrang/logo-color.png') no-repeat left top; background-size:100%;}
.header.hd-sub #hd_wrapper #gnb .gnb_wrap > ul > li > a {color:#000;}
.header.hd-sub .mobileMenu {background:url('/images/dongrang/btn-menu-black.png') no-repeat left top;}


@media (max-width:1500px){
	h1 {width:350px; height:39px;}
}

@media (max-width:1400px){
	h1 {width:330px; height:36px;}
}

@media (max-width:1300px){
	h1 {width:310px; height:34px;}
}

@media (max-width:1200px){
	#hd_wrapper {height:70px;}
}

@media (max-width:400px){
	h1 {width:280px; height:31px;}
}





/***** gnb *****/
#gnb {display:flex; margin-left:auto}
.gnb_wrap > ul {display:flex;}
.gnb_wrap > ul > li {position:relative; padding-left:50px;}
.gnb_wrap > ul > li > a {display:block; font-size:18px; font-weight:500; color:#fff; text-align:center; font-family:'Roboto'; letter-spacing:0; line-height:100px; height:100px; transition:.2s}
.gnb_wrap > ul > li.current > a {color:var(--primary) !important}

.tnb {display:flex; align-items:center; padding-left:50px}
.tnb a {display:inline-block; width:70px; line-height:27px; text-align:center; color:#fff; font-size:15px; font-weight:600; background:var(--primary); border-radius:5px}

@media (max-width:1500px){
	.gnb_wrap > ul > li {padding-left:3vw;}
	.gnb_wrap > ul > li > a {font-size:17px;}
	.tnb {padding-left:4vw}
}

@media (max-width:1400px){
	.gnb_wrap > ul > li {padding-left:2.5vw;}
	.tnb {padding-left:2.5vw}
}

@media (max-width:1300px){
	.gnb_wrap > ul > li {padding-left:2vw;}
	.tnb {padding-left:2vw}
	.gnb_wrap > ul > li > a {font-size:16px;}

}

@media (max-width:1200px){
	.gnb_wrap > ul > li {display:none;}
	.tnb{display:none}
}





/***** mobile gnb *****/
.mobileMenu {position:absolute; right:4vw; top:26px; font-size:14px; color:#000; display:none; z-index:999; cursor:pointer; border:0; background:url('/images/dongrang/btn-menu-white.png') no-repeat left top; font-size:0px; width:26px; height:18px;}

#mySidenav {display:none; height:100%; width:0 ; position: fixed; z-index:999; top:0; right: 0;  background-color:#fff; overflow-x: hidden; transition: 0.3s;}
.sidenav .inbox-full {min-width:340px}
.side-top {display:flex; justify-content:space-between; align-items:center; padding:20px 0;}
.side-top .side-logo {width:280px;}
.side-top .side-logo img {display:block}
.side-top .closebtn {width:19px; height:20px; color:#000;cursor:pointer; line-height:21px; background:url('/images/dongrang/btn-close.png') no-repeat left top;}

.tnb-mo {text-align:center; margin-top:15px}
.tnb-mo a {display:inline-block; width:70px; line-height:27px; text-align:center; color:#fff; font-size:15px; font-weight:600; background:var(--primary); border-radius:5px}
.tnb-mo a:hover {box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.1);}

#tnb-mo {display:none}
.d-schedule	{display: block; width:100%; margin:25px auto; }
.d-schedule > li > a {display:block; font-size:19px; color:#000; font-weight:500;padding:20px 0; border-bottom:1px solid #f0f0f0; transition:.2s}
.d-schedule > li > a:hover{color:var(--primary); font-weight:500}

@media (max-width:1200px){
	#mySidenav {display:block;}
	.mobileMenu {display:inline-block;}
	.sidenav {display:block;}
}







/********** 중간 레이아웃 **********/
#container {position:relative; min-height:500px; padding-bottom:var(--pdB90)}






/********** footer **********/
footer {position:relative; display:flex; flex-wrap:wrap; padding-top:35px !important; padding-bottom:35px !important; border-top:1px solid #e2e2e2; background:#212123; z-index:1; }
footer .ft-info {padding-left:50px;}
footer .ft-info li {font-size:clamp(1.5rem, 4vw, 1.6rem); padding-bottom:20px;}
footer .ft-info li span {display:inline-block; font-size:inherit; margin-right:30px; color:#fff}
footer .ft-info li.info-adress span {display:block}
footer .ft-info li.info-adress span:nth-child(2) {margin-top:7px; letter-spacing:0}
footer .ft-info li:last-child span {letter-spacing:0}
footer .ft-link {margin-left:auto}
footer .ft-link a {display:inline-block; border-radius:60px; background:#5d5e5e; color:#fff; font-weight:500; font-size:16px; padding:5px 15px}

@media (max-width:1024px){
	footer .ft-info {width:100%; padding-left:0; margin-top:20px}
	footer .ft-link {margin-left:0; margin-top:10px}
}







/********** main **********/
#main .inbox-max {padding-top:var(--pdT90); padding-bottom:var(--pdB90)}




/***** main visual *****/
.swiper {width: 100%;}
.swiper-slide {width: 1920px; height: auto; text-align: center;  font-size: 18px; display: flex; justify-content: center;}
.swiper-slide img {display: block; width: 1920px; height: 449px; object-fit: cover;}

.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {bottom: 40px !important;}
.swiper-pagination-bullet {background: #fff !important; opacity:.5 !important;}
.swiper-pagination-bullet-active {background: #c4161c !important; opacity:1 !important;}
.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets {
    .swiper-pagination-bullet {margin: 0 10px !important;}
}

@media (max-width:1400px){
	.swiper-slide img {width:100%; height: 32vw}
	.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction {bottom: 2vw !important;}
}

@media (max-width:1024px){
	.swiper-slide img {height: 44vw; min-height:220px}
	.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets {
		.swiper-pagination-bullet {margin: 0 5px !important;}
	}
}




/***** main banner *****/
.main-banner {display:flex; justify-content:space-between; flex-wrap:wrap}
.main-banner > div {position:relative; display:flex; width:46.5%; border-radius:var(--bru30); overflow:hidden;  transition:.2s; bottom:0}
.main-banner > div a {display:flex; align-items:center; width:100%}
.main-banner > div a .icon {display:flex; align-items:center; justify-content:center; width:clamp(130px, 15vw, 210px);  height:100%}
.main-banner > div a .icon img {width:clamp(50px, 5vw, 74px);  height:auto}
.main-banner > div a .text {width:57%; padding:clamp(20px, 3vw, 35px)}
.main-banner > div a .text h3 {font-family:var(--osmt); font-size:var(--fs45);}
.main-banner > div a .text p {font-size:20px; font-weight:600; margin-top:10px}
.main-banner > div a .material-symbols-outlined {font-size:clamp(40px, 6vw, 75px); font-weight:100; color:#d7d7d7; text-align:center;  transition:.2s;}
.main-banner > div:hover {box-shadow:10px 10px 15px rgba(0,0,0,.1); bottom:10px}

.main-banner > div.main-festival {border:1px solid var(--primary);}
.main-banner > div.main-festival a .icon {background:url('/images/dongrang/main-banner-bg1.jpg') no-repeat right -1px top 0 var(--primary); background-size:19% 100%;}
.main-banner > div.main-festival a .text {padding-right:0}
.main-banner > div.main-festival a .material-symbols-outlined {margin:0 clamp(1px, 5vw, 20px) 0 0; margin-left:auto;}
.main-banner > div.main-festival:hover a .material-symbols-outlined {color:var(--primary)}

.main-banner > div.main-camp {border:1px solid var(--third)}
.main-banner > div.main-camp a {justify-content:flex-end}
.main-banner > div.main-camp a .text {text-align:right; padding-left:0}
.main-banner > div.main-camp a .icon {background:url('/images/dongrang/main-banner-bg2.jpg') no-repeat left -1px top 0 var(--third); background-size:19% 100%}
.main-banner > div.main-camp a .material-symbols-outlined {margin:0 0 0 clamp(1px, 5vw, 20px); margin-right:auto; }
.main-banner > div.main-camp:hover a .material-symbols-outlined {color:var(--third)}

@media (max-width:1200px){
	.main-banner > div {width:48%;}
	.main-banner > div a .text p {font-size:19px;}
}

@media (max-width:1024px){
	.main-banner > div a .text p {font-size:18px;}
}

@media (max-width:900px){
	.main-banner > div a .material-symbols-outlined {margin:0 !important; }
}

@media (max-width:768px){
	.main-banner > div {width:100%;}
	.main-banner > div a .text {width:70%;}
	.main-banner > div a .text br {display:none}
	.main-banner > div a .text p {font-size:17px;}
	.main-banner > div:hover {box-shadow:10px 10px 10px rgba(0,0,0,.0); bottom:0}
	.main-banner > div.main-festival {margin-bottom:10px}
}

@media (max-width:540px){
	.main-banner > div a .text br {display:inline-block}
}

@media (max-width:480px){
	.main-banner > div a .text p {font-size:16px;}
}




/***** main notice *****/
.main-community {display:flex; justify-content:space-between; flex-wrap:wrap; margin-top:var(--mgT80)}

.main-notice {width:46.5%;}
.main-notice .title {display:flex; justify-content:space-between; align-items:center; margin-bottom:25px}
.main-notice h3 {font-family:var(--osmt); font-size:var(--fs35);}
.main-notice .btn-all {display:flex; align-items:center; justify-content:center; width:96px; height:34px; line-height:34px; font-size:16px; border:1px solid #c9c9c9; background:#f0f0f0; border-radius:10px; text-align:center; padding-left:9px; transition:.2s}
.main-notice .btn-all .material-symbols-outlined {font-size:28px; font-weight:200; color:#1f1f1f; vertical-align:middle}
.main-notice .btn-all:hover {color:#000; border:1px solid #000; background:#fff;}

.main-notice .list li {display:flex; align-items:center; margin-top:15px}
.main-notice .list li > a {display:flex; align-items:center; width:calc(100% - 90px);}
.main-notice .list li > a div {width:calc(100% - 78px); padding-left:10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.main-notice .list li > span {width:90px; margin-left:auto; text-align:right; color:#666}
.main-notice .list li > a:hover .bo-cate {color:#fff !important; background:none;}
.main-notice .list li > a:hover .cate1:before {width:100%;}
.main-notice .list li > a:hover .cate2:before {width:100%;}

@media (max-width:1200px){
	.main-notice {width:48%;}
}

@media (max-width:1024px){
	.main-notice .btn-all {width:90px; height:32px; line-height:30px; font-size:15px;}
	.main-notice .btn-all .material-symbols-outlined {font-size:24px;}
	.main-notice .list li {margin-top:10px}
	.main-notice .list li > a span {width:60px;  font-size:15px;}
	.main-notice .list li > a div {width:calc(100% - 60px);}
}

@media (max-width:768px){
	.main-notice {width:100%;}
	.main-notice .title {margin-bottom:15px}
}

@media (max-width:480px){
	.main-notice .title {margin-bottom:10px}
}





/***** main contact *****/
.main-contact {width:46.5%; display:flex; justify-content:space-between; flex-wrap:wrap;}
.main-contact > div {width:48%; border-radius:var(--bru20);  overflow:hidden;}
.main-contact > div a {display:block; width:100%; height:100%; padding:45px}
.main-contact > div a h3 {font-family:var(--osmt); font-size:var(--fs35); color:#fff}
.main-contact > div a p {font-size:16px; color:rgba(255,255,255,.85); font-weight:500; margin-top:10px}
.main-contact > div a .btn-go {display:flex; align-items:center; justify-content:center; width:96px; height:34px; line-height:34px; font-size:16px; color:#fff; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.2); border-radius:10px; text-align:center; padding-left:9px; transition:.2s; margin-top:15px}
.main-contact > div a .btn-go .material-symbols-outlined {font-size:28px; font-weight:300; color:#fff;  font-weight:200; vertical-align:middle}
.main-contact > div a:hover .btn-go {border:1px solid rgba(255,255,255,1); background:rgba(255,255,255,.0);}
.main-contact > div.main-qna {background:url('/images/dongrang/main-qna-img01.jpg') no-repeat right bottom; background-size:cover; }
.main-contact > div.main-faq {background:url('/images/dongrang/main-faq-img01.jpg') no-repeat right bottom; background-size:cover; }

@media (max-width:1300px){
	.main-contact > div a {padding:3vw}
}

@media (max-width:1024px){
	.main-contact {width:48%;}
	.main-contact > div {width:49%;}
}

@media (max-width:768px){
	.main-contact {width:100%; margin-top:var(--mgT80)}
	.main-contact > div a {padding:30px}
}

@media (max-width:480px){
	.main-contact > div a {padding:20px}
	.main-contact > div a p {font-size:15px;}
}









/********** sub common**********/

/***** snb *****/
.snb-wrap { margin-bottom:var(--pdB70)}
.snb-wrap ul { height:100%}
.snb-wrap ul li {display:none; height:230px;}
.snb-wrap ul li.on {display:flex; flex-direction:column; justify-content:flex-end;  text-align:center;}
.snb-wrap ul li h2 {font-family:var(--scd); color:#000; font-weight:900; font-size:var(--fs54);}
.snb-wrap ul li p {font-size:var(--fs21); font-weight:500; margin-top:15px; color:#555}
.snb-wrap ul li p br {display:none}
.snb-wrap.snb1 ul li {height:270px;}
.snb-wrap.snb2 ul li {height:230px;}

@media (max-width:1024px){
	.snb-wrap ul li p {margin-top:10px}
	.snb-wrap.snb1 ul li {height:200px;}
	.snb-wrap.snb2 ul li {height:170px;}
}

@media (max-width:768px){
	.snb-wrap.snb1 ul li {height:190px;}
	.snb-wrap.snb2 ul li {height:160px;}
}

@media (max-width:640px){
	.snb-wrap ul li p br {display:inline-block}
}

@media (max-width:480px){
	.snb-wrap.snb1 ul li {height:180px;}
	.snb-wrap.snb2 ul li {height:150px;}
}





/********** 동랑예술제 **********/
#festival  h3 {font-family:var(--osmt); font-size:var(--fs35); line-height:100%;}
#festival .con {margin-top:var(--mgT40)}
#festival .top {display:flex; justify-content:space-between; flex-wrap:wrap;}
#festival .top .text {width:calc(100% - 407px); padding-right:10px;}
#festival .top .text li {font-size:var(--fs18); line-height:170%}
#festival .top .text li strong {font-weight:700;}
#festival .top .text li:nth-child(1) {font-size:var(--fs26); line-height:170%; font-weight:500;}
#festival .top .text li:nth-child(2) {margin-top:30px}
#festival .top .img {width:407px; height:356px; border-radius:var(--bru30); overflow:hidden }
#festival .top .img img {display:block; width:100%; height:100%; object-fit:cover}

.regist-wrap {background:#f6f6f6; border-radius:var(--bru30); margin-top:var(--mgT90); padding:clamp(25px, 5vw, 50px)}
.regist-wrap h4 {font-family:var(--osmt); font-size:var(--fs32); text-align:center}
.regist-wrap .text {display:flex; flex-wrap:wrap; gap: 10px ; max-width:650px; width:100%; margin:0 auto; margin-top:clamp(20px, 5vw, 50px);}
.regist-wrap .text dl {display:flex; flex-wrap:wrap; align-items:center; width:100%}
.regist-wrap .text dl:nth-of-type(odd) {width:100%}
.regist-wrap .text dl dt {display:inline-block; width:90px; border-radius:60px; background:#676767; text-align:center; color:#fff; line-height:35px; font-weight:500;}
.regist-wrap .text dl dd {width:calc(100% - 90px); padding-left:10px; font-weight:500;}
.regist-wrap .text a {margin:20px auto 0; width:100%;}

.regist-wrap.festival .text {max-width:550px;}
.regist-wrap.festival .text dl {width:100%}
.regist-wrap.festival .text dl:nth-of-type(odd) {width:100%}

#festival .btn-center {margin-top:clamp(20px, 5vw, 40px)}

@media (max-width:1400px){
	#festival .top .text {padding-right:25px;}
	#festival .top .text li br {display:none}
}

@media (max-width:1024px){
	#festival .top .text {width:100%; padding-right:0;}
	#festival .top .text li:nth-child(2) {margin-top:3vw}
	#festival .top .img {max-width:407px; width:100%; margin:4vw auto 0; }
}

@media (max-width:768px){
	.regist-wrap .text {gap: 5px ;}
	.regist-wrap .text dl {width:100%;}
	.regist-wrap .text dl:nth-of-type(odd) {width:100%;}
}

@media (max-width:580px){
	.regist-wrap.festival .text dl {width:100% !important}
}

@media (max-width:480px){
	.regist-wrap .btn-center .big {width:100%;}
}






/********** 동랑캠프 **********/
#camp  h3 {font-family:var(--osmt); font-size:var(--fs35); line-height:100%;}
#camp .con {margin-top:var(--mgT40)}
#camp .top .img {width:100%; height:394px; border-radius:var(--bru30); overflow:hidden }
#camp .top .img img {display:block; width:100%; height:100%; object-fit:cover}

#camp .top .text {margin-top:var(--mgT60)}
#camp .top .text li {font-size:var(--fs18); line-height:170%}
#camp .top .text li strong {font-weight:700;}
#camp .top .text li:nth-child(1) {font-size:var(--fs26); line-height:170%; font-weight:500;}
#camp .top .text li:nth-child(2) {margin-top:30px}

#camp .btn-center {margin-top:clamp(20px, 5vw, 40px)}

@media (max-width:1200px){
	#camp .top .text li:nth-child(1) br {display:none}
}

@media (max-width:1024px){
	#camp .top .img {height:39vw; min-height:250px}
}

@media (max-width:768px){
	.regist-wrap .text {gap: 5px ;}
	.regist-wrap .text dl {width:100%;}
	.regist-wrap .text dl:nth-of-type(odd) {width:100%;}
}

@media (max-width:480px){
	.regist-wrap .btn-center .big {width:100%;}
}







/********** 참가신청 **********/

/***** 스텝 *****/
.step {display:flex; justify-content:center; width:100%; margin:0 auto;}
.step dl {position:relative; width:180px; text-align:center;}
.step dl:before{content:''; position:absolute; left:0; top:24px; width:100%; height:1px; background:#dcdcdc; z-index:-1}
.step dl:first-child:before{left:50%;}
.step dl:last-child:before{left:auto; right:50%;}
.step dl dt {display:flex; justify-content:center; align-items:center; width:48px; height:48px; border-radius:100%; background:#e6e6e6; font-family:var(--scd); color:#7d7d7c; font-weight:700; font-size:var(--fs18); margin:0 auto;}
.step dl dd {font-family:var(--osmt); font-size:var(--fs20); color:#666; text-align:center; margin-top:20px}
.step dl dd br {display:none}
.step dl.on dt {background:var(--primary); color:#fff;}
.step dl.on dd {color:#000;}
.step dl.completed dt {position:relative;background:#5d5d5d; color:#5d5d5d;}
.step dl.completed dt:after {position:absolute; content:'\e5ca'; font-family:'Material Symbols Outlined';  color:#fff; font-size:26px;}

.step dl.completed dd {color:#000;}

@media (max-width:768px){
	.step dl:before {top:20px;}
	.step dl dt {width:40px; height:40px;}
	.step dl dd {margin-top:15px}
}

@media (max-width:480px){
	.step dl dt {width:35px; height:35px;}
	.step dl dd {margin-top:10px}
	.step dl dd br {display:inline-block}
}



/***** 개인정보동의 *****/
#registration h3 {margin-top:var(--mgT60); margin-bottom:20px; font-size:var(--fs26); font-family:var(--osmt)}
#registration .box1 h4 {font-size:var(--fs20); font-family:var(--osmt)}
#registration .box1 > p {font-size:var(--fs18); line-height:160%; margin-top:20px}
#registration .box1 > div p:nth-child(1) {margin-top:20px; font-weight:500;}
#registration .box1 > div p:nth-child(2) {margin-top:10px; line-height:160%}
#registration .box1 table {margin-top:20px}

#registration .agree {margin-top:30px}
#registration .agree div {display:block}
#registration .agree div:nth-child(-n + 3) {margin-top:20px}

#registration .btn-center {margin-top:var(--mgT60)}

@media (max-width:768px){
	#registration h3 {margin-bottom:15px}
}

@media (max-width:480px){
	#registration h3 {margin-bottom:10px}
}



/***** 모달-본인확인 *****/
.identity .modal-content {width: 90%; max-width: 670px; }
.identity .type {margin-top:var(--mgT40)}
.identity .type a {display:flex; border-radius:var(--bru20); background:#f6f6f6; border:1px solid #e1e1e1; padding:clamp(20px, 5vw, 30px)}
.identity .type a:nth-child(1) {margin-bottom:10px}
.identity .type a div:nth-child(1) {width:28px;}
.identity .type a div:nth-child(2) {width:calc(100% - 28px);}
.identity .type a div:nth-child(2) p:nth-child(1) {font-size:var(--fs20); font-weight:600; line-height:100%; margin-bottom:15px}


/***** 모달-학교검색 *****/
.school-result {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
}
.school-result .empty-text {
    padding: 30px;
    text-align: center;
    color: #888;
}
.school-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}
.school-item:last-child {
    border-bottom: none;
}
.school-item:hover {
    background: #f6f6f6;
}
.school-item strong {
    font-weight: 600;
    margin-right: 10px;
}
.school-item .region {
    font-size: 1.4rem;
    color: #888;
}


#registration .fs45 {font-family:var(--osmt); text-align:center;}
.fs35 {font-family:var(--osmt); text-align:center;}
.box2 > h4 {padding:clamp(1.5rem, 5vw, 2rem) clamp(2rem, 5vw, 4.5rem) ; background:#f2f2f2}
.box2 > div {padding:clamp(2rem, 5vw, 3rem) clamp(2rem, 5vw, 4.5rem) ; }
#registration .guide1 {text-align:center; font-weight:500; font-size:var(--fs18); line-height:150%}
.btn-titlein {margin-left:auto}

@media (max-width: 1024px){
	.tbl-div.col4 > div {width:48.667%}
}

@media (max-width:640px){
	.box2 .title-icon {flex-wrap:wrap}
	.btn-titlein {width:100%; margin-top:15px}
	.btn-titlein .btn {letter-spacing:-1.5px}
}

@media (max-width:480px){
	.btn-titlein .btn-rdu {padding:0 10px !important}
}



/***** 참가자 정보 *****/
.participant {display:flex; flex-direction:column; gap:10px;}
.participant li {display:flex; flex-wrap:wrap; border-radius:10px; background:#f9f9f9; overfow:hidden; padding:clamp(15px, 4vw, 20px); gap:20px}
.participant li label {min-width:120px; width:auto; font-weight:600;}
.participant li label .rep {padding:4px 13px; border-radius:60px; background:var(--third); line-height:26px; height:26px; color:#fff; font-size:15px; font-weight:500; margin-left:10px}
.participant li > div:nth-child(2) {display:flex; flex-wrap:wrap; gap:20px}
.participant li > div:nth-child(2) span {color:#444;}
.participant li > div:nth-child(3) {margin-left:auto}

@media (max-width: 1024px){
	.participant li {gap:0}
	.participant li > label {width:100%}
	.participant li > div {width:100%; margin-top:10px}
	.participant li > div:nth-child(3) {text-align:right}
}

@media (max-width: 768px){
	.participant li > div:nth-child(2) {gap:10px; margin-top:20px}
	.participant li > div:nth-child(2) span {width:calc(50% - 10px);}
	.participant li > div:nth-child(2) span:nth-child(2n+1) {width:calc(70% - 10px);}
	.participant li > div:nth-child(2) span:nth-child(2n) {width:30%}
}







/***** 신청완료 *****/

/* 접수번호 */
.receipt {border-radius:var(--bru30); background:#ecf3fc; padding:var(--pd40); text-align:center; margin-top:var(--mgT40)}
.receipt .text {font-size:var(--fs18); color:var(--primary); font-weight:600;}
.receipt .text br {display:none}
.receipt .number {font-family:var(--osmt); font-size:var(--fs26); margin-top:20px}
.status {display:inline-block; border-radius:60px; background:var(--secondary); line-height:40px; padding:0 25px; color:#fff; font-weight:500;}
.receipt .status {margin-top:20px}

@media (max-width: 500px){
	.receipt .text {line-height:150%}
	.receipt .text br {display:inline-block;}
	.receipt .number {margin-top:15px}
	.receipt .status {margin-top:15px}
}



/* 참가정보 */
.tbl1 table {border:0} 
.tbl1 table th,
.tbl1 table td {border:0; border-bottom:1px solid #e5e5e5; font-size:var(--fs18)} 
.tbl1 table th {width:120px; text-align:left; font-weight:600;}
.tbl1 table td {border:0; border-bottom:1px solid #e5e5e5; font-weight:500; text-align:left;} 
.tbl1 table tr:last-of-type th,
.tbl1 table tr:last-of-type td {border-bottom:0;} 



/* 참가자 명단 */
.registration-step3 .participant li {}

@media (max-width: 1024px){
	.registration-step3 .participant li > label {width:160px}
	.registration-step3 .participant li > div {width:calc(100% - 160px); margin-top:0}
}

@media (max-width: 500px){
	.registration-step3 .participant li > label {width:100%}
	.registration-step3 .participant li > div {width:100%; margin-top:10px}
}





/***** 신청관리 *****/
.management .top {display:flex; justify-content:space-between; align-items:center;}
.management .top .fs38 {text-align:left !important; font-family:var(--osmt);}

.receipt2 {border-radius:var(--bru30); background:#ecf3fc; padding:	clamp(10px, 5vw, 20px) clamp(20px, 5vw, 40px); text-align:center; margin-top:var(--mgT40)}
.receipt2 ul {display:flex; align-items:center; flex-wrap:wrap}
.receipt2 ul li {font-weight:500;}
.receipt2 .number {font-size:var(--fs18); padding-right:40px;}
.receipt2 .number span {font-weight:600;}
.receipt2 .status {line-height:30px; padding:0 20px;}

@media (max-width: 640px){
	.receipt2 ul li {width:100% !important; text-align:left}
	.receipt2 .status {margin-top:10px; padding:0 15px;}
}






/***** 결제하기 *****/
.payment h3 {margin-top:0 !important}
.payment .btn-center a {font-weight:bold;}
.payment .btn-center a span {font-family:'Malgun Gothic'; color:#fff; font-weight:bold; margin-right:5px}
.payment-agree {text-align:center; margin-top:20px; color:#666; font-weight:400; line-height:150%}
.payment-agree br {display:none}
.payment-agree a {text-decoration:underline; color:#0000ff; font-weight:400;}

@media (max-width: 768px){
	.payment-agree br {display:inline-block}
}

@media (max-width: 480px){
	.payment .btn-center a {width:100% !important}
}





/***** 결제완료 *****/
.completed .top {text-align:center; margin-bottom:var(--mgB50)}
.completed .top .material-symbols-outlined {font-variation-settings: 'FILL' 1; font-size:clamp(40px, 5vw, 50px); color:var(--secondary); margin-right:10px; font-weight:600;}
.completed .top ul {margin-top:var(--mgT20)}
.completed .top ul li {font-size:var(--fs21); margin-top:15px}
.completed .top ul li:nth-child(1) {display:flex; justify-content:center; align-items:center;  font-family:var(--osmt); font-size:var(--fs38);}
.completed .top ul li:nth-child(2) {margin-top:var(--mgT30)}
.completed .top ul li:nth-child(2) br {display:none}
.completed .top ul li:nth-child(3) {font-size:var(--fs26);}
.completed .top ul li:nth-child(3) strong {color:var(--primary); font-weight:900 !important;}
.completed .top ul li:nth-child(4) span {display:inline-block; border-radius:60px; background:#f2f2f2; padding:8px 30px}

@media (max-width: 480px){
	.completed .top ul li:nth-child(2) {line-height:150%}
	.completed .top ul li:nth-child(2) br {display:inline-block;}
}









/********** 공지사항 **********/
#notice .btn-center {margin-top:20px}




/********** FAQ **********/
.faq-container {padding:var(--pd40); border-radius: var(--bru30); border:1px solid #999;}
.faq-item {border-bottom: 1px dotted #ccc;}
.faq-container > div:last-child {border-bottom: 0;}
.faq-item .question {position:relative; padding: 18px 0 18px 40px; cursor: pointer; font-size:clamp(1.6rem, 4vw, 1.9rem); font-weight: 500; display: flex; justify-content: space-between; align-items: center; transition: 0.3s; color:#444}
.faq-item .question:before {position:absolute; left:0; content:'Q'; font-size:var(--fs18); font-weight:800; color:#fff !important; background:#444; border-radius:100%; width:32px; height:32px; text-align:center; line-height:32px;}
.faq-item .question:hover,
.faq-item.active .question {color:#000}
.faq-item.active .question:before  {background:#000}
.faq-icon {transition: transform 0.3s ease; font-size:35px; font-weight:300; color:#666; margin-left:5px}
.faq-item.active .faq-icon {transform: rotate(180deg);}
.answer {max-height: 0; overflow: hidden; transition: 0.4s; background: #f6f6f6; border-radius:10px 10px 0 0 }
.faq-item .answer-content {position:relative; color: #444; padding: 20px 20px 20px 60px; line-height: 140%;}
.faq-item .answer-content:before {position:absolute; left:20px; top:17px; content:'A'; font-size:var(--fs18); font-weight:800; color:#fff !important; background:#b1b1b1; border-radius:100%; width:32px; height:32px; text-align:center; line-height:32px;}

@media (max-width: 768px){
	.faq-container {padding:3vw 5vw;}
	.question {padding: 15px 0 15px 35px;}
}

@media (max-width: 480px){
	.question:before {width:29px; height:29px; line-height:29px;}
	.faq-icon {font-size:30px}
}




/********** 질의응답 **********/

/***** 질의응답 list *****/
.qna-item {padding:30px 20px; border-radius: var(--bru20); border:1px solid #999; margin-top:15px}
.qna-item .question {padding:0; cursor: pointer; font-size:clamp(1.6rem, 4vw, 1.9rem); font-weight: 500;  transition: 0.3s; color:#444;}
.qna-item .question .row1 {display: flex; align-items:center}
.qna-item .question .row1 .num {display:inline-block; width:50px; padding:5px 10px 0 0; text-align:center; flex-shrink: 0;}
.qna-item .question .row1 .con {display: flex; align-items: center;}
.qna-item .question .row1 .con .qna-cate {width:68px; border-radius:60px; color:#fff; font-weight:600; font-size:15px; text-align:center; padding:3px 15px}
.qna-item .question .row1 .con .qna-cate.cate1 {background:var(--primary);}
.qna-item .question .row1 .con .qna-cate.cate2 {background:var(--secondary);}
.qna-item .question .row1 .con .txt {padding:0 0 0 10px; line-height:140%; font-weight:500;}
.qna-item .question .row1 .con .txt .icon-lock {font-size:19px; vertical-align:middle}
.qna-item .question .row1 .qna-btn {width:110px; margin-left:auto; text-align:left; flex-shrink: 0;}

.qna-item .question .row2 {display: flex; align-items: center; margin-top:20px; padding-left:50px}
.qna-item .question .row2 .qna-info {color:#666; font-size:16px;}
.qna-item .question .row2 .qna-info span {display: inline-block; padding:0 15px; color:#ccc; font-size:inherit;}
.qna-item .question .row2 .faq-icon {display:inline-block; transition: transform 0.3s ease; font-size:35px; font-weight:300; color:#666; margin-left:auto}
.qna-item.active .question .row2 .faq-icon {transform: rotate(180deg);}

.qna-item .answer {max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: #f6f6f6; border-radius:10px}
.qna-item .answer-content {display: flex; align-items:flex-start; padding: 20px; color: #444; line-height: 140%;}
.qna-item .answer-content .answer-title {width:40px; border-radius:5px; background:#282828; padding:5px 7px; font-size:15px; color:#fff; margin-right:5px; line-height:100%; flex-shrink: 0;}
.qna-item .answer-content .answer-text {padding-left:5px; line-height:130%}

@media (max-width: 1024px){
.qna-item {padding:20px }
.qna-item .question .row1 .con .txt {font-size:16px;}
}

@media (max-width: 768px){
	.qna-item .question .row1 {flex-wrap:wrap; align-items:flex-start}
	.qna-item .question .row1 .num {width:40px;}
	.qna-item .question .row1 .con {flex-wrap:wrap; width:calc(100% - 40px)}
	.qna-item .question .row1 .con .txt {width:100%; padding:10px 0 0 0}
	.qna-item .question .row1 .qna-btn {width:100%; margin-top:10px; text-align:right}
	.qna-item .question .row2 {padding-left:40px}
	.qna-item .question .row2 .qna-info span {padding:0 10px;}
}

@media (max-width: 480px){
	.qna-item .question .row2 .faq-icon {font-size:30px;}
	.qna-item .question .row2 .qna-info {font-size:15px;}
	.qna-item .question .row2 .qna-info span {padding:0 5px;}
}




/***** 질의응답 write *****/
#qna .box2 {margin-top:15px}
#qna .btn-center {margin-top:20px}

/* 캡챠 */
.captcha-wrap {display:flex; gap:5px}
.captcha-image {display:flex; width:165px; gap:3px}
.captcha-image img {height:45px; border:1px solid #ddd; border-radius:5px}
.btn-refresh {width:45px; height:45px; font-size:0px !important; padding:0; background:url('/images/dongrang/icon-refresh.png') no-repeat center center #444; cursor:pointer}
.captcha-wrap input {width:200px !important; }

@media (max-width:1024px){
	.captcha-image {width:147px;}
	.captcha-image img {height:40px;}
	.btn-refresh {width:40px; height:40px;}
}

@media (max-width:480px){
	.captcha-wrap {width:100%;}
	.captcha-wrap input {width:calc(100% - 147px) !important; }
}


/***** 오류 페이지 *****/
.error-page {
	max-width: 500px;
	margin: 60px auto;
	text-align: center;
	padding: 0 20px;
}

.error-page .error-icon {
	width: 100px;
	height: 100px;
	margin: 0 auto 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fef2f2;
	border-radius: 50%;
}

.error-page .error-icon svg {
	width: 48px;
	height: 48px;
	color: #c4161c;
}

.error-page .error-title {
	width: 100%;
	font-size: 22px;
	font-weight: 700;
	color: #111;
	margin-bottom: 12px;
	line-height: 1.4;
}

.error-page .error-message {
	font-size: 15px;
	color: #6b7280;
	margin-bottom: 32px;
	line-height: 1.7;
}

.error-page .btn-center {
	gap: 10px;
}

.error-page .error-detail {
	margin-top: 40px;
	text-align: left;
}

.error-page .error-detail details {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 16px;
}

.error-page .error-detail summary {
	cursor: pointer;
	font-size: 13px;
	color: #6b7280;
}

.error-page .error-detail pre {
	font-size: 12px;
	color: #991b1b;
	margin-top: 12px;
	white-space: pre-wrap;
	word-break: break-all;
}

@media (max-width: 480px) {
	.error-page {
		margin: 40px auto;
	}
	.error-page .error-icon {
		width: 80px;
		height: 80px;
	}
	.error-page .error-icon svg {
		width: 40px;
		height: 40px;
	}
	.error-page .error-title {
		font-size: 18px;
	}
	.error-page .error-message {
		font-size: 14px;
	}
	.error-page .btn-center {
		flex-direction: column;
	}
	.error-page .btn-center .btn {
		width: 100%;
	}
}


















/********** 로그인 **********/
.login-title {font-size:var(--fs26); text-align:center; line-height:150%;}
.form-login {display:flex; flex-direction: column; gap:0.5rem; max-width:520px; margin:0 auto; margin-top:30px; padding:clamp(30px, 5vw, 50px) clamp(40px, 5vw, 70px); border-radius:var(--bru30); border:1px solid #d2d2d2}
.form-login .form-input:focus {outline: none; border:1px solid var(--primary);}
.form-login label:nth-of-type(2) {margin-top:20px}
.form-login a:nth-of-type(1) {margin-top:20px}

@media (max-width:768px){
}

@media (max-width:568px){
}





/********** 비밀번호 찾기 **********/
#find {position:relative;}
#find .login-title {font-size:var(--fs23);}
#find .form-login label:nth-of-type(3) {margin-top:20px}