@charset "utf-8";


/* board-search */
.board-search{
    display: flex; flex-wrap: wrap; margin: 0 0 40px;
	& > form{display: block; width: 100%;}
    & .search-inner{
        display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; width: 100%;

		& .total{margin: 0 auto 0 0; color: #666; align-content: center;}

		& > .more{margin: 0 0 0 auto;}

        & select{
			position: relative; min-width: 180px; border-radius: 5px; border: 1px solid #cfcfcf; height: 52px; padding: 0 40px 0 var(--input-inner-space); font-size: 1rem; font-weight: var(--fwm); outline: none; background-image: url("/assets/site/img/common/select-arr.svg"); background-position: center right 22px; background-repeat: no-repeat; background-color: #fff; color: #222;
			text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
        }

        & input{
            display: block; width: 320px; border-radius: 5px; border: 1px solid #cfcfcf; height: 52px; padding: 0 var(--input-inner-space); letter-spacing: 0; outline: none; font-size: 1rem; font-weight: var(--fwm); color: #222;
            &::placeholder{color: #bdbdbd;}
            &:focus{}
			&:read-only{color: #bdbdbd; background: #f9f9f9; cursor: no-drop;}
        }

        & button{
            display: block; width: 80px; border-radius: 5px; line-height: 50px; border: 1px solid transparent; background: #00a651; color: #fff; font-weight: var(--fwsb);
        }

		& .sort{
			display: flex; flex-wrap: wrap; gap: 40px; padding: 10px 0 0;
			& > li{
				& a{
					position: relative; display: inline-block; font-size: 20px; font-weight: var(--fwsb); color: #999; padding: 0 0 9px;
					&.on{
						color: #000; padding-left: 10px; padding-right: 10px;
						&:before{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #000;}
					}
				}
			}
		}
    }

    &.atTop{margin-top: -92px; margin-bottom: 40px;}

	@media (width <= 1600px){
		
	}
	@media (width <= 1280px){
		margin: 0 0 20px;
		&.atTop{margin-top: -77px; margin-bottom: 25px;}
		& .search-inner{
			& select{min-width: 110px;}
			& input{width: 220px;}

			& .sort{
				gap: 30px; padding: 14px 0 0;
				& > li{
					& a{font-size: 18px;}
				}
			}
		}
	}
	@media (width <= 1024px){
		& input{width: 200px;}
	}
	@media (width <= 860px){
		&.atTop{margin-top: 30px; margin-bottom: 25px;}
		& .search-inner{
			& .sort{
				gap: 30px; padding: 0;
				& > li{
					& a{
						font-size: 15px;
						&.on{
							padding-left: 0; padding-right: 0;
							&:before{height: 2px;}
						}
					}
				}
			}
		}
	}
	@media (width <= 640px){
		&.atTop{margin-bottom: 20px;}
		& .search-inner{
			gap: 5px;
			& select{
				width: 75px; min-width: auto; height: 40px; font-size: 13px; padding: 0 24px 0 11px; background-position: center right 9px; background-size: 10px auto;
			}
			& input{
				width: 98px; height: 40px; font-size: 13px; padding: 0 10px;
			}
			& button{
				width: 60px; line-height: 38px; font-size: 14px;
			}

			& .sort{
				gap: 20px; padding: 0;
				& > li{
					& a{
						padding-bottom: 5px; font-size: 14px;
					}
				}
			}
		}
	}
}


/* board-table */
.board-table{
	width: 100%; border-top: 1px solid #e4e4e4; line-height: 1.3; border-collapse: collapse; table-layout: fixed; color: #697385;

	& thead{
		& th{
            text-align: center; background: #f6f8fb; font-weight: var(--fwsb); padding: 19px 10px; vertical-align: middle; border-bottom: 1px solid #e4e4e4; color: #74839b;
        }
	}

	& tbody{
		& tr{
			&.hoverble{
				cursor: pointer;
				&:hover{
					& td{background-color: rgba(0,0,0,0.02);}
				}
			}
		}
	}

	& td{
        text-align: center; border-bottom: 1px solid #e4e4e4; padding: 17.5px 0; vertical-align: middle; background: #fff;
        & .desc{
            display: block; text-align: left; line-height: 1.3; padding: 18px 0;
            & dt{font-size: 20px; font-weight: var(--fwb);}
            & dd{color: #777; padding: 10px 0 0; font-size: 1rem; font-weight: var(--fwr);}
            &:hover{text-decoration: underline;}
            &[disabled]{cursor: not-allowed;}
        }

		& .view{
			display: inline-block; vertical-align: middle; width: auto; max-width: calc(100% - 30px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
			& .date{display: none;}
		}

		& .new{
			background-color: #c01920; color: #fff; font-size: 11px; width: 17px; height: 17px; line-height: 17px; display: inline-block; border-radius: 50%; text-align: center; vertical-align: middle;
		}
    }

	& .file{
		display: inline-block; vertical-align: middle; margin: -2px 0 0 3px;
	}
	& .ico-board-answer{
		display: inline-block; width: 10px; height: 10px; border-left: 2px solid #777; border-bottom: 2px solid #777; margin: 0 3px 0 0 !important; vertical-align: top;
	}
	& span.notice{
		display: inline-block; line-height: 22px; padding: 0 10px; border-radius: 4px; background: #111; color: #fff; font-size: 15px; font-weight: 500;
		&:before{content: "공지";}
	}
	& .tbtn{
        display: inline-block; width: auto; padding: 0 15px; line-height: 22px; border-radius: 4px; border: 1px solid transparent; background: #111; color: #fff; font-size: 14px; font-weight: var(--fwsb); text-align: center; cursor: default;

		/* 기능 분류 */
        &[disabled]{background: #777 !important; cursor: not-allowed !important;}
		&[href],
		&[onclick]{cursor: pointer;}
        &.download{
            & span{
                position: relative; display: inline-flex; gap: 4px; padding: 0 0 0 18px;
                &:before{
					content: ""; position: absolute; top: 4px; left: 0; width: 14px; height: auto; aspect-ratio: 1; 
					background: url("/assets/site/img/contents/tbtn-download.svg") no-repeat; background-position: bottom center;
                }
            }
            &:not([disabled]):hover{
                & span {
                    &:before{background-position: top center; transition: 0.2s linear;}
                }
            }
        }
		&.badge{
			line-height: 22px; width: auto;
		}

		/* 크기 분류 */
        &.wa{width: auto !important;}
        &.w100{width: 100%;}
        &.large{line-height: 50px; font-size: 16px; border-radius: 8px;}

		/* 색상 분류 */
        &.blue{background: var(--primary-blue);}
        &.bd-blue{border-color: var(--primary-blue); color: var(--primary-blue); background: #fff;}
    }

	& .tal{text-align: left !important;}
	& .tar{text-align: right !important;}
	& .tac{text-align: center !important;}

	@media (width <= 1280px){
		& td{
			& .desc{
				padding: 10px 0;
				& dt{font-size: 18px;}
			}
		}
	}
	@media (width <= 860px){
		border: none;
		& colgroup{display: none;}
		& thead{display: none;}
		& tbody{
			display: flex; flex-direction: column; gap: var(--gap);
			& tr{
				display: block; width: 100%; border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; padding: 24px 24px; background: #fff;
				& td[title-cell]{
					margin-top: 0; margin-bottom: 20px; font-size: 20px; font-weight: var(--fwb);
					&:before{display: none;}
				}

				&.hoverble{
					&:hover{
						& td{background: transparent;}
					}
				}
			}
		}
		& td{
			display: flex; flex-wrap: wrap; gap: 10px; width: 100%; border: none; padding: 0; text-align: left; font-size: 16px;
			&:before{content: attr(data-title); flex: 0 0 auto; font-weight: var(--fwb); color: #111; align-content: center;}

			&:has([role="button"]),
			&:has(button){
				margin-top: 20px;
				&:before{display: none;}
			}

			&.m-hide{display: none;}

			& .desc{
				padding: 0;
				& dd{padding: 5px 0 0;}
			}
		}
		& td + td{margin-top: 8px;}

		& .tbtn{
			line-height: 43px; width: 100%;
			&.large{line-height: 43px;}
			&.download{
				& span{
					&:before{top: 14px;}
				}
			}
			&.badge{
				margin-top: -2px;
			}
		}
	}
	@media (width <= 640px){
		& tbody{
			& tr{
				padding: 24px 20px;
				& td[title-cell]{
					font-size: 18px;
				}
			}
		}
		& td{
			gap: 10px; font-size: 15px;

			& .period{flex: 1; min-width: 0;}

			& .desc{
				& dt{font-size: 18px;}
				& dd{font-size: 14px;}
			}
		}
	}
}


/* view-table */
.view-table{
	width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 50px;
	& thead{
		& tr{
			& th{
				font-weight: var(--fwsb); padding: 0 0 29px; vertical-align: middle; text-align: left; border-bottom: 1px solid #eee;
				text-align: center;
				& .bd-type{line-height: 1; font-size: 18px; font-weight: var(--fwm); color: #00a651; padding: 0 0 21px;}
				& .tit{line-height: 1.2; min-width: 0; font-size: 46px; font-weight: var(--fwsb); color: #000;}
				& .date{display: block; color: #888; padding: 10px 0 0; font-weight: var(--fwr);}
			}
		}
	}
	& tbody{
		& tr{
			& td{
				border-bottom: 1px solid #eee;
				&.bdn{border: none !important;}
				& .con{
					padding: 50px 20px 70px;
				}
			}
		}
	}

	@media (width <= 1500px){
		& thead{
			& tr{
				& th{
					& .tit{font-size: clamp(30px,3.6vw,46px);}
				}
			}
		}
	}
	@media (width <= 1280px){
		margin-top: 50px;
	}
	@media (width <= 860px){
		margin-top: 30px;
		& thead{
			& tr{
				& th{
					position: relative; padding: 0 0 15px; text-align: left;
					& .bd-type{padding: 0 0 15px; font-size: 16px;}
					& .tit{font-size: 22px;}
					& .date{position: absolute; top: 0; right: 0; font-size: 15px; padding: 0; line-height: 1.2;}
				}
			}
		}
		& tbody{
			& tr{
				& td{
					& .con{
						padding: 30px 0;
					}
					& .bbs_file_t{
						margin: 0 0 30px;
					}
				}
			}
		}
	}
	@media (width <= 640px){
		margin-top: 30px;
		& thead{
			& tr{
				& th{
					padding: 0 0 12px;
					& .bd-type{font-size: 15px;}
					& .tit{font-size: 20px;}
					& .date{font-size: 14px;}
				}
			}
		}
		& tbody{
			& tr{
				& td{
					& .con{
						padding: 20px 0;
					}
					& .bbs_file_t{
						margin: 0 0 20px; padding: 15px 15px; font-size: 14px;
						& .acc{padding: 0 8px 0 0;}
						& .bbs_file_wrap{padding: 0 0 0 10px;}
					}
				}
			}
		}
	}
}


/* view-table-recommend */
.view-table-recommend{
	width: 100%; border-collapse: collapse; table-layout: fixed; max-width: 850px; margin-top: 50px; margin-left: auto; margin-right: auto; color: #222;
	& thead{
		& tr{
			& th{
				font-weight: var(--fwsb); padding: 0 0 40px; vertical-align: middle; text-align: left; border: none; text-align: left; 
				& .sup{
					display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px;
					& .date{display: block; padding: 10px 0 0; padding: 0; font-size: 18px; font-weight: var(--fwm); color: #999;}
				}
				& .tit{line-height: 1.2; min-width: 0; font-size: 46px; font-weight: var(--fwb); color: #000;}
			}
		}
	}
	& tbody{
		& tr{
			& td{
				border: none;
				& .recommend-con{
					border-top: 1px solid #e4e4e4;
					& > dl{
						display: flex; flex-wrap: wrap; border-bottom: 1px solid #e4e4e4;
						& dt{
							flex: 0 0 auto; width: 160px; background-color: #f7f7f7; font-weight: var(--fwm); padding: 20px 10px 20px 20px; align-content: center;
						}
						& dd{
							flex: 1; min-width: 0; padding: 20px 20px 20px 20px;
						}
					}
				}
				& .recommend-bot{
					font-size: 12px; padding: 20px 0 0;
					& .bot-list{
						display: flex; flex-wrap: wrap; color: #999; font-size: 12px; letter-spacing: 0; padding: 2px 0 0;
						& > li{flex: 0 0 auto;}
						& > li + li{
							&:before{content: ""; display: inline-block; vertical-align: middle; width: 1px; height: 10px; background: #999; margin: -3px 6px 0;}
						}
					}
				}
			}
		}
	}

	@media (width <= 1500px){
		& thead{
			& tr{
				& th{
					& .tit{font-size: clamp(30px,3.6vw,46px);}
				}
			}
		}
	}
	@media (width <= 1280px){
		margin-top: 50px;
	}
	@media (width <= 860px){
		margin-top: 30px;
		& thead{
			& tr{
				& th{
					position: relative; padding: 0 0 15px; text-align: left;
					& .tit{font-size: 22px;}
					& .sup{
						& .date{position: absolute; top: 0.3em; right: 0; font-size: 15px; padding: 0; line-height: 1.2;}
					}
				}
			}
		}
	}
	@media (width <= 640px){
		margin-top: 30px;
		& thead{
			& tr{
				& th{
					padding: 0 0 12px;
					& .tit{font-size: 20px;}
					& .sup{
						& .date{font-size: 14px;}
					}
				}
			}
		}
		& tbody{
			& tr{
				& td{
					& .recommend-con{
						& > dl{
							& dt{padding: 15px; width: 100px;}
							& dd{padding: 15px;}
						}
					}
				}
			}
		}
	}
}


/* view-table */
.view-table-briefing{
	width: 100%; border-collapse: collapse; table-layout: fixed; max-width: 850px; margin: 50px auto 0; color: #222;
	& thead{
		& tr{
			& th{
				font-weight: var(--fwsb); padding: 0 0 40px; vertical-align: middle; text-align: left; border-bottom: 1px solid #eee; text-align: left; 
				& .sup{
					display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px;
					& .date{display: block; padding: 0; font-size: 18px; font-weight: var(--fwm); color: #999;}
				}
				& .tit{line-height: 1.2; min-width: 0; font-size: 46px; font-weight: var(--fwb); color: #000;}
			}
		}
	}
	& tbody{
		& tr{
			& td{
				border: none;
				& .briefing-detal{
					& .briefing-agree{
						padding: 38px 0 0;
						& .txt{
							letter-spacing: 0; padding: 0 0 26px;
							& .title{font-size: 18px; font-weight: var(--fwm); color: #000;}
							& .des{font-size: 14px; color: #888; padding: 10px 0 0;}
						}
						& .con{
							height: 292px; overflow: hidden; overflow-y: auto; background-color: #f7f7f7; border-radius: 5px;
						}
						& .form-checkbox{
							margin: 24px 0 0;
						}
					}
				}
				& .briefing-form{
					padding: 76px 0 0;
					& form{
						& > .btn-wrap{
							padding: 60px 0 0;
						}
					}
				}
			}
		}
	}

	@media (width <= 1500px){
		& thead{
			& tr{
				& th{
					& .tit{font-size: clamp(30px,3.6vw,46px);}
				}
			}
		}
	}
	@media (width <= 1280px){
		margin-top: 50px;
	}
	@media (width <= 860px){
		margin-top: 30px;
		& thead{
			& tr{
				& th{
					position: relative; padding: 0 0 15px; text-align: left;
					& .tit{font-size: 22px;}
					& .sup{
						& .date{font-size: 15px; padding: 0; line-height: 1.2;}
					}
				}
			}
		}
		& tbody{
			& tr{
				& td{
					& .briefing-detal{
						& .briefing-agree{
							padding: 15px 0 0;
						}
					}
				}
			}
		}
	}
	@media (width <= 640px){
		margin-top: 30px;
		& thead{
			& tr{
				& th{
					padding: 0 0 12px;
					& .sup{
						& .date{font-size: 14px;}
					}
					& .tit{font-size: 22px;}
				}
			}
		}
		& tbody{
			& tr{
				& td{
					& .briefing-detal{
						& .briefing-agree{
							& .txt{
								& .title{font-size: 16px;}
							}
							& .con{
								height: 200px;
							}
							& .form-checkbox{
								margin: 20px 0 0;
							}
						}
					}
				}
			}
		}
	}
}


/* board-btns */
.board-btns{
	display: flex; flex-wrap: wrap; gap: 10px;
	&.atBottom{padding: 50px 0;}
	&.alignLeft{justify-content: flex-start;}
	&.alignRight{justify-content: flex-end;}
	&.alignCenter{justify-content: center;}

	& .btn{min-width: 120px;}

	@media (width <= 860px){
		justify-content: center !important;
		&.atBottom{padding: 30px 0;}
	}
}


/* board-nav */
.board-nav{
	& > dl{
		display: flex; flex-wrap: wrap;
		& dt{
			flex: 0 0 auto; position: relative; width: 180px; padding: 20px 20px;
			&:after{content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 20px; background-color: #eee;}
			& span{}
		}
		& dd{
			flex: 1; min-width: 0; padding: 20px 26px; align-content: center;
			& a{
				display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%;
				&:hover{text-decoration: underline;}
			}
			& span{
				display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #ddd; max-width: 100%;
				&:hover{cursor: default;}
			}
			
		}
	}
	& > dl + dl{
		border-top: 1px solid #eee;
	}

	@media (width <= 1280px){
		& > dl{
			& dt{width: 20%;}
		}
	}
	@media (width <= 640px){
		& > dl{
			font-size: 14px;
			& dt{
				padding: 7px 10px; width: auto; border-right: 1px solid #eee;
				&:after{display: none;}
			}
			& dd{padding: 7px 10px;}
		}
	}
}


/* bbs_file_t */
.bbs_file_t{
	display: flex; flex-wrap: wrap; margin: 0 24px 30px; background: #f9f9f9; border-radius: 8px; padding: 20px 24px;
	& .acc{
		flex: 0 0 auto; position: relative; font-weight: 600; padding: 0 15px 0 0; border-right: 1px solid #ddd;
	}
	& .bbs_file_wrap{
		flex: 1; min-width: 0; padding: 0 0 0 15px; display: flex; flex-direction: column; gap: 8px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
		& > span{
			position: relative; display: block; padding: 0 30px 0 23px; /* width: max-content; max-width: 100%; */
			&:before{content: ""; position: absolute; top: 0; left: 0; width: 16px; height: auto; aspect-ratio: 16 / 20; background: url("/assets/site/img/board/icon_document.png") no-repeat; background-size: 100% auto;}
			& .icon_download{margin: 0 0 0 6px;}
		}
	}
}


/* board-basic-list */
.board-basic-list{
	display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(auto-fill, minmax(50px, auto)); gap: 50px 24px;

	& .table{
		border-top: 1px solid #111; line-height: 1.3;
		& .thead{
			& .th{text-align: center; background: #f9f9f9; font-weight: var(--fwsb); padding: 19px 10px;}
		}
		& .tbody{
			
		}

		& .tr{
			display: grid; 
			/* ▼ 중요!  
			1. table 요소 태그 자체에서 인라인으로 각 col 너비 작성 table 태그의 colgroup 개념 ▶ style="--grid-cols: 1fr 8% 18% 10% 12% 10% 10% 6% 10%;">
			2. 균등분배 하려면 인라인으로 콜 갯수만 변수 지정 ▶ style="--col-count: 9;"
			*/
			grid-template-columns: var(--grid-cols, repeat(var(--col-count, 1), 1fr));
		}

		& .td{
			text-align: center; border-bottom: 1px solid var(--border-default); padding: 17.5px 0; align-content: center; background: #fff;
			& .desc{
				display: block; text-align: left; line-height: 1.3; padding: 18px 0;
				& dt{font-size: 20px; font-weight: var(--fwb);}
				& dd{color: #777; padding: 10px 0 0;}

				&:hover{
					text-decoration: underline;
				}
				&[disabled]{
					cursor: not-allowed;
				}
			}
		}

		& .tbtn{
			display: inline-block; width: auto; padding: 0 15px; line-height: 22px; border-radius: 4px; border: 1px solid transparent; background: #111; color: #fff; font-size: 14px; font-weight: var(--fwsb); text-align: center;

			/* 기능 분류 */
			&[disabled]{background: #777 !important; cursor: not-allowed;}
			&.download{
				& span{
					position: relative; display: inline-flex; gap: 4px; padding: 0 0 0 18px;
					&:before{content: ""; position: absolute; top: 4px; left: 0; width: 14px; height: auto; aspect-ratio: 1; background: url("/assets/site/img/contents/tbtn-download.svg") no-repeat; background-position: bottom center;}
				}
				&:not([disabled]):hover{
					& span{
						&:before{background-position: top center; transition: 0.2s linear;}
					}
				}
			}

			/* 크기 분류 */
			&.wa{width: auto !important;}
			&.w100{width: 100%;}
			&.large{
				line-height: 50px; font-size: 1rem; border-radius: 8px;
			}

			/* 색상 분류 */
			&.blue{background: var(--primary-blue);}
			&.bd-blue{border-color: var(--primary-blue); color: var(--primary-blue); background: #fff;}
		}
	}

	& > li{

	}

	@media (width <= 1280px){
		gap: 50px 20px;
	}
	@media (width <= 860px){
		gap: 50px 15px;
	}
	@media (width <= 640px){
		grid-template-columns: repeat(2, 1fr); gap: 50px 15px;
	}
}


/* board-dowmload-list */
.board-dowmload-list{
    display: flex; flex-direction: column; gap: 50px;

    & > li{
        display: flex; flex-wrap: wrap; gap: 50px;
        padding: 50px 50px; border-radius: 16px; background: #e2e5ea;

        & .img{
            flex: 0 0 auto; width: 319px; height: auto; aspect-ratio: 319 / 450; border: 1px solid #e0e0e0; cursor: pointer;
            & img{width: 100%; height: 100%; object-fit: cover;}
        }
        & .con{
            flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 30px 0;

            & .name{font-size: 28px; font-weight: var(--fwsb); color: #000;}
            & .desc{padding: 12px 0 0; color: #757575;}
            & .down-btns{
                margin-top: auto; display: flex; flex-wrap: wrap; gap: 20px;

                & .btn-view{}
            }
        }
    }

	@media (width <= 1280px){
		& > li{
			padding: 30px; gap: 30px;
			& .img{width: 25vw;}
			& .con{padding: 2% 0;}
		}
	}
	@media (width <= 1024px){
		& > li{
			& .con{
				& .down-btns{
					gap: 10px;
					& .btn-view{width: calc( (100% - 10px) / 2 );}
				}
			}
		}
	}
	@media (width <= 860px){
		& > li{
			padding: 20px; gap: 20px;
			& .con{
				& .name{font-size: 24px;}
			}
		}
	}
	@media (width <= 640px){
		gap: 30px;
		& > li{
			padding: 20px; gap: 15px;
			& .img{width: 150px;}
			& .con{
				padding: 10px 0;
				& .name{font-size: 20px;}
				& .desc{display: none;}
				& .down-btns{
					gap: 6px;
					& .btn-view{
						width: calc( (100% - 6px) / 2 ); font-size: 14px; padding: 0 15px; line-height: 40px;
					}
				}
			}
		}
	}
	@media (width <= 568px){
		& > li{
			& .img{width: 130px;}
			& .con{
				& .down-btns{
					& .btn-view{
						text-align: center; justify-content: center;
						.arr{display: none;}
					}
				}
			}
		}
	}
	@media (width <= 460px){
		& > li{
			& .img{width: 90px;}
			& .con{
				padding: 0 0;
				& .name{font-size: 17px; line-height: 1.3; margin: 0 0 30px;}
				& .desc{display: none;}
				& .down-btns{
					& .btn-view{
						font-size: 12px; margin: auto 0 0;
						.arr{display: none;}
					}
				}
			}
		}
	}
}


/* board-product-list */
.board-product-list{
	display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(auto-fill, minmax(50px, auto)); grid-column-gap: 30px; grid-row-gap: 30px;

	& > li{
		min-width: 0;
		& > a{
			display: block; border: 1px solid #eeece8; border-radius: 16px; overflow: hidden; transition: 0.1s;
			

			& .img{
				width: auto; height: auto; aspect-ratio: 320 / 333; overflow: hidden; margin: 35px 15.5% 0;

				& img{width: 100%; height: 100%; object-fit: cover; object-fit: contain;}
			}

			& .txt{
				padding: 33px 20px 53px; color: #222; text-align: center;

				& .title{
					position: relative; display: inline-block; align-items: flex-start; font-size: 20px; font-weight: var(--fwm); line-height: 1.4; padding: 0 0 0 0;
                    transition: 0.2s;
					& > p{transition: 0.2s;}
					& .arr{
                        position: absolute; top: -1px; left: 100%; display: inline-block; width: 30px; height: auto; aspect-ratio: 1; border-radius: 50%; background: var(--theme-blue); 
                        opacity: 0; 
                        &:before{content: ""; position: absolute; inset: 0; background: url("/assets/site/img/common/view-arr.svg") no-repeat center; background-size: 54% auto; filter: var(--filter-white);}
                    }
				}
			}

            &:hover{
                background: #f5f5f5;
                & .txt{
                    & .title{
                        padding: 0 14px 0 0;
                        & > p{margin: 0 0 0 -30px;}
                        & .arr{opacity: 1;}
                    }
                }
            }
		}
	}

	@media (width <= 1280px){
		& > li{
			& > a{
				& .txt{
					& .title{
						& .arr{display: none;}
					}
				}
				&:hover{
					& .txt{
						& .title{
							padding: 0;
							& > p{margin: 0;}
							& .arr{display: none;}
						}
					}
				}
			}
		}
	}
	@media (width <= 1024px){
		grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; grid-row-gap: 20px;
		& > li{
			& > a{
				& .txt{
					& .title{
						font-size: 18px;
					}
				}
			}
		}
	}
	@media (width <= 640px){
		grid-template-columns: repeat(1, 1fr); grid-column-gap: 20px; grid-row-gap: 20px;
		& > li{
			& > a{
				& .img{margin: 30px 70px 0;}
				& .txt{
					padding: 30px 20px 30px;
					& .title{font-size: 16px;}
				}
			}
		}
	}
}


/* briefing-grid */
.briefing-grid{
	display: flex; flex-wrap: wrap; gap: 20px;

	& > dl{
		flex: 0 0 auto; width: 100%; background: #f7f7f7; border: 1px solid #e4e4e4; border-radius: 10px; overflow: hidden;
		display: flex; flex-wrap: wrap; gap: 20px; padding: 30px 35px; align-items: center;

		& dt{
			flex: 1; min-width: 0;
			& .title{
				position: relative; font-size: 24px; font-weight: var(--fwm); letter-spacing: 0; color: #222; padding: 0 0 0 50px;
				&:before{content: ""; position: absolute; top: 0; left: 0; width: 34px; height: auto; aspect-ratio: 1; background: url("/assets/site/img/board/ico-briefing.svg") no-repeat center; background-size: 100% auto;}
			}
		}
		& dd{
			flex: 0 0 auto; margin: 0 0 0 auto; display: flex; flex-wrap: wrap; gap: 30px; align-items: center;
			& .date{
				font-size: 18px; font-weight: var(--fwm); color: #999;
			}
			& .btns{
				& a{display: block; width: 160px; border-radius: 5px; color: #fff; background: var(--theme-green); letter-spacing: -0.04em; font-weight: var(--fwm); line-height: 42px; border: 1px solid transparent; overflow: hidden; text-align: center;}
			}
		}
	}

	@media (width <= 1280px){
		& > dl{
			padding: 20px 20px;
			& dt{
				& .title{
					font-size: 20px; padding: 0 0 0 35px;
					&:before{width: 29px;}
				}
			}
			& dd{
				gap: 20px;
				& .date{font-size: 16px;}
			}
		}
	}
	@media (width <= 860px){
		& > dl{
			flex-direction: column; align-items: flex-start;
			& dd{
				width: 100%; flex-direction: column; margin: 0; align-items: flex-start;
				& .date{width: 100%;}
				& .btns{
					width: 100%;
					& a{width: 100%;}
				}
			}
		}
	}
	@media (width <= 640px){
		& > dl{
			padding: 20px 15px;
			& dt{
				& .title{
					font-size: 18px; padding: 0 0 0 26px;
					&:before{width: 22px; top: 2px;}
				}
			}
			& dd{
				& .date{font-size: 14px;}
			}
		}
	}
}


/* board-basic-view */
.board-basic-view{
	& .special-list{
		--basic-view-gap: 50px;
		container-name: poster-container; container-type: inline-size;
		position: relative;  margin: 0 0 var(--basic-view-gap);

		@media (width <= 1500px){
			--basic-view-gap: 40px;
		}
		@media (width <= 1024px){
			--basic-view-gap: 30px;
		}

		& .poster-wrap{
			& .poster-cont{
				display: none;  flex-wrap: wrap; animation-duration: 0.5s; animation-fill-mode: both;

				& .poster{
					width: 50%;
					& a{
						display: block; aspect-ratio: 800 / 1132; width: 100%; height: auto;
						& img{display: block; width: 100%; height: 100%; object-fit: cover;}
					}
				}
				& .descript{
					display: flex; flex-direction: column; width: 50%; padding: 0 0 15cqw var(--basic-view-gap);
					& .top{
						border-bottom: 1px solid #e4e4e4; padding: 0 0 48px;
						& .sup{display: block; font-size: 18px; font-weight: var(--fwm); color: #999; padding: 0 0 12px;}
						& .title{font-family: var(--font-eng); font-size: 46px; font-weight: var(--fwb); color: #000; line-height: 1.1;}
					}
					& .mid{
						padding: 41px 0 0;
						& .details{
							color: #333;
						}
					}
					& .bot{
						margin: auto 0 0;
						
					}
				}

				&.on{
					display: flex; animation-name: slideInRight;
				}

				@media (width <= 1500px){
					& .descript{
						padding: 0 0 14.3cqw var(--basic-view-gap);
						& .top{
							& .title{font-size: clamp(30px,3.1vw,46px);}
						}
					}
				}
				@media (width <= 1024px){
					& .poster{width: 400px;}
					& .descript{
						width: calc(100% - 400px);
					}
				}
				@media (width <= 860px){
					flex-direction: column; gap: 230px;
					& .poster{width: 100%;}
					& .descript{
						width: 100%; padding: 0;
						& .top{
							padding: 0 0 25px;
							& .sup{font-size: 15px; padding: 0 0 5px;}
							& .title{font-size: 5vw;}
						}
						& .mid{
							padding: 25px 0 0;
							& .details{
								word-break: break-all;
							}
						}
					}
				}
				@media (width <= 640px){
					gap: 140px;
					& .descript{
						& .top{
							padding: 0 0 25px;
							& .sup{font-size: 15px; padding: 0 0 5px;}
							& .title{font-size: 25px;}
						}
					}
				}
			}
		}

		& .poster-tabs{
			position: absolute; bottom: 0; left: calc(50% + var(--basic-view-gap)); right: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto-fill, minmax(50px, auto)); gap: 24px;
			& button{
				position: relative; border-radius: 5px; overflow: hidden; width: 100%; max-width: 170px; height: auto; aspect-ratio: 170 / 240;
				transform-origin: bottom right;
				&:after{content: ""; z-index: 1; position: absolute; inset: 0; background: rgba(0,0,0,0.2);}
				& img{display: block; width: 100%; height: 100%; object-fit: cover;}

				&.on{
					position: absolute;
					animation-duration: 0.5s; animation-fill-mode: both; animation-name: posterTabOn;
				}
			}

			@media (width <= 1024px){
				left: calc(400px + var(--basic-view-gap));
			}
			@media (width <= 860px){
				bottom: auto; top: calc(141.4cqw + 22px);
				left: 0; right: auto; width: 100%;
				display: flex; flex-wrap: nowrap; gap: 20px; overflow: hidden; overflow-x: auto;
				& button{
					flex: 0 0 auto; width: 120px;
					&:after{background: rgba(0,0,0,0.3);}
					&.on{
						animation: none; position: relative;
						&:after{background: transparent; box-shadow: inset 0 0 0 2px var(--theme-green);}
					}
				}
			}
			@media (width <= 640px){
				bottom: auto; top: calc(141.4cqw + 15px);
				left: 0; right: auto; width: 100%;
				display: flex; flex-wrap: nowrap; gap: 15px; overflow: hidden; overflow-x: auto;
				& button{
					flex: 0 0 auto; width: 60px;
					&:after{background: rgba(0,0,0,0.3);}
					&.on{
						animation: none; position: relative;
						&:after{background: transparent; box-shadow: inset 0 0 0 2px var(--theme-green);}
					}
				}
			}
		}
	}
}


/* bo_pagenate */
.bo_pagenate {
	display: block; margin: 80px 0 0;

	& .paging{
		display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;

		& > a{width: 32px; height: auto; aspect-ratio: 1; border: 1px solid #f1f1f1; border-radius: 50%; font-size: 0;}
		& > a.lock{pointer-events: none !important; opacity: 0.4;}
		& > a.first{background: url("/assets/site/img/board/paging-arr-double.svg") no-repeat center;}
		& > a.prev{background: url("/assets/site/img/board/paging-arr.svg") no-repeat center;}
		& > a.next{background: url("/assets/site/img/board/paging-arr.svg") no-repeat center; transform: rotate(180deg);}
		& > a.end{background: url("/assets/site/img/board/paging-arr-double.svg") no-repeat center; transform: rotate(180deg);}
		& > ol{
			display: flex; flex-wrap: wrap; gap: 8px;
			& > li{
				& > a{display: block; width: 32px; height: auto; line-height: 30px; text-align: center; aspect-ratio: 1; border: 1px solid #f1f1f1; border-radius: 50%; font-size: 13px; font-weight: var(--fwsb); background: #fff; color: #333;}
				& > a:hover{background: rgba(0,0,0,0.08);}
				& > a.on{border-color: transparent !important; background: #00a651; color: #fff;}
				
			}
			& > li.last_page{display: none;}
		}
		
	}
}


/* board-gallery-list */
.board-gallery-list{
	display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(auto-fill, minmax(50px, auto)); gap: 60px 24px;

	& > li{
		min-width: 0;
		& > a{
			display: block;
			& .img{
				width: 100%; height: auto; aspect-ratio: 1; border: 1px solid #e4e4e4; border-radius: 10px; overflow: hidden;
				& img{width: 100%; height: 100%; object-fit: cover;}
			}
			& .txt{
				padding: 23px 15px 16px; color: #0e1616;
				& .bd-type{text-transform: uppercase; font-size: 18px; font-weight: var(--fwm); letter-spacing: 0; line-height: 1; color: #00a651; padding: 0 0 12px;}
				& .title{
					display: flex; align-items: flex-start; font-size: 18px; line-height: 1.4; font-size: 24px; font-weight: var(--fwm);
					& > p{flex: 0 1 auto; max-width: 100%; text-overflow: ellipsis; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.55; letter-spacing: -0.028em; max-height: 75px;}
					& .new{flex: 0 0 auto; margin: 9px 0 0 5px; display: inline-flex; vertical-align: middle; justify-content: center; align-items: center; line-height: 17px; width: 17px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #ff5a5a; color: #fff; font-size: 11px;}
				}
				& .content{}
				& .date{padding: 17px 0 0; font-size: 18px; font-weight: var(--fwm); letter-spacing: -0.02em; color: #878b8b; line-height: 1;}
			}
		}
	}
	& > li.board-no-result{
		
	}

	@media (width <= 1280px){
		gap: 50px 20px;
		& > li{
			& > a{
				& .txt{
					padding: 15px 10px 0;
					& .bd-type{font-size: 15px; padding: 0 0 1.5%;}
					& .title{line-height: 1.3; font-size: 22px;}
					& .date{font-size: 15px; padding: 2.5% 0 0;}
				}
			}
		}
	}
	@media (width <= 860px){
		grid-template-columns: repeat(2, 1fr); gap: 50px 15px;
	}
	@media (width <= 640px){
		grid-template-columns: repeat(1, 1fr); gap: 50px 15px;
		& > li{
			& > a{
				& .txt{
					position: relative; padding: 14px 10px 0;
					& .bd-type{font-size: 13px; padding: 0 0 6px;}
					& .title{font-size: 20px;}
					& .date{position: absolute; top: 15px; right: 15px; padding: 0; font-size: 13px;}
				}
			}
		}
	}
}


/* view */
.board-view{
	border-top: 1px solid #111;

	& .view-top{
		display: flex; flex-wrap: wrap; padding: 1.713% 2.06%; align-items: flex-start; gap: 20px;
		& .title{flex: 1; min-width: 0; font-size: 18px; font-weight: var(--fwm);}
		& .date{flex: 0 0 auto; margin: 0 0 0 auto; font-size: 14px; color: #6a6a6a; line-height: 1.2; padding: 6px 0 0;}
	}
	& .view-mid{
		padding: 2.74% 2.06%; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
	}
	& .view-bot{
		padding: 50px 0 0;

		& .board-btns{
			display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
			& .btn-board{border: 1px solid transparent; line-height: 58px; border-radius: 60px; background: var(--theme-blue); color: #fff; width: 200px; text-align: center; font-size: 16px; font-weight: var(--fwb); padding: 0 24px;}
		}
	}

	@media (width <= 640px){
		& .view-top{
			padding: 10px 0;
			& .title{font-size: 16px;}
		}
		& .view-mid{
			padding: 20px 10px;
		}
		& .view-bot{
			& .board-btns{
				& .btn-board{line-height: 42px; width: auto; flex: 1;}
			}
		}
	}
}


/* board-no-result */
.board-no-result{
	display: flex !important; 
	align-items: center !important; 
	justify-content: center !important; 
	gap: 0 !important;
	border-radius: 15px !important;
	background: #f5f5f5 !important;
	padding: 60px 30px !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	color: #aaa !important;
}


/* 통합검색결과 */
.search-result-info{
	margin: 0 0 var(--sec-cont-pad-top);
	& .search-keyword{
		&:before{content: "'";}
		&:after{content: "'";}
	}
	& .search-length{font-size: 1.2em; font-weight: var(--fwsb);}
}





/***************** 공통 게시판 / 갤러리 리스트 상단 - total, 검색 *****************/
.bo_top {position: relative; width: 100%; margin-bottom: 20px;}

.bo_top .total {float: left; line-height: 44px;}
.bo_top .total span {font-weight: 600;}

.bo_top .search {float: right; position: relative;}
.bo_top .search .blind {display: none;}
.bo_top .search select {width: 110px; vertical-align: middle;}
.bo_top .search input {font-size: 1rem; vertical-align: middle; box-sizing: border-box;}
.bo_top .search input[type="text"] {width: 240px;}
.bo_top .search input[type="submit"] {width: auto; background:#222; color: #fff; padding: 0 20px; cursor: pointer; border: none;}

@media only screen and (max-width: 860px) {
.bo_top {display: flex; flex-direction: column; margin-bottom: 10px;}
.bo_top .total {float: none; display: flex; order: 2; line-height: 40px;}
.bo_top .search {float: none; display: flex; justify-content: flex-start; order: 1; background: #f5f5f5; width: calc(100% - 40px); padding: 20px; margin-bottom: 10px;}
.bo_top .search select {margin-right: 5px; width: 90px;}
.bo_top .search input[type="text"] {display: block; width: calc(100% - 68px);}
.bo_top .search input[type="submit"] {display: block; width: 65px; margin: 0 0 0 3px;}
}

@media only screen and (max-width: 640px) {
.bo_top .search select {margin-right: 0px; margin-bottom: 5px; width: 100%;}
}



/***************** 공통 일반 게시판 리스트 *****************/
.bo_basic_list {border-top: 2px solid #222;}
.bo_basic_list table {width: 100%; text-align: center; table-layout: fixed;}

.bo_basic_list th {border-bottom: 1px solid #222; padding:15px 0; background: #f9f9f9;}
.bo_basic_list th.a {width: 12%;}
.bo_basic_list th.b {}
.bo_basic_list th.c {width: 12%;}
.bo_basic_list th.d {width: 12%;}

.bo_basic_list tbody tr:hover {background:#f5f5f5;}
.bo_basic_list tbody td {padding: 20px 0 20px; border-bottom: 1px solid #dbdbdb; vertical-align: middle;}
.bo_basic_list tbody td.tda {}
.bo_basic_list tbody td.tda span.notice {display: inline-block; width: 40px; vertical-align:baseline; text-align: center; font-size: 11px; color: #fff; background-color: #333; top: 50%; }
.bo_basic_list tbody td.tda span.notice::after {content: '공지'; font-size: 14px;}
.bo_basic_list tbody td.tdb {text-align: left; padding-left: 2%;}
.bo_basic_list tbody td.tdb a {display: inline-block; width: auto; max-width: 90%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; vertical-align: middle; margin-right: 5px;}
.bo_basic_list tbody td.tdb span.date {display: none;}
.bo_basic_list tbody td.tdb span.new {display: inline-block; width: 15px; height: 15px; line-height: 15px; border-radius: 50%; font-size: 10px; margin: 0 5px; text-align: center; background:#e60012; color:#fff;}
.bo_basic_list tbody td.tdb span.file {display: inline-block; margin: 0 5px;}
.bo_basic_list tbody td.tdb span.lock {display: inline-block; margin: 0 5px 0 0;}
.bo_basic_list tbody td.tdc {}
.bo_basic_list tbody td.tdd {}

@media only screen and (max-width: 1600px) {
.bo_basic_list th.a {width: 10%;}
.bo_basic_list th.b {}
.bo_basic_list th.c {width: 12%;}
.bo_basic_list th.d {width: 10%;}
.bo_basic_list tbody td.tdb a {max-width: 80%;}
}

@media only screen and (max-width: 860px) {
.bo_basic_list table {text-align: left;}
.bo_basic_list th {display: none;}
.bo_basic_list tbody tr {display: block; padding: 20px 0; border-bottom: 1px solid #e6e6e6; box-sizing: border-box;}
.bo_basic_list tbody td {border-bottom: 0px; padding: 0;}
.bo_basic_list tbody td.no_reulst{display: block; width: 100% !important; text-align: center; padding: 6rem 0;}
.bo_basic_list tbody td.tda {display: none; /*글번호*/}
.bo_basic_list tbody td.tdb {display: block; width: 100%; padding-left: 0; margin-bottom: 10px;}
.bo_basic_list tbody td.tdb a {max-width: 85%; margin-right: 0;}
.bo_basic_list tbody td.tdc {display: inline-block; color: #aaa;}
.bo_basic_list tbody td.tdc::after {content: ''; display: inline-block; width: 1px; height: 10px; background: #ccc; margin: 0 10px;}
.bo_basic_list tbody td.tdd {display: inline-block; color: #aaa;}
.bo_basic_list tbody td.tdd::before {content:'조회수'; margin-right: 3px;}
}

@media only screen and (max-width: 768px) {
.bo_basic_list tbody td.tdb a {max-width: 80%;}
}

@media only screen and (max-width: 460px) {
.bo_basic_list tbody td.tdb {margin-bottom: 5px;}
.bo_basic_list tbody td.tdb a {max-width: 70%;}
.bo_basic_list tbody td.tdb span.new {margin: 0 2px;}
.bo_basic_list tbody td.tdb span.file {margin: 0 2px;}
.bo_basic_list tbody td.tdb span.lock {display: inline-block; margin: 0 3px 0 0;}
}



/***************** 공통 게시글 작성하기 페이지 *****************/
.board_write_wrap .tit_area > div {}
.board_write_wrap .tit_area > div:after {content: ""; display: block; clear: both;}
.board_write_wrap .tit_area .t_label {float: left; display: block; vertical-align: middle; font-weight: 700; font-size: 1.2rem; width: 8%; margin-right: 1%; cursor: default;}
.board_write_wrap .tit_area .t_content{float: left; display: block; vertical-align: middle; width: 91%;}
.board_write_wrap .tit_area .short .t_content input {max-width: 300px;}
.board_write_wrap .content_area {margin-top: 2rem; min-height: 300px; box-sizing: border-box;}

@media screen and (max-width:640px){
.board_write_wrap .tit_area .t_label{float: none; display: block; width: 100%; margin-right: 0;}
.board_write_wrap .tit_area .t_content{float: none; display: block; width: 100%;}
.board_write_wrap .tit_area .short .t_content input {max-width: 200px;}
}



/***************** 글쓰기 에디터 커스텀 - 시작 *****************/
.note-frame {width: calc(100% - 2px) !important; border-radius: 0 !important; border-color: #dbdbdb !important; font-family: inherit !important;}
.note-placeholder {color: #bbb !important; padding: 1rem !important; font-weight: 300 !important;}
.note-editor .note-editing-area .note-editable {padding: 1rem !important; color: #222 !important;}
/* 230203 에디터 수정하면서 추가 */
.note-editor h4{clear: none !important; width: auto !important; padding: 0 !important; font-size: 1.5rem !important; font-weight: 500 !important;;}
.note-editor h4:before{display: none !important;}
.note-editor h4:after{display: none !important;}
.note-editor input{padding: 0; height: auto; width: auto;}
.note-editor label{height: auto; line-height: inherit;}
.note-editor .card-header{padding: 0.5rem; padding-top: 0 !important;}
.note-popover .popover-content>.note-btn-group,
.note-toolbar>.note-btn-group{margin-top: 0.5rem !important;}
.note-editor .modal{background-color: rgba(0, 0, 0, 0.5);}
/***************** 글쓰기 에디터 커스텀 - 끝 *****************/



.board_write_wrap .btn_area {margin-top: 2rem; text-align: center;}
.board_write_wrap .btn_area button {display: inline-block; padding: .8rem 1.5rem; font-size: 1.2rem; font-weight: 500;}
.board_write_wrap .btn_area .confirm {background: #111; color: #fff; margin-right: 0.5rem;}
.board_write_wrap .btn_area .cancel {background: #e5e5e5; color: #222;}



/***************** 첨부파일 *****************/
.fileform_wrap .b_files {font-size: 0;}
.fileform_wrap .b_files:after {content: ""; display: block; clear: both;}
.fileform_wrap .b_files:nth-child(n+2) {margin: 10px 0 0;}
.fileform_wrap .b_files > label {float: left; display: block; font-weight: 700; font-size: 1.2rem; width: 8%; margin-right: 1%;}
.fileform_wrap .custom-file {float: left; display: block; width: 91%; position: relative;}
.fileform_wrap .custom-file input {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}
.fileform_wrap .custom-file label {border: 1px solid #dbdbdb; font-size: 1rem; box-sizing: border-box; display: block; line-height: 44px; padding: 0 1rem; color: #aaa;}
.fileform_wrap .upload_files_del {position: absolute; top: 0; left: 0; height: 100%; border: none; background: #666; color: #fff; padding: 0.3rem 1rem; cursor: pointer; display: inline-block;}
.fileform_wrap .custom-file.upload {}
.fileform_wrap .custom-file.upload label {padding-left: 70px; cursor: auto;}
.fileform_wrap .custom-file.upload label.img {padding-left: 115px;}
.fileform_wrap .custom-file.upload img {position: absolute; width: 40px; height: 30px; left: 65px; top: 50%; transform: translateY(-50%); object-fit: fill;}

@media screen and (max-width:1024px){
.fileform_wrap .b_files > label {float: none; display: block; width: 100%; margin-right: 0;}
.fileform_wrap .b_files .custom-file {float: none; display: block; width: 100%;}
}

@media screen and (max-width:640px){
.fileform_wrap .custom-file label {max-width: 100%; height: 40px; line-height: 38px;}
.fileform_wrap .upload_files_del {padding: 0.3rem 0.7rem;}
.fileform_wrap .custom-file.upload img {width: 30px; height: 20px; left: 50px;}
.fileform_wrap .custom-file.upload label {padding-left: 50px;}
.fileform_wrap .custom-file.upload label.img {padding-left: 85px;}
}





/***************** 개발용 - 캡챠 *****************/
#google_recaptha{display: block; overflow: hidden; width: 0; height: 0; line-height: 0; font-size: 0; opacity: 0;}





/* 비밀번호 입력 */
/*.pw_layer_popup {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3000;
}
.pw_layer_popup .dimBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .5;
  filter: alpha(opacity=50);
}
.pw_layer_popup .pwd_popup_wrap {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 600px;
  height: auto;
  background-color: #fff;
  z-index: 10;
  padding: 1.6rem 2.4rem;
  box-sizing: border-box;
}
.pw_layer_popup h4{
  font-size: 1.2rem;
  color: #111;
  font-weight: 600;
  margin-bottom: 1rem;
  text-align: center;
}
.pw_layer_popup input[type="password"]{
  font-size: 1rem;
  padding: 0 1%;
  box-sizing: border-box;
  background: #f9f9f9;
  border: 1px solid #ddd;
  height: 48px;
  width: 96%;
  text-align: center;
}
.pw_layer_popup .btn_wrap{
  margin-top: 1.2rem; text-align: center;
}
.pw_layer_popup .btn_wrap button{
  display: inline-block; padding: 0.5rem 1rem; font-size: 1rem;
}
.pw_layer_popup .btn_wrap .btn_submit{
  background: #111; color: #fff;
}
.pw_layer_popup .btn_wrap .btn_cancel{
  background: #eee; color: rgb(65, 63, 63);
}
@media screen and (max-width:640px){
  .pw_layer_popup input[type="password"]{
    height: 40px;
  }
}
@media screen and (max-width:500px){
  .pw_layer_popup .pwd_popup_wrap{
    width: 75%;
    padding: 1.4rem 1.6rem;
  }
}*/
/***********************************************************************************/
/***************** 공통 게시판 리스트 - 비밀번호 입력 *****************/
.pw_layer_popup {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3000;}
.pw_layer_popup .dimBg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; filter: alpha(opacity=50);}
.pw_layer_popup .pwd_popup_wrap {display: block; position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 600px; height: auto; background-color: #fff; z-index: 10; padding: 1.6rem 2.4rem; box-sizing: border-box;}
.pw_layer_popup h4 {font-size: 1.2rem; color: #111; font-weight: 600; margin-bottom: 1rem; text-align: center;}
.pw_layer_popup input[type="password"] {font-size: 1rem; width: 96%; height: 48px; padding: 0 1%; background: #f9f9f9; border: 1px solid #ddd; box-sizing: border-box; text-align: center;}
.pw_layer_popup .btn_wrap {margin-top: 1.2rem; text-align: center;}
.pw_layer_popup .btn_wrap button {display: inline-block; padding: 0.5rem 1rem; font-size: 1rem;}
.pw_layer_popup .btn_wrap .btn_submit {background: #111; color: #fff;}
.pw_layer_popup .btn_wrap .btn_cancel {background: #eee; color: rgb(65, 63, 63);}

@media screen and (max-width:640px){
.pw_layer_popup input[type="password"] {height: 40px;}
}

@media screen and (max-width:500px){
.pw_layer_popup .pwd_popup_wrap {width: 75%; padding: 1.4rem 1.6rem;}
}






/*댓글*/
.comment { margin:20px 0 ;}
.comment .comment_input {position:relative; width:100%}
.comment p.c_byte { color:#999; padding:10px 0; }
.comment .comment_input table {width:100%;   border:1px solid #333}
.comment .comment_input th {padding:5px !important  }
.comment .comment_input td {width:90px}
.comment .comment_input textarea {float:left; width:100%; height:30px; outline:none; border:0; color:#999; overflow-y:hidden; padding:0!important; }
.comment .comment_input a {float:right; width:100%; line-height:50px; text-align:center;  background:#333; color:#fff;  border-left:1px solid #202020}
.comment .comment_input a:hover {}

.comment p.c_total { margin:20px 0 10px 0}
.comment .comment_list {border-top:1px solid #e6e6e6}
.comment .comment_list li {position:relative; border-bottom:1px solid #e6e6e6; padding:15px 0}
.comment .comment_list p.m_info { }
.comment .comment_list p.m_info span.id {  }
.comment .comment_list p.m_info span.date { color:#999; margin-left:10px;}
.comment .comment_list p.ment { color:#666; padding-top:5px}
.comment .comment_list p.btn{ padding-top:5px }
.comment .comment_list p.btn span{ margin-right:10px;   }
.comment .comment_list p.btn span.reply{background: url('./img/icon_reply.gif') 0px 3px no-repeat; padding-left:15px}
.comment .comment_list p.btn span a{ color:#999; font-size:12px}
.comment .comment_list li div.comment_input { margin:10px 2% 0 2%; width:96%}

/* 관리자 댓글 */
 .admin_comment{}
.admin_comment .info{}
.admin_comment .info:after{content: ""; display: block; clear: both;}
.admin_comment .info .who{float: left; width: 200px;}
.admin_comment .info .when{float: left; width: calc(100% - 200px); text-align: right;}
.admin_comment .text{background-color: #f5f5f5; box-sizing: border-box; padding: 25px; height: 100px; overflow-y: auto;}


/* ************************ 댓글 기능 ************************ */
.comment_area{
	& .amount{border-bottom: 1px solid #111; padding: 0.5rem 0; font-size: 1.05rem;}
	& .write_wrap{
		margin-top: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #ddd;
		& .write{
			display: flex; flex-wrap: wrap; border-radius: 10px; overflow: hidden;
			& textarea{flex: 1; min-width: 0; border: none; background-color: #f9f9f9; height: 110px; padding: 1.5rem; outline: none; font-size: 15px; font-family: inherit; resize: none;}
			& .submit{display: flex; justify-content: center; align-items: center; background-color: #111; color: #fff; padding: 0 4rem; font-size: 1.1rem; font-weight: 600;}
		}
	}
	& .comment_list{
		& li{
			position: relative; border-bottom: 1px solid #ddd; padding: 2rem 140px 2rem 0;
		}
		& .info{
			display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1rem;
			& .name{display: block;}
			& .date{display: block; color: #777; font-size: 0.9rem;}
		}
		& .btn_area{
			position: absolute; right: 0; top: 1.5rem; display: flex; flex-wrap: wrap; gap: 6px;
			& .btn{font-size: 14px; padding: 0 12px; line-height: 30px;}
		}
	}

	@media (width <= 1024px){
		& .write_wrap{
			padding-bottom: 20px; margin-top: 20px;
			& .write{
				& .submit{padding: 0 50px; font-size: 1rem;}
			}
		}
	}
	@media (width <= 860px){
		& .write_wrap{
			& .write{
				& textarea{padding: 20px;}
			}
		}
	}
	@media (width <= 640px){
		& .write_wrap{
			& .write{
				flex-direction: column;
				& .submit{padding: 15px 0;}
			}
		}
	}
}