@charset "utf-8";

/* 바꿔서 사용하는 영역 s*/
    :root {
        --main-bg: #656565; /* 버튼, 페이지네이션 */
        --sub-bg: #2a95d3;

        --border-dark:#888888; /* table 테두리 - 폼메일, 게시판 */
        --border-light:#eee; /* table 테두리 - 폼메일, 게시판 */
        
        --form-input-height: 34px; 
        --form-title:#ffffff; /* label 컬러 */
        --form-title-bg:#f5f5f5; /* label 백그라운드 */
        
        --form-input-border:#dedede; /* input 감싸는 div 테두리 */
        --form-input-bg:#fafafa; /* input 백그라운드 */

        --view-max-width: 1024px; /* board_view 페이지 max-width */
    }
/* 바꿔서 사용하는 영역 e*/

/* reset(기본셋팅 영역) s */
table > a:hover { text-decoration: underline; }
a:focus, input:focus, select:focus, button:focus, textarea:focus { outline: none; }
input::placeholder, textarea::placeholder { color: #777777; }
input[type="text"], input[type="password"] ,textarea { width: 100%; height: var(--form-input-height); padding: 5px; background: var(--form-input-bg); line-height: var(--form-input-height); border:none; }
input[type="text"], input[type="submit"], input[type="password"], select, textarea, button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type="button"] { -webkit-border-radius: 0; }
select { padding: 5px 10px; outline: none; background: url('/resources/img/common/select-arw.png') no-repeat center/contain; background-position: 90%; background-size: 10px; }
textarea { min-height: 150px; }
.capt_img { width: 100px; height: var(--form-input-height); }
#captcha { width: 130px; height: var(--form-input-height); }
.capt_btn { display: inline-block; width: var(--form-input-height); height:var(--form-input-height); background: url('/resources/img/common/reset_ico.png') no-repeat center/20px; cursor: pointer; text-indent: -9999px; border: 1px solid var(--border-light); }

/* 라디오 & 체크박스 */
input[type="radio"], input[type="checkbox"] { display: none; }
input[type=radio] + label { display: inline-block; margin-right: 12px; padding-left: 27px; min-height: var(--form-input-height); line-height: var(--form-input-height); cursor: pointer; position: relative; }
/* input[type=radio] + label::before { content: ''; position: absolute; left:0; top:50%; transform: translateY(-50%); width: 20px; height:20px; background: white; border-radius: 50%; border:solid 1px #777; } */
input[type=radio]:checked + label::before { background: var(--sub-bg) url("/resources/img/common/check_w.png") center/contain no-repeat; border: solid 1px transparent; }

input[type="checkbox"] + label { display: inline-block; margin-right: 12px; padding-left: 27px; min-height: var(--form-input-height); line-height: var(--form-input-height); cursor: pointer; position: relative; }
input[type="checkbox"] + label::before { content: ''; position: absolute; left:0; top:50%; transform: translateY(-50%); width: 20px; height:20px; background: white; border:solid 1px #777; }
input[type="checkbox"]:checked + label::before { background: var(--sub-bg) url("/resources/img/common/check_w.png") center/contain no-repeat; border: solid 1px transparent; }

/* 인풋 자동완성 */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: var(--main-black); -webkit-box-shadow: 0 0 0px 1000px var(--form-input-bg) inset; box-shadow: 0 0 0px 1000px var(--form-input-bg) inset; transition: background-color 5000s ease-in-out 0s; }
input:autofill, input:autofill:hover, input:autofill:focus, input:autofill:active { -webkit-text-fill-color: var(--main-black); -webkit-box-shadow: 0 0 0px 1000px var(--form-input-bg) inset; box-shadow: 0 0 0px 1000px var(--form-input-bg) inset; transition: background-color 5000s ease-in-out 0s;    }

/* 테이블 슬래시 */
.diagonal { background: url("/resources/img/common/diagonal.png") no-repeat center; background-size:100% 100%; letter-spacing: -1px;}
.noresize { resize: vertical; }
/* reset(기본셋팅 영역) e */    







/* 게시판 버튼 */
.flt-btn-wrap { width:100%; display: flex; justify-content: right; margin-top:15px; }
.flt-btn-wrap a { width:60px; height:30px; display: flex; align-items: center; justify-content: center; margin-left:10px; font-size: 15px; cursor: pointer; background: white; border:1px solid var(--border-dark); }
.flt-btn-wrap .delete-btn { background: var(--border-light); } /* 삭제버튼 */
.flt-btn-wrap .answer-btn { padding-left:15px; background: url("/resources/img/board/comment/comment_ico3.png") no-repeat 10px/9px ; } /* 답변버튼 */
.flt-btn-wrap .post-btn { width: 100px; height: 40px; display: flex; align-items: center; justify-content: center; border: solid 1px var(--sub-black); cursor: pointer; transition: 0.3s ease-out; background: white; color:var(--sub-black); } /* 글쓰기 버튼 */
.flt-btn-wrap .post-btn:hover { background: var(--key-color); border: 1px solid var(--key-color); color:white; }

.ctr-btn-wrap { width:100%; margin-top:60px; display: flex; justify-content: center; flex-wrap: wrap; }
.ctr-btn-wrap a,.ctr-btn-wrap button { width: 150px; height:50px; margin: 0 10px ; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 5px; transition: 0.3s ease-out; }
.ctr-btn-wrap .to-next { background: var(--main-black); color:white; }
.ctr-btn-wrap .to-next:hover { background: #000; }
.ctr-btn-wrap .to-back { border: solid 1px var(--main-black); color: var(--main-black); }
.ctr-btn-wrap .to-back:hover { background:#f5f5f5; }

@media screen and (max-width: 500px){
    .ctr-btn-wrap a,.ctr-btn-wrap button { width:100%; margin: 10px 0; }
}


/* 페이지네이션 */
.pagination { width:100%; display:inline-block; margin: 50px auto 0; text-align: center; }
.pagination button, .pagination a {	width: 26px; height: 26px; margin: 0 2px; color: #5d6473; font-size: 13px; line-height: 24px; font-weight:400; display: inline-block; text-decoration: none; vertical-align: middle; }
.pagination button:hover, .pagination a:hover { text-decoration:underline;}
.pagination .selected {	color: #fff; background-color: var(--main-bg); font-weight: 500;}
.pagination .prev,.pagination .next, .pagination .p-prev,.pagination .n-next{ width: 26px;height: 26px; transition:.3s ease-in-out; background-image: url("/resources/img/common/page-arrow.png"); background-repeat: no-repeat; border: 1px solid #fff; text-indent: -999em;	vertical-align: middle;}
.pagination .p-prev {background-position: -8px 5px;}
.pagination .prev {background-position: -59px 5px;}
.pagination .next { background-position: -109px 5px;}
.pagination .n-next {background-position: -159px 5px;}
.pagination .prev:hover,.pagination .next:hover , .pagination .p-prev:hover,.pagination .n-next:hover{	background-color: transparent;	border-color:  #4d4d4d;}

@media screen and (max-width: 768px){
    .pagination a { margin:0; width:24px; font-size:14px;}
    .pagination .prev, .pagination .next, .pagination .p-prev, .pagination .n-next { width:24px;}
    .pagination .p-prev { background-position: -8px 15px;}
    .pagination .prev { background-position: -61px 15px;}
    .pagination .next {background-position: -110px 15px;}
    .pagination .n-next { background-position: -160px 15px;}
}



/* 게시판 list */
.board_list { width: 100%; margin-top: 30px; background-color: #fff; }
.board_list th { background-color: #fcfcfc; font: 700 17px/100% var(--font-family); border-bottom: 1px solid #eee; padding: 20px 10px; text-align: center; }
.board_list td { padding: 20px 10px; text-align: center; border-bottom: 1px solid var(--border-light); }
.board_list td.cont-non { padding: 60px 0; } 
.board_list .list_num { width: 8%; }
.board_list .list_tit { width: 62%; }
.board_list .list_tit a { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board_list .list_wtr { width: 12%; }
.board_list .list_date { width: 18%; }

.board_list.list_qna .list_num { width:8%; }
.board_list.list_qna .list_tit { width:auto; }
.board_list.list_qna .list_wtr { width:12%; }
.board_list.list_qna .list_ect { width:80px; } /* QNA 댓글,좋아요 창 추가 */
.board_list.list_qna .list_stat { width:110px; } /* QNA 상태 창 추가 */
.board_list.list_qna .list_date { width:120px; }

/* 게시판 list - 답변완료 표시 */
.qna_ico { display: inline-block; width:100%; padding: 5px 0; font-size: 15px; letter-spacing: -1px; }
.qna_ico1 { color:#333; background: #fdd340; } /* 확인 중 */
.qna_ico2 { border: 1px solid #ddd; color:#555; background:#f5f5f5; } /* 답변 완료 */
.qna_ico3 { background:#555; color:#f5f5f5; } /* 답변 대기 */
.secret { display: inline-block; width:20px; height:20px; background:url('/resources/img/board/comment/secret.png') no-repeat center/contain; text-indent: -99999px; overflow: hidden; position: relative; top:2px; margin-right:6px; } /* 비밀 글 */
.answer_btn { display:inline-block; margin-left:10px; font-size: 15px; }
    
@media screen and (max-width: 768px){
    .board_list th, .board_list td { padding: 20px 5px; font-size: 14px; }
    .non_mobile { display: none; }
    .board_list .list_tit {width:70%;}
    .board_list .list_date { width:30%; }
}

/* 게시판 list - 검색바 */
.search_form form { width: 60%; float: right; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; }
.search_form select { width: 20%; height: 40px; padding-left: 14px; border: solid 1px var(--border-light); background-color: #fff; }
.search_form .searcher-wrap { width: calc(80% - 110px); height: 40px; padding: 0 5px; position: relative; border: 1px solid var(--border-light); background: white; }
.search_form .searcher-wrap .txt-del-btn { position: absolute; right:15px; top:50%; transform: translateY(-50%); width:18px; height:18px; background:#adadad url('/resources/img/common/close_w.png') no-repeat center/contain; overflow: hidden; text-indent: -99999px; border-radius: 50%; cursor: pointer; display: none; }
.search_form input[type="text"] { width: calc(100% - 34px); height: 100%; background: white; }
.search_form .sch_btn { width: 100px; height: 40px; font-size: 700 16px / 40px var(--font-family); text-align: center; background-color: var(--main-black); color:white; border: solid 1px var(--main-bg); cursor: pointer; transition: 0.3s ease-out; }
.search_form .sch_btn:hover { background: var(--key-color); }

@media screen and (max-width:1100px){
    .search_form form { width: 80%; }
}
@media screen and (max-width:768px){
    .search_form form {width: 100%; }
}
@media screen and (max-width:500px){
    .search_form select { width: 30%; }
    .search_form .searcher-wrap { width: 70%; margin: 0; }
    .search_form .sch_btn { width: 100%; margin-top: 10px; }
}



/* 게시판 view */
.view_table { width:100%; max-width:var(--view-max-width); margin: 0 auto; border-bottom:1px solid var(--border-light); }
.view_table .title { margin-bottom:40px; padding-bottom:30px; font-size:32px; font-weight: 600; letter-spacing: -0.5px; }
.view_table .sub-title { display: flex; justify-content: space-between; align-items: end; margin-left:2px; padding-bottom:30px; border-bottom:1px solid var(--border-light); font-size: 16px; font-weight: 400; color:#777; }
.view_table .count-list { display: flex; align-items: end; }
.view_table .count-list p { display: inline-block; margin-right: 20px; }
.view_table .count-list p:last-child { margin-right: 0; }

.view_table .link { font-size: 16px; padding: 20px 30px; margin:30px 0; background: #f4f4f4; border-radius: 5px; }
.view_table .file { font-size: 16px; padding: 20px 30px; margin:0px 0 40px; background: #f4f4f4; border-radius: 5px; }
.view_table .link a { position: relative; padding-left:15px; }
.view_table .link a:hover,.view_table .file a:hover { text-decoration: underline; text-underline-offset: 4px; }
.view_table .link a::before { content: ''; position: absolute; left:0px; top:10px; width:3px; height:3px; background: var(--border-dark); border-radius: 50%; }
.view_table .link a::after { content: ''; position: absolute; right:-10px; top:55%; transform: translate(100%, -50%); width: 16px; height:16px; background: url('/resources/img/common/link_ico.png') no-repeat center/contain; }

.view_table .file { display: flex; }
.view_table .file .label { width: 90px; font-weight: 600; display: inline-block; padding:2px 0; }
.view_table .file .down-list { width:calc(100% - 90px); }
.view_table .file .down-list a { display: block; padding:2px 15px 2px; max-width: fit-content; position: relative; }
.view_table .file a::before { content: ''; position: absolute; left:0px; top:12px; width:3px; height:3px; background: var(--border-dark); border-radius: 50%; }
.view_table .file a::after { content: ''; position: absolute; right:5px; top:60%; transform: translate(100%, -50%); width: 16px; height:16px; background: url('/resources/img/common/down_ico.png') no-repeat center/contain; }
.view_table .view_td { min-height:300px; line-height: 1.4; padding: 40px 0 40px; }
.view_table .view_vd { padding: 40px 0px; }

.table_bottom { position:relative; width:100%; max-width:var(--view-max-width); text-align:center; margin: 0 auto;}

@media screen and (max-width: 768px){
    .view_table th { font-size: 16px; }
    .view_table td { padding: 15px 5px; font-size: 15px;}
    .view_table .link { padding: 20px; margin: 20px 0; }
    .view_table .file { padding: 20px; margin: 0px 0 20px; }
}
@media screen and (max-width: 500px){
    .view_table .title { padding-bottom:0; }
    .view_table td {font-size: 14px;}
}
    /* 에디터 내부 스타일 X */
    .view_td img { max-width: fit-content; display: inline-block; }
    .view_td * { font: revert; }
    .view_td ul { list-style: disc; }
    .view_td ol { list-style: auto; }

    /* like btn */
    .like_span { vertical-align:middle; display:inline-block; margin-right:20px; }
    .like_btn { font-weight: 600; color:#333; float: left; text-align: center; vertical-align: middle; position: relative; }
    .like_btn .ico { vertical-align:middle; transition: .2s ease; margin-right:5px; display:inline-block; width:20px; height:20px; background:url("/resources/img/board/comment/like_ico.png") no-repeat center/contain;}
    .like_btn.on .ico { background:url("/resources/img/board/comment/like_on_ico.png") no-repeat center/contain; } 
    .like_btn .txt {vertical-align:middle; display:inline-block;}
    .like_count {line-height:140%}

    /* hate btn */
    .hate_span { vertical-align:middle; display:inline-block; margin-right:20px; }
    .hate_btn { font-weight: 600; color:#333; float: left; text-align: center; vertical-align: middle; position: relative; }
    .hate_btn .ico { vertical-align:middle; transition: .2s ease; margin-right:5px; display:inline-block; width:20px; height:20px; background:url("/resources/img/board/comment/hate_ico.png") no-repeat center/contain;}
    .hate_btn.on .ico { background:url("/resources/img/board/comment/hate_on_ico.png") no-repeat center/contain; } 
    .hate_btn .txt {vertical-align:middle; display:inline-block;}
    .hate_count {line-height:140%}

    /* 게시판 view - 답변 */
    .view_td.view_rep { min-height:100px; padding: 20px; margin-bottom:40px; background:#fafafa; border:1px solid #f5f5f5; border-radius: 5px; }
    .answer_tit { padding-left:14px; margin-bottom:10px; background: url("/resources/img/board/comment/comment_ico3.png") no-repeat left center/9px; font-weight: 600; }
    .view_td.view_rep pre { padding: 0px 14px; }

    /* 게시판 view - 페이지 댓글 처리 */
    .comment-wrap { max-width: var(--view-max-width); margin:0 auto; }
    .comment-wrap .reply-line { padding: 12px 20px; background:#f5f5f5; border-bottom:solid 1px #ddd; font-size:14px; }
    
        /* 게시판 view - 댓글 입력창 */
        .cmt_reply_contents { margin-top:40px; border:1px solid #b3b3b3; }
        .cmt_reply_contents .reply_top { background:#fff; padding:10px 20px; }
        .cmt_reply_contents .reply_top .name { display: inline-block; color: #555; font-weight: 600; position: relative; margin-top:5px; }
        .cmt_reply_contents .reply_top .name::before { content:''; display: inline-block; width:18px; height:18px; background:url("/resources/img/board/comment/comment_ico.png") no-repeat center ; margin-right: 6px; position: relative; top:3px; }
        .cmt_reply_contents textarea { padding:0 20px; min-height:80px; border:none; background: none; margin-bottom: 10px; font-size: 14px; } 
        .cmt_reply_contents .reply_bottom { border-top: 1px solid #eee; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; }
        .cmt_reply_contents .reply_bottom .counter { font-size: 14px; }
        .reg_btn { width:auto; display:inline-block; padding: 4px 20px; transition: .3s ease; background:#555; color:white; }
        .cmt_login { text-align:center; padding:30px 20px; letter-spacing:-.8px; background: #fafafa; }
        .cmt_login a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

        /* 게시판 view - 댓글 페이지네이션 */
        .comment-wrap .pagination { margin: 20px auto 0; }
        .comment-wrap .pagination button,.comment-wrap .pagination a { color:#777; }
        .comment-wrap .pagination .selected { background-color: initial; color:#777; font-weight: 600; border: 1px solid #ddd; }

        /* 게시판 view - 댓글 */
        .cmt_item { padding: 15px 10px; border-bottom: 1px solid #ebedf2; position: relative;  font-size: 16px; }
        .cmt_item div[id^="tr_reply_div_"] .top{ position: relative; padding:15px 15px 30px; border-top:1px solid #ebedf2;  }
        .cmt_item.cmt1 { padding-left:3%;}
        .cmt_item.cmt2 { padding-left:6%;}
        .cmt_item.cmt3 { padding-left:9%;}
        .cmt_item.cmt4 { padding-left:12%;}
        .cmt_item.cmt5 { padding-left:15%;}
        .cmt_item .cmt_name { display: inline-block; position: relative; color: #5d6473; font-weight: 600; }
        .cmt_item:not(.cmt0) .cmt_name::before { content:''; display: inline-block; width:9px; height:10px; background:url("/resources/img/board/comment/comment_ico3.png") no-repeat; position:absolute; left:-19px; top:6px; }
        .cmt_item .date { float:right; color:#afafaf; font-size: 14px; }
        .cmt_item .cmt_txt { margin-top:6px; line-height: 150%; }
        .cmt_item .cmt_txt span { line-height: 150% }
        .cmt_item .cmt_txt.edt_date { text-align: right; color: #afafaf; font-size: 14px; }
        .cmt_item .cmt_txt textarea { border: 1px solid #b3b3b3; margin-bottom:10px; min-height: 100px; }



/* 게시판 edit, rep, */
.edit-table { border-top:solid 1px #dedede; }
.edit-table th { width:200px; padding: 15px; border-bottom: solid 1px #dedede; border-right:solid 1px #dedede; background: #fafafa; }
.edit-table td { width:calc(100% - 200px); padding: 15px; border-bottom: solid 1px #dedede; }
.edit-table td > iframe {width: calc(100% + 2px) !important;} /*board write 에디터 잘리는 문제*/



/* 게시판 check */
.alert-wrap { display: fixed; width: 100vw; height:100vh; }
.alert-inner { width:96%; max-width:500px; padding: 40px 30px ; position: absolute; left:50%; top:45%; transform: translate(-50%,-50%); border: solid 1px #ddd; }
.alert-inner h2 { font-size: 30px; font-weight: 600; }
.alert-inner .sub-txt { margin-top:12px; color:#777; }
.alert-inner .alert-input { margin-top:50px; }
.alert-inner label { display: block; font-weight: 600; margin-bottom: 8px; }
.alert-inner input { width:100%; padding:5px; border:none; border-bottom: solid 1px #dedede; background: white; }
.alert-btn-wrap { margin-top:20px; }
.alert-btn-wrap button { width: 100%; height:46px; background-color: #222; color:white; border-radius: 5px; }
.alert-btn-wrap .back_btn { display:block; height:46px; line-height: 46px; margin-top: 10px; border: 1px solid #ddd; border-radius: 5px; }



/* 게시판 view - image1 skin */
.img_brd1 ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:2%; gap:2%; }
.img_brd1 li > a { display:block; width:100%; height:100%; position:relative; overflow: hidden; }
.img_brd1 li .hover {  z-index:1;  transition:.3s ease; transform:translateY(100%); position:absolute; width:100%; left:0; bottom:0; text-align:center; padding: 40px 15px 20px; display:block; background: linear-gradient(0deg, rgba(18,94,172,1) 30%, rgba(18,94,172,0) 100%);  color:#fff;}
.img_brd1 li .txt { padding:10px 25px 15px; display:block; position:absolute; width:100%; z-index:1; left:50%; bottom:0; max-width:90%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; color:#fff; text-align:center; transform:translateX(-50%); border-top:1px dotted #fff; transition:.3s ease; }
.img_brd1 li > a::before { content:''; display:inline-block; position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 40%); z-index:1;}
.img_brd1 li > a .img { border:1px solid #ddd; border-bottom:0; width:100%; height:0; position:relative; overflow:hidden; padding-bottom: 75%; }

.img_brd1 li > a .img img { transition:.3s ease; background:#fff; position:absolute; top:50%; left:50%; transform:translate3D(-50%, -50%, 0); width: 100%;}
.img_brd1 li > a .hover .hover_tit {max-width:100%;overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block; margin-bottom:5px;}
.img_brd1 li > a .hover .more_btn { transition:.3s ease; border:1px solid #fff;  color:#fff; display:inline-block; padding:4px 15px; background:url("/resources/img/gallery/more_ico.png") no-repeat 150% center; }
.img_brd1 li:hover > a .txt {opacity:0}
.img_brd1 li:hover > a .img img { transform:translate3D(-50%, -50%, 0) scale(1.2);}
.img_brd1 li:hover > a .hover { transform:translateY(0);}
.img_brd1 li:hover > a .hover .more_btn { padding:4px 35px 4px 15px; background-position:90% center;}

@media screen and (max-width: 768px){
    .img_brd1 ul { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 500px){
    .img_brd1 ul { grid-template-columns: repeat(1, 1fr); }
}



/* 게시판 view - image2 skin */
.img_brd2 ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:2%; gap:2%; }
.img_brd2 li { position: relative; }
.img_brd2 li > a { display:block; position:relative; border: 1px solid #ddd; padding: 18px 22px; }
.img_brd2 li::before {transition: all .1s ease-in-out .1s; top: 0; left: 0; content:'';}
.img_brd2 li::after{transition: all .1s ease-in-out .2s; top: 0; right: 0; content:'';}
.img_brd2 li a::before {transition: all .1s ease-in-out .3s; bottom: -1px; right: 0; content:'';}
.img_brd2 li a::after{transition: all .1s ease-in-out .4s; bottom: -1px; left: -1px; content:'';}
.img_brd2 li::before, .img_brd2 li::after, .img_brd2 li a::before, .img_brd2 li a::after { content: ""; display: block; position: absolute; background-color: var(--main-bg); z-index: 1; }
.img_brd2 li::before, .img_brd2 li a:before {width: 0%; height: 3px;}
.img_brd2 li::after, .img_brd2 li a:after {width: 3px; height: 0%;}
.img_brd2 li:hover::after, .img_brd2 li:hover a::after {height: 100%;}
.img_brd2 li:hover::before, .img_brd2 li:hover a::before {width: 100%;} 

.img_brd2 li > a .img { width:100%; height:0; position:relative; overflow:hidden; background: #ebebeb; padding-bottom: 75%; }
.img_brd2 li > a .img img { transition:.3s ease; background:#fff; position:absolute; top:50%; left:50%; transform:translate3D(-50%, -50%, 0); width: 100%;}
.img_brd2 li:hover > a .img img { transform:translate3D(-50%, -50%, 0) scale(1.2);}

.img_brd2 li .title {font-size: 22px; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;  overflow: hidden;  padding: 20px 0 7px; transition: all .2s ease;}
.img_brd2 li .date {padding-bottom: 7px; color: #777;  font-size: 16px;}
.img_brd2 li .txt {overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 140%; height: 2.7em;  text-align: left; word-wrap: break-word; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #777;  font-size: 18px; word-break: break-all; font-size: 16px;}

.ImgCover li > a .img img.wide {height: 100%; width: auto;}
.ImgCover li > a .img img.tall {width: 100%; height: auto;}

.ImgContain li > a .img img.wide {width: 100%; height: auto;}
.ImgContain li > a .img img.tall {width: auto; height: 100%;}



/* 게시판 list - youtube skin */
.iframe-wrap { width:100%; height:0px; padding-bottom:56.25%; position: relative; background:#ddd; }
.iframe-wrap iframe { width:100%; height:100%; position: absolute; left:0px; top:0px; }
.iframe-wrap img { width:100%; height:100%; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); object-fit: cover; transition: 0.3s; }
    
.media-wrap ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:2%; }
.media-wrap li { width:100%; position: relative; }
.media-wrap li:hover .media-info-wrap { opacity: 1; }
.media-info-wrap { display: flex; flex-direction: column; justify-content: end; flex-wrap:wrap; padding: 32px 30px; position: absolute; left:0px; top:0px; width:100%; height:100%; background: rgba(0,0,0,.2); color:white; transition: 0.3s; opacity: 0; pointer-events: none; cursor: pointer; }
.media-info-wrap p { width: 100%; }
.media-info-wrap a { color:white; }
.media-info-wrap .info-tit { font:500 20px/125% 'Spoqa Han Sans Neo'; }
.media-info-wrap .info-name { margin-top:5px; font:400 16px/125% 'Spoqa Han Sans Neo'; }

    /* 게시판 팝업 */
    .pop-wrap { display:none; position:fixed; width:100%; max-width: 1280px; padding: 50px 0px; min-height: 300px; max-height:90vh; left:50%; top:50%; transform:translate(-50%,-50%); background: #fff; overflow-y: auto; transition: all 0.3s; z-index: 502; }
	.pop-wrap::-webkit-scrollbar { width: 5px; }
	.pop-wrap::-webkit-scrollbar-thumb { max-height:80%; background-color: var(--sub-black); border-radius: 7px; }
	.pop-wrap::-webkit-scrollbar-track { background: #ddd; border-radius: 7px;}
	.pop-wrap.active { display:block; transform:translate(-50%,-50%); box-shadow: 0px 2px 50px rgba(0,0,0,0.15); }
    
    .close { width: 36px; height: 36px; cursor: pointer; position: absolute; right: 30px; top: 30px; z-index: 600; }
	.close span { display: block; width: 2px; height: 32px; background-color: var(--main-black); position: absolute; top: 9px; left: 17px; transform: rotate(45deg); }
	.close span:last-child { transform: rotate(-45deg);}

    .pop-cont-wrap { width: 100%; max-width:1024px; margin:0 auto; position: relative; }

    .pop-cont-wrap .pop-info-wrap { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; }
    .pop-cont-wrap .pop-info-wrap .pop-tit { max-width: 600px; font:700 24px/125% 'SUIT'; }
    .pop-cont-wrap .pop-info-wrap .pop-cc { text-align: right; font:500 15px/125% 'SUIT'; }
    .pop-cont-wrap .pop-info-wrap .pop-cc p { margin-bottom: 6px; }
    .pop-cont-wrap .pop-info-wrap .pop-cc span { font-weight: 200; display: inline-block; font-size: 17px; margin-right: 14px; }
	
    @media screen and (max-width: 1280px){
        .pop-wrap { width: 100vw; height: 100%; max-height: 100%; padding: 40px; }
        .pop-cont-wrap .pop-info-wrap { display: block; }
        .pop-cont-wrap .pop-info-wrap .pop-cc { text-align: left; margin-top: 20px; }
    }
    @media screen and (max-width: 1024px){
        .media-wrap ul { grid-template-columns: repeat(2, 1fr); }
        .media-info-wrap { opacity: 1; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); } 
    }
    @media screen and (max-width: 768px){
        .media-wrap ul { grid-template-columns: repeat(1, 1fr); }
        .pop-cont-wrap .pop-info-wrap .pop-tit { max-width: calc(100% - 50px); }
    }
    @media screen and (max-width: 500px){
        .pop-wrap { padding: 40px 20px; }
    }



/* FAQ 자주 묻는 질문 */
.faq .faq_wrap { display: flex; flex-direction: column; gap: 16px; }
.faq .faq_wrap .faq_box { padding: 32px; background-color: #fff; border-radius: 24px; border: 1px solid #ddd; }
.faq .faq_wrap .faq_q { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.faq .faq_wrap .ico { font: 800 32px/100% var(--font-family); }
.faq .faq_wrap .con { font: 400 19px/130% var(--font-family); }
.faq .faq_wrap .con > span {font-weight: 500;}
.faq .faq_wrap .faq_a { margin-top: 24px; padding: 32px; border-radius: 16px; background-color: #fafafa; display: none; }
.faq .faq_wrap .faq_a .ico { width: 50px; color: var(--key-color); float: left; }
.faq .faq_wrap .faq_a .con { width: calc(100% - 50px); float: left; }
.faq .faq_wrap .faq_a .con .txt { font: 400 17px/130% var(--font-family); }

@media screen and (max-width: 1024px){
    .faq .faq_wrap { gap: 12px; }
    .faq .faq_wrap .faq_box { border-radius: 20px; }
    .faq .faq_wrap .ico { font-size: 30px; }
    .faq .faq_wrap .con { font-size: 18px; }
    .faq .faq_wrap .faq_a .con .txt { font-size: 16px; }
}
@media screen and (max-width: 768px){
    .faq .faq_wrap .ico { font-size: 28px; }
    .faq .faq_wrap .con { font-size: 17px; }
    .faq .faq_wrap .faq_a .ico { width: 40px; }
    .faq .faq_wrap .faq_a .con { width: calc(100% - 40px); }
}
@media screen and (max-width: 480px){
    .faq .faq_wrap .faq_box { padding: 24px; border-radius: 16px; }
    .faq .faq_wrap .ico { font-size: 24px; }
    .faq .faq_wrap .con { font-size: 16px; }
    .faq .faq_wrap .faq_a { padding: 24px; border-radius: 12px; }
    .faq .faq_wrap .faq_a .ico { width: 100%; float: unset; }
    .faq .faq_wrap .faq_a .con { width: 100%; margin-top: 6px; float: unset; }
    .faq .faq_wrap .faq_a .con .txt { font-size: 15px; }
}


/* parsley S */
input.parsley-success,
select.parsley-success,
textarea.parsley-success { color: #468847; background-color: #DFF0D8; border: 1px solid #D6E9C6; }

input.parsley-error,
select.parsley-error,
textarea.parsley-error { color: #B94A48; background-color: #F2DEDE; border: 1px solid #EED3D7; }

.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  color: #B94A48;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}
/* parsley E */


/* CNC Plus - 온라인문의 */

/* form-mail */
.inquiry .basic_form { display: flex; flex-direction: column; gap: 40px; max-width: 920px; padding: 40px; border-radius: 24px; border: 1px solid #ddd; background-color: #fff; margin: 0 auto; }
.inquiry .basic_form .frm-itm .frm-tit { font: 700 18px / 100% var(--font-family); margin-bottom: 12px; }
.inquiry .basic_form .frm-itm .frm-tit .required { color: var(--point-color); }
.inquiry .basic_form .frm-itm .frm-desc select { font: 400 15px/100% var(--font-family); padding: 12px 40px 12px 12px; }
.inquiry .basic_form .frm-itm .frm-desc.frm-txt { padding: 8px; background-color: #fafafa; border-radius: 8px; }
.inquiry .basic_form .frm-itm .frm-desc.frm-txt input[type=text]::placeholder,
.inquiry .basic_form .frm-itm .frm-desc.frm-txt textarea::placeholder { font-size: 14px; color: #aaa; }
.inquiry .basic_form .frm-itm.frm-agree label { font-size: 15px; font-weight: 700; }
.inquiry .basic_form .frm-itm.frm-agree label::before { width: 18px; height: 18px; }
.inquiry .frm-category ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.inquiry .frm-category label { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 20px 16px; border-radius: 16px; border: 2px solid rgba(114, 201, 241, 0); background-color: #f9f9f9; }
.inquiry .frm-category input[type=radio]:checked + label { border: 2px solid rgba(114, 201, 241, 1); }
.inquiry .frm-category label::before { display: none; }
.inquiry .frm-category label > img { width: 36px; }
.inquiry .frm-category label > span { font: 400 14px/100% var(--font-family); }

.inquiry .frm-btn-wrap { max-width: 400px; padding: 24px 0; margin: 0 auto; }
.inquiry .frm-btn-wrap button { display: block; width: 100%; padding: 18px; text-align: center; border-radius: 8px; background-color: var(--main-black); font: 700 17px/100% var(--font-family); color: #fff; transition: all 0.3s ease; }
.inquiry .frm-btn-wrap:hover button { background-color: var(--key-color); }

/* form-mail - 첨부파일 */
.file-itm input[type="file"] { display: none; }
.file-itm .select-file { display: inline-block; width:100px; height: var(--form-input-height); line-height: var(--form-input-height); background: var(--main-black); color:white; text-align: center; cursor: pointer; }
.file-itm .file-name-txt { margin-left:8px; color:var(--sub-black); }
.file-itm .file-name-txt.select { color:var(--main-black); }

/* form-mail - 주소검색 */
.addr-itm button { width: 80px; height: var(--form-input-height); float:left; margin-left:5px; line-height: var(--form-input-height); text-align: center; background: var(--main-black); color: white; }
#zip_code { width:100px; float:left; }

/* form-mail - 등록버튼 */
.write_btn { width:100%; max-width: 300px; height: 50px; padding:0 10px; background-color: var(--main-bg); color:#fff; border:1px solid var(--main-bg); transition:.3s ease; }
.write_btn:hover { background-color:#fff; color:var(--main-bg); }
.end_btn { width:100%; max-width: 300px; height: 50px; padding:0 10px; background:#ddd; color:#777; border:1px solid #eee; cursor: default; transition:.3s ease; }

@media screen and (max-width: 920px){
    .inquiry .frm-category ul { gap: 8px; }
    .inquiry .frm-category label { gap: 8px; padding: 18px 8px; }
    .inquiry .basic_form .frm-itm .frm-tit { font-size: 17px; }
}
@media screen and (max-width: 768px){
    .inquiry .frm-category ul { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 640px){
    .inquiry .basic_form { gap: 32px; padding: 40px 32px; }
    .inquiry .basic_form .frm-itm .frm-tit { font-size: 16px; }
}
@media screen and (max-width: 480px){
    input[type="text"], input[type="password"], textarea { font-size: 15px; line-height: 140%; }

    .inquiry .basic_form { padding: 32px 24px; }
    .inquiry .frm-category ul { grid-template-columns: repeat(2, 1fr); }
    .inquiry .basic_form .frm-itm .frm-tit { font-size: 15px; }
    .inquiry .basic_form .frm-itm.frm-captcha .frm-desc { display: flex; }
    .inquiry .frm-captcha #captcha { width: calc(100% - 114px); }
    .inquiry .frm-captcha .capt_img { width: 80px; object-fit: contain; background: #C90000; }
    .inquiry .basic_form .frm-itm.frm-agree label { font-size: 14px; padding-left: 23px; }
    .inquiry .basic_form .frm-itm.frm-agree label::before { width: 16px; height: 16px;}
    
    .inquiry .frm-btn-wrap  { padding: 20px 0 0; }
    .inquiry .frm-btn-wrap button { font-size: 16px; }
}