@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* 게시판 */
#board { margin-top: 20px; }
#board .board_head { display: flex; justify-content: space-between; align-items: center; padding-bottom:20px; }
#board .board_head .side { display:flex; align-items:center; gap:8px; }

#board .board_head .search { display:flex; justify-content:space-between; align-items:center; gap:6px; }
#board .board_head .search .select { width:130px; height:46px; padding-left: 12px; font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 46px; color:#888888; letter-spacing:-0.5px; border-radius:4px; border:1px solid #D9D9D9; background-color:#F8F9FB; }
#board .board_head .search .input { width:200px; height:46px; padding: 0 12px; font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 46px; color:#888888; letter-spacing:-0.5px; border-radius:4px; border:1px solid #D9D9D9; background-color:#F8F9FB; }

#board .board_list { display: flex; flex-direction: column; border-top:1px solid #DBDBDB; }
#board .board_list .row_item { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 40px; padding:20px 0 20px; border-bottom:1px solid #DBDBDB; }
#board .board_list .row_item .col_item { display: flex; align-items: center; gap: 40px; }
#board .board_list .row_item .thumb { width:220px; line-height: 0; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; }
#board .board_list .row_item .thumb img { -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; }
#board .board_list .row_item .title { width:auto; font-family: 'Pretendard'; font-weight: 700; font-size:24px; line-height: 150%; color:#202020; letter-spacing:-0.5px; word-break: keep-all; }
#board .board_list .row_item .title a,
#board .board_list .row_item .title a:hover { display:block; font-family: 'Pretendard'; font-weight: 700; font-size:24px; line-height: 150%; color:#202020; letter-spacing:-0.5px; word-break: keep-all; }
#board .board_list .row_item .date { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 8px; width:200px; border-left:1px solid #DBDBDB; }
#board .board_list .row_item .date .date_row1 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 400; font-size:18px; line-height: 100%; color:#666666; letter-spacing:0; text-align:center; }
#board .board_list .row_item .date .date_row2 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size:44px; line-height: 100%; color:#666666; letter-spacing:0; text-align:center; }


.board_btn { flex-shrink:0; }
.board_btn a,
.board_btn a:hover { display:flex; justify-content: center; align-items: center; gap:4px; height: 46px; padding:0 24px; font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 100%; color:#ffffff; letter-spacing:0; text-align:center; background-color:#1E2535; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }

.board_btn.blue a,
.board_btn.blue a:hover { background-color:#1D5CEE; }



/* 게시판 - 보기 */
#board > .view { }
#board > .view .subject { position: relative; margin: 0 0 20px; font-family: 'Pretendard'; font-weight: 700; font-size:28px; line-height: 150%; color:#202020; letter-spacing:-0.5px; }
#board > .view .subject .info { position: absolute; right: 0; top: 20px; }
#board > .view .subject .info ul { margin: 0; padding: 0; }
#board > .view .subject .info li { position: relative; list-style: none; float: left; margin-left: 5px; font-family: 'Pretendard'; font-weight: 400; font-size:14px; line-height: 140%; color:#5F5F5F; letter-spacing:0; }
#board > .view .subject .info li:before { content: "/ "; font-size: 15px; line-height: 28px; color: #bbbbbb; }
#board > .view .subject .info li:first-child { margin: 0; }
#board > .view .subject .info li:first-child:before { display: none; }
#board > .view .subject .info:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */}

#board > .view .option { border-top: 2px solid #000000; } 
#board > .view .option ul { margin: 0; padding: 0; }
#board > .view .option li { list-style: none; padding: 16px 0; border-bottom: 1px solid #D9D9D9; font-size: 0; }
#board > .view .option .col { display: inline-block; vertical-align: middle; position: relative; width: 50%; }
#board > .view .option .col .title { position: absolute; left: 30px; top: 0; padding-left: 28px; font-family: 'Pretendard'; font-weight: 500; font-size:16px; line-height: 150%; color:#1D1A1A; letter-spacing:-0.5px; }
#board > .view .option .col .title:after { content: ""; position: absolute; width: 12px; height: 9px; left: 0; top: 50%; margin-top: -5px; background: url("../images/board/dot.png") no-repeat; }
#board > .view .option .col .info { margin: 0 0 0 165px; font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 150%; color:#5F5F5F; letter-spacing:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
#board > .view .option:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */}

#board > .view .content { margin: 40px 20px 80px; font-family: 'Pretendard'; font-weight: 300; font-size:18px; line-height: 150%; color:#666666; letter-spacing:-0.5px; } 

#board > .view .file_add { margin: 0 0 20px; padding: 30px; background-color: #f2f2f2; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
#board > .view .file_add .title { position: relative; padding-left: 28px; font-family: 'Pretendard'; font-weight: 500; font-size:16px; line-height: 150%; color:#1D1A1A; letter-spacing:-0.5px; }
#board > .view .file_add .title:after { content: ""; position: absolute; width: 12px; height: 9px; left: 0; top: 50%; margin-top: -5px; background: url("../images/board/dot.png") no-repeat; }
#board > .view .file_add .list { margin: 0 28px; }
#board > .view .file_add .list ul { margin: 0; padding: 0; }
#board > .view .file_add .list li { list-style: none; margin: 10px 0 0; font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 150%; color:#5F5F5F; letter-spacing:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
#board > .view .file_add .list li a,
#board > .view .file_add .list li a:hover { font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 150%; color:#5F5F5F; letter-spacing:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
#board > .view .file_add .list:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */}

#board > .view .list_preview { border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; }
#board > .view .list_preview ul { margin: 0; padding: 0; font-size: 0; }
#board > .view .list_preview li { display: inline-block; vertical-align: top; position: relative; width: 50%; padding: 16px 0; }
#board > .view .list_preview .title { position: absolute; left: 30px; top: 16px; padding-left: 28px; font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 150%; color:#1D1A1A; letter-spacing:-0.5px; }
#board > .view .list_preview .title:after { content: ""; position: absolute; width: 7px; height: 12px; left: 0; top: 50%; margin-top: -6px; background: url("../images/board/dot_prev.png") no-repeat; }
#board > .view .list_preview .info { margin: 0 0 0 165px; font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 150%; color:#5F5F5F; letter-spacing:0; text-align: left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
#board > .view .list_preview .info a,
#board > .view .list_preview .info a:hover { font-family: 'Pretendard'; font-weight: 300; font-size: 16px; font-weight: normal; line-height: 28px; color: #888888; letter-spacing: -0.5px; text-align: left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }

#board > .view .list_preview li:nth-child(2) { }
#board > .view .list_preview li:nth-child(2) .title { left: auto; right: 30px; padding-left: 0; padding-right: 28px; text-align: right; }
#board > .view .list_preview li:nth-child(2) .title:after { left: auto; right: 0; background: url("../images/board/dot_next.png") no-repeat; }
#board > .view .list_preview li:nth-child(2) .info { margin: 0 165px 0 0; text-align: right; }
#board > .view .list_preview li:nth-child(2) .info a,
#board > .view .list_preview li:nth-child(2) .info a:hover { text-align: right; }
#board > .view .list_preview:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */}

#board > .view .btn_list { margin: 50px 0 0; }
#board > .view .btn_list ul { margin: 0; padding: 0; font-size: 0; text-align: center; }
#board > .view .btn_list li { display: inline-block; vertical-align: top; list-style: none; width: 24.4%; margin: 0 0 0 0.8%; background-color: #8f8f8f; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }
#board > .view .btn_list li:last-child { background-color: #282828; }
#board > .view .btn_list li:first-child { margin: 0; }
#board > .view .btn_list a,
#board > .view .btn_list a:hover { display: block; font-size: var(--font-15); font-weight: normal; line-height: 50px; color: #ffffff; letter-spacing: 0; text-align: center; }
#board > .view .btn_list:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */}
#board > .view .btn_list .input { cursor: pointer; width: 100%; height: 50px; font-size: var(--font-15); font-weight: normal; line-height: 48px; color: #ffffff; text-align: center; background-color: #8f8f8f; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; border:none; }




/* 폼메일 */
.form_agree { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding: 20px 0; }
.form_agree .agree_textarea { width:100%; height: 100px; padding: 10px; font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 160%; color:#ADADAD; letter-spacing:-0.5px; border:1px solid #D9D9D9; outline:none; resize:none; }
.form_agree .agree_check { display:flex; gap:6px; align-items:center; font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 100%; color:#1D1A1A; letter-spacing:-0.5px; }


#form { margin-top: 20px; padding: 20px 0; border-top:2px solid #000000; border-bottom:1px solid #D9D9D9; }
#form .form_list { display:flex; flex-wrap:wrap; align-items: center; gap:0 1.333%; }
#form .form_list .list_item { display: flex; align-items: center; gap: 10px; width: 49.3335%; padding:10px; }
#form .form_list .list_item.full { width: 100%; }
#form .form_list .list_item.filelist { width: 100%; }
#form .form_list .list_item .title { flex-shrink: 0; width:120px; font-family: 'Pretendard'; font-weight: 500; font-size:16px; line-height: 150%; color:#1D1A1A; letter-spacing:-0.5px; }
#form .form_list .list_item .title span { color:#FF3A3A; }
#form .form_list .list_item .field { flex-grow: 1; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; position: relative; min-height:56px; border-bottom:1px solid #D9D9D9; }
#form .form_list .list_item .field.checklist { padding: 10px 0; }
#form .form_list .list_item .field .check_item { display:flex; gap:6px; align-items:center; font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 100%; color:#9E9E9E; letter-spacing:-0.5px; }
#form .form_list .list_item .input { width:100%; padding: 0 16px; font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 55px; color:#ADADAD; letter-spacing:-0.5px; border:none; outline:none; }
#form .form_list .list_item .input::-webkit-input-placeholder { font-weight: 400; font-size:16px; color:#ADADAD; }
#form .form_list .list_item .input:moz-placeholder { font-weight: 400; font-size:16px; color:#ADADAD; }
#form .form_list .list_item .input::-moz-placeholder { font-weight: 400; font-size:16px; color:#ADADAD; }
#form .form_list .list_item .input:-ms-input-placeholder { font-weight: 400; font-size:16px; color:#ADADAD; }
#form .form_list .list_item .textarea { width:100%; height: 400px; padding: 20px; font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 160%; color:#ADADAD; letter-spacing:-0.5px; border:1px solid #D9D9D9; outline:none; }

.form_btn_area { display: flex; justify-content: end; align-items: center; gap: 6px; padding:40px 10px 0; }
.form_btn_area .btn_insert { }
.form_btn_area .btn_insert a,
.form_btn_area .btn_insert a:hover { display:flex; justify-content: center; align-items: center; height: 46px; padding:0 32px; font-family: 'Pretendard'; font-weight: 400; font-size:16px; line-height: 100%; color:#FFFFFF; letter-spacing:0; text-align:center; background-color:#0082DA; -webkit-border-radius:999px; -moz-border-radius:999px; border-radius:999px; }



#fileupload { display:flex; flex-wrap: wrap; gap:10px 0.6666%; width:100%; }
#fileupload > .list_box { display: flex; justify-content: space-between; align-items: start; gap: 10px; position: relative; width: 32.8889%; height: 84px; padding: 16px; background-color: #F8F9FB; border: 1px solid #EDEDED; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#fileupload > .list_box .box_info { flex-grow: 1; display:flex; align-items:center; gap:12px; min-width: 0; }
#fileupload > .list_box .box_info .thumb { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 52px; height: 52px; line-height:0; border-radius:4px; }
#fileupload > .list_box .box_info .thumb img { width:100%; border-radius:4px; }
#fileupload > .list_box .box_info .thumb_info { display:flex; flex-direction:column; min-width: 0; }
#fileupload > .list_box .box_info .thumb_info .thumb_title { font-family: 'Pretendard'; font-weight: 400; font-size:14px; line-height: 140%; color:#404040; letter-spacing:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; }
#fileupload > .list_box .box_info .thumb_info .thumb_size { font-family: 'Pretendard'; font-weight: 300; font-size:14px; line-height: 140%; color:#5F5F5F; letter-spacing:0; }

#fileupload > .list_box .file_btn { margin-top:2px; }
#fileupload > .list_box .file_btn ul { margin: 0; padding: 0; }
#fileupload > .list_box .file_btn li { cursor: pointer; list-style: none; position: relative; width: 36px; height: 22px; border: 1px solid #D9D9D9; border-top-left-radius:4px; border-top-right-radius:4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #ffffff; }
#fileupload > .list_box .file_btn li:nth-child(2) { border-top: none; border-radius: 0; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
#fileupload > .list_box .file_btn:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */}

#fileupload > .list_box .file_btn li:nth-child(1):after { content: ""; position: absolute; width: 10px; height: 2px; left: 50%; margin-left: -5px; top: 50%; margin-top: -1px; background-color: #ADADAD; }
#fileupload > .list_box .file_btn li:nth-child(1):before { content: ""; position: absolute; width: 2px; height: 10px; left: 50%; margin-left: -1px; top: 50%; margin-top: -5px; background-color: #ADADAD; }
#fileupload > .list_box .file_btn li:nth-child(2):after { content: ""; position: absolute; width: 10px; height: 2px; left: 50%; margin-left: -5px; top: 50%; margin-top: -1px; background-color: #ADADAD; }


.form_btn { display: inline-block; flex-shrink:0; }
.form_btn a,
.form_btn a:hover { display:flex; justify-content: center; align-items: center; gap:4px; height: 36px; padding:0 12px; font-family: 'Pretendard'; font-weight: 400; font-size:14px; line-height: 100%; color:#FFFFFF; letter-spacing:0; text-align:center; background-color:#8F8F8F; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }

.form_btn.v1 { position:absolute; right:0; top:7px; }
.form_btn.v1 a,
.form_btn.v1 a:hover { padding:0 24px; }




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

	/* 게시판 */
	#board .board_head .search .select { height:42px; font-size:14px; line-height: 42px; }
	#board .board_head .search .input { height:42px; font-size:14px; line-height: 42px; }

	#board .board_list .row_item .thumb { width:160px; line-height: 0; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; }
	#board .board_list .row_item .thumb img { width:100%; }
	#board .board_list .row_item .title { font-size:20px; }
	#board .board_list .row_item .title a,
	#board .board_list .row_item .title a:hover { font-size:20px; }
	#board .board_list .row_item .date { width:120px; }
	#board .board_list .row_item .date .date_row1 { font-size:16px; }
	#board .board_list .row_item .date .date_row2 { font-size:36px; }


	.board_btn a,
	.board_btn a:hover { height: 42px; padding:0 16px; font-size:14px; }




}



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





}

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

	/* 게시판 */
	#board .board_head { flex-direction: column; justify-content:start; align-items: start; gap: 8px; width:100%; }
	#board .board_head .side { align-items:start; }

	#board .board_head .search { width:100%; }
	#board .board_head .search .select { width:100px; height:40px; padding-left: 10px; line-height: 40px; }
	#board .board_head .search .input { flex-grow: 1; width: 10px; height:40px; padding: 0 10px; line-height: 40px; }
	#board .board_head form { width:100%; }

	#board .board_list .row_item { flex-direction: column; align-items: start; gap: 4px; padding:25px 10px; }
	#board .board_list .row_item .col_item { flex-direction: column; align-items: start; gap: 30px; width:100%; }
	#board .board_list .row_item .thumb { width:100%; }
	#board .board_list .row_item .thumb img { width:100%; }
	#board .board_list .row_item .title { font-size:18px; }
	#board .board_list .row_item .title a,
	#board .board_list .row_item .title a:hover { font-size:18px; }
	#board .board_list .row_item .date { flex-direction: row; gap: 0; width:auto; border:none; }
	#board .board_list .row_item .date .date_row1 { font-weight: 400; font-size:18px; }
	#board .board_list .row_item .date .date_row2 { position: relative; font-weight: 400; font-size:18px; }
	#board .board_list .row_item .date .date_row2:before{ content: attr(data-label); font-weight: 400; font-size:18px; }


	.board_btn a,
	.board_btn a:hover { height: 40px; padding:0 12px; }


	/* 게시판 - 보기 */
    #board > .view .subject { margin: 0 0 15px; font-size: 20px; line-height: 30px; }
    #board > .view .subject .info { position: relative; right: auto; top: auto; margin-top: 5px; }

    #board > .view .option { border-top: 2px solid #444444; } 
    #board > .view .option li { padding: 0; border-bottom: none; }
    #board > .view .option .col { display: block; width: auto; padding: 10px 0; border-bottom: 1px solid #d9d9d9; }
    #board > .view .option .col .title { left: 20px; top: 10px; padding-left: 25px; font-size:14px; }
    #board > .view .option .col .info { margin: 0 0 0 125px; font-size:14px; }

    #board > .view .content { margin: 30px 20px 60px; font-size:16px; }
    #board > .view .content img { width:100%; height: auto; }

    #board > .view .file_add { padding: 20px; }
    #board > .view .file_add .title { padding-left: 25px; font-size:14px; }
    #board > .view .file_add .list { margin: 0 25px; }
	#board > .view .file_add .list li { font-size:14px; }
	#board > .view .file_add .list li a,
	#board > .view .file_add .list li a:hover { font-size:14px; }

    #board > .view .list_preview li { display: block; width: auto; padding: 10px 0; }
    #board > .view .list_preview .title { position: relative; left: auto; top: auto; margin: 0 20px; padding-left: 25px; font-size:14px; }
    #board > .view .list_preview .title:after { width: 12px; height: 7px; margin-top: -3px; background: url("../images/board/dot_prev_m.png") no-repeat; }
    #board > .view .list_preview .info { margin: 0 0 0 45px; font-size:14px; }
	#board > .view .list_preview .info a,
	#board > .view .list_preview .info a:hover { font-size: 14px; }

    #board > .view .list_preview li:nth-child(2) { border-top: 1px solid #d9d9d9; }
    #board > .view .list_preview li:nth-child(2) .title { left: auto; right: auto; padding-left: 25px; padding-right: 0; text-align: left; }
    #board > .view .list_preview li:nth-child(2) .title:after { left: 0; right: auto; background: url("../images/board/dot_next_m.png") no-repeat; }
    #board > .view .list_preview li:nth-child(2) .info { margin: 0 0 0 45px; text-align: left; }
    #board > .view .list_preview li:nth-child(2) .info a,
    #board > .view .list_preview li:nth-child(2) .info a:hover { text-align: left; }

    #board > .view .btn_list { margin: 40px 0 0; }
    #board > .view .btn_list a,
    #board > .view .btn_list a:hover { line-height: 40px; }
    #board > .view .btn_list .input { height: 40px; line-height: 40px; }


	/* 폼메일 */
	.form_agree { padding: 10px 0; }
	.form_agree .agree_textarea { font-size:14px; }
	.form_agree .agree_check { font-size:14px; }

	#form { padding: 10px 0; }
	#form .form_list { flex-direction: column; align-items: start; gap:0; }
	#form .form_list .list_item { width: 100%; }
	#form .form_list .list_item .title { width:100px; font-size:14px; }
	#form .form_list .list_item .field { min-height:46px; }
	#form .form_list .list_item .field { min-height:46px;}
	#form .form_list .list_item .field .check_item { font-size:14px; }
	#form .form_list .list_item .input { padding: 0 10px; font-size:14px; line-height: 45px; }
	#form .form_list .list_item .input::-webkit-input-placeholder { font-size:14px; }
	#form .form_list .list_item .input:moz-placeholder { font-size:14px; }
	#form .form_list .list_item .input::-moz-placeholder { font-size:14px; }
	#form .form_list .list_item .input:-ms-input-placeholder { font-size:14px; }
	#form .form_list .list_item .textarea { height: 260px; font-size:14px; }

	.form_btn_area { padding:20px 10px 0; }
	.form_btn_area .btn_insert { }
	.form_btn_area .btn_insert a,
	.form_btn_area .btn_insert a:hover { height: 40px; padding:0 20px; font-size:14px; }


	#fileupload { gap:10px 2%; }
	#fileupload > .list_box { width: 49%; height: 66px; padding: 6px; }
	#fileupload > .list_box .box_info .thumb_info .thumb_title { font-size:13px; }
	#fileupload > .list_box .box_info .thumb_info .thumb_size { font-size:12px; }

	.form_btn.v1 { top:5px; }
	.form_btn.v1 a,
	.form_btn.v1 a:hover { padding:0 12px; }
}


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

}



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

	/* 폼메일 */
	#fileupload { flex-direction: column; gap:10px; }
	#fileupload > .list_box { width: 100%; }
}