@import url("button.css");
@import url("form.css");
@import url("popup.css");
@import url("common.css");


/* BOARD CATEGORY */
.board-cate {
    margin-top:8rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:solid 1px #ddd;    
    gap:2rem;
}
.board-cate ul {
    display:flex;
    align-items:center;
    column-gap:3rem;
    row-gap:2rem;
    flex-wrap:wrap;
}
.board-cate ul li {
    position:relative;
    padding-bottom:2rem;
}
.board-cate ul li a {
    font-size:2rem;
    color:#000;
    font-weight:500;
}
.board-cate ul li.on a {
    color:var(--red);
    font-weight:650;
}
.board-cate ul li.on::after {
    display:block;
    content:"";
    width:100%;
    height:0.4rem;
    background:var(--red);
    position:absolute;
    bottom:0;
    left:0;
    z-index:2;
}
.board-cate .total {
    font-size:1.8rem;
    color:#000;
    padding-bottom:2rem;
}
.board-cate .total span {
    font-weight:650;
}
@media (max-width:991px){
    .board-cate {
        margin-top:6rem;
    }
}
@media (max-width:580px){
    .board-cate {
        flex-wrap:wrap;
    }
    .board-cate .total {
        flex-basis:100%;
        text-align:right;
    }
}
@media (max-width:450px){
    .board-cate ul {
        column-gap:2rem;
    }
}

/* BOARD GALLERY */
.board-gallery {
    margin-top:5rem;
}
.board-gallery ul {
    /* display:flex;
    flex-wrap:wrap;
    gap:6rem; */
}
.board-gallery ul li {
    /* flex-basis:calc(33.333% - 4rem);
    display:flex;
    flex-direction:column; */
}
.board-gallery ul li a {
    /* flex:1;
    display:flex;
    flex-direction:column; */
}
.board-gallery ul li .thumb {
    /* padding: 0 0 69%;
    width: 100%;
    border: 0;
    font-size: 0;
    margin: 0;
    height: 0;
    position: relative;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: top; */
}
.board-gallery ul li .thumb img {
    width: 100%;
    /* height: auto;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    vertical-align: top; */
}
.board-gallery ul li .info {
    padding-top:3rem;
    flex:1;
    display:flex;
    flex-direction:column;
}
.board-gallery ul li .info .conv {

}
.board-gallery ul li .info .conv span {
    display:inline-block;
    height:3rem;
    line-height:3rem;
    padding:0 1rem;
    background:#666;
    font-size:1.6rem;
    color:#fff;
}
.board-gallery ul li .info h3 {
    margin-top:1.5rem;
    font-size:2.2rem;
    line-height:1.4;
    color:#000;
    font-weight:650;
}
.board-gallery ul li .info .date {
    margin-top:auto;
    padding-top:2rem;
    font-size:1.6rem;
    color:#757575;
}
@media (max-width:1200px){
    .board-gallery {
        margin-top: 4rem;
    }
    .board-gallery ul {
        /* gap:4rem;
        row-gap:4rem; */
    }
    .board-gallery ul li {
        /* flex-basis:calc(33.333% - 2.7rem); */
    }
    .board-gallery ul li .info h3 {
        font-size:2rem;
    }
}
@media (max-width:991px){
    .board-gallery {
        margin-top: 3rem;
    }
    .board-gallery ul {
        /* gap:2rem;
        row-gap:4rem; */
    }
    .board-gallery ul li {
        /* flex-basis:calc(33.333% - 12px); */
    }
    .board-gallery ul li .info {
        padding-top: 2rem;
    }
}
@media (max-width:780px){
    .board-gallery ul {
        /* gap:2rem;
        row-gap:4rem; */
    }
    .board-gallery ul li {
        /* flex-basis:calc(50% - 9px); */
    }
}
@media (max-width:450px){
    .board-gallery ul {
        /* gap:0;
        row-gap:4rem; */
    }
    .board-gallery ul li {
        /* flex-basis:100%; */
    }
}

/* BOARD VIEW */
.tbl-view {
    border-top:solid 2px #000;
}
.tbl-view table {
    width:100%;
}
.tbl-view table td {
    border-bottom:solid 1px #ddd;
}
.tbl-view table td.top {
    padding:3rem 4rem;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    column-gap:3rem;
}
.tbl-view table td.top .sbj h3 {
    font-size:2.5rem;
    line-height:1.4;
    color:#000;
    font-weight:650;
}
.tbl-view table td.top .sbj .date {
    margin-top:1.5rem;
    font-size:1.6rem;
    color:#757575;
}

/* 공유하기 */
.tbl-view table td.top .share {
    position:relative;    
}
.tbl-view table td.top .share > a {
    display:block;
    width:8rem;
    height:8rem;
    font-size:0;
    border:solid 1px #ddd;
    background:url("../png/share.png") no-repeat center;
    background-size:2.6rem auto;
}
.tbl-view table td.top .share > div.share_layer {
    display:none;
    position:absolute;
    top:calc(100% + 2rem);
    right:0;
    border:solid 1px #000;
    background:#fff;
    -webkit-box-shadow: 0.9rem 0.9rem 4rem 0 rgba(0,0,0,0.13);
    -moz-box-shadow: 0.9rem 0.9rem 4rem 0 rgba(0,0,0,0.13);
    box-shadow: 0.9rem 0.9rem 4rem 0 rgba(0,0,0,0.13);  
    padding:2rem;
}
.tbl-view table td.top .share > div.share_layer::before {
    display:block;
    content:"";
    width:1.8rem;
    height:1rem;
    background:url("../png/share_anchor.png") no-repeat center;
    background-size:contain;
    position:absolute;
    top:-1rem;
    right:2.8rem;
    z-index:2;
}
.tbl-view table td.top .share > div.share_layer .sh_close {
    position:absolute;
    top:2rem;
    right:2rem;
    width:1.7rem;
    height:1.7rem;
    background:url("../png/share_layer_close.png") no-repeat center;
    background-size:contain;
    font-size:0;
}
.tbl-view table td.top .share > div.share_layer dl {
    display:flex;
    align-items:center;
    column-gap:2rem;
}
.tbl-view table td.top .share > div.share_layer dl + dl {
    margin-top:1.5rem;
}
.tbl-view table td.top .share > div.share_layer dl dt {
    width:5rem;
    font-size:1.5rem;
    color:#757575;
    white-space:nowrap;
    font-weight:500;
}
.tbl-view table td.top .share > div.share_layer dl dd {
    flex:1;
    display:flex;
    column-gap:1rem;
}
.tbl-view table td.top .share > div.share_layer dl dd a {
    display:block;
    font-size:0;
    width:4rem;
    height:4rem;
}
.tbl-view table td.top .share > div.share_layer dl dd a.sh_f {
    background:url("../png/share_f.png") no-repeat center;
    background-size:contain;
}
.tbl-view table td.top .share > div.share_layer dl dd a.sh_t {
    background:url("../png/share_t.png") no-repeat center;
    background-size:contain;
}
.tbl-view table td.top .share > div.share_layer dl dd .d_input {
    display:flex;
    align-items:center;
    column-gap:1rem;
}
.tbl-view table td.top .share > div.share_layer dl dd .d_input input[type=text] {
    flex:1;
    width:20rem;
    border:solid 1px #ddd;
    height:3.4rem;
    line-height:3.4rem;
    padding:0 1rem;
    font-size:1.3rem;
    color:#757575;
}
.tbl-view table td.top .share > div.share_layer dl dd .d_input button {
    display:inline-block;
    height:3.4rem;
    line-height:3.4rem;
    padding:0 1rem;
    background:#666;
    color:#fff;
    font-size:1.5rem;
    cursor: pointer;
}

/* 유투브 */
.tbl-view table td.video {
    padding:2rem 4rem;
}
.tbl-view table td.video .mov-box {
    position:relative;
    padding-top:56.29%;
}
.tbl-view table td.video .mov-box iframe {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    height:100%;
}

.tbl-view table td.file {
    padding:2rem 4rem;
}
.tbl-view table td.file p {
    display:flex;
    align-items:center;
    column-gap:0.5rem;
    padding-left:3rem;
    background:url("../png/download.png") no-repeat left center;
    background-size:2rem auto;
}
.tbl-view table td.file p + p {
    margin-top:1.5rem;
}
.tbl-view table td.file p a {
    height:1.8rem;
    line-height:1.8rem;
    font-size:1.4rem;
    color:#000;
    text-decoration:underline !important;
}
.tbl-view table td.file p span {
    font-size:1.3rem;
    color:#999;
}
.tbl-view table td.conts {
    padding:7rem 4rem;
    font-size:1.6rem;
    color:#757575;
    line-height:1.6;
}
.tbl-view table td.conts img {
    max-width:100%;
    height:auto;
}
@media (max-width:991px){
    .tbl-view table td.top {
        padding:2rem 2rem;
    }
    .tbl-view table td.top .sbj h3 {
        font-size: 2.2rem;
    }
    .tbl-view table td.top .share a {
        width:6rem;
        height:6rem;
        background: url(../png/share.png) no-repeat center;
        background-size: 2.2rem auto;
    }
    .tbl-view table td.conts {
        padding:5rem 2rem;
    }
    .tbl-view table td.file {
        padding:2rem 2rem;
    }
}
@media (max-width:450px){
    .tbl-view table td.top {
        padding:2rem 0;
    }
    .tbl-view table td.file {
        padding:2rem 0;
    }
}

/* BOARD PREV-NEXT */
.board-prev-next > div {
    margin-top:-1px;
    border-top:solid 1px #ddd;
    border-bottom:solid 1px #ddd;
    display:flex;
    align-items:center;
    column-gap:5rem;
    row-gap:2rem;
    padding:2.5rem 4rem;
}
.board-prev-next > div .tit {
    display:inline-block;
    padding-left:3rem;
    font-size:1.6rem;
    color:#000;
}
.board-prev-next > div.prev .tit {
    background:url("../png/article_prev_arr.png") no-repeat left center;
    background-size:1rem auto;
}
.board-prev-next > div.next .tit {
    background:url("../png/article_next_arr.png") no-repeat left center;
    background-size:1rem auto;
}
.board-prev-next > div a {
    font-size:1.6rem;
    color:#000;
}
.board-prev-next > div .date {
    margin-left:auto;
    font-size:1.6rem;
    color:#757575;
}
@media (max-width:991px){
    .board-prev-next > div {
        column-gap:5rem;
        padding:2.5rem 2rem;
        flex-wrap:wrap;
    }    
}
@media (max-width:780px){
    .board-prev-next > div .tit {
        flex-basis:100%;
    }
    .board-prev-next > div a {
        padding-left:3rem;
    }
    .board-prev-next > div .date {        
        flex-basis:100%;
        text-align:right;
    }
}
@media (max-width:450px){
    .board-prev-next > div {
        padding:2.5rem 0;
    } 
}

/* FAQ */
.faq-list {
    margin-top:5rem;
}
.faq-list table {
    width:100%;
}
.faq-list th {
    background:#f5f5f5;
    font-size:1.8rem;
    color:#000;
    text-align:center;
    height:6rem;
    line-height:6rem;
    font-weight:500;
    border-bottom:solid 1px #ddd;
}
.faq-list td {
    font-size:1.8rem;
    color:#000;
    height:8rem;
    line-height:8rem;
    border-bottom:solid 1px #ddd;
    text-align:center;
}
.faq-list tr.open {
    cursor:pointer;
}
.faq-list td.cate {
    color:var(--red);
}
.faq-list td.sbj p {
    display:flex;
    align-items:center;
    column-gap:1.5rem;
    font-size:1.8rem;
    color:#000;
    text-align:left;
    padding-right:10rem;
    line-height:1.6;
    background:url("../png/faq_down.png") no-repeat right 4rem center;
    background-size:2rem auto;
}
.faq-list tr.click td.sbj p {
    background:url("../png/faq_up.png") no-repeat right 4rem center;
    background-size:2rem auto;
}
.faq-list td.sbj span {
    display:inline-block;
    width:4rem;
    height:4rem;
    line-height:4rem;
    font-size:1.8rem;
    color:#000;
    text-align:center;
    background:#eee;
    border-radius:100vh;
}
.faq-list .detail_info td {
    text-align:left;
    height: 0;
    line-height: 0;
    padding: 0;
    border: 0;
}
.faq-list tr.click + tr.detail_info td {
    height: auto;
    line-height: 1.6;
}
.faq-list .detail_info td .a_wrap {
    position:relative;
    display:none;
    padding:2rem 10rem 4rem 25rem;
    border-top:solid 1px #fff;
    border-bottom:solid 1px #ddd;
    margin-top:-1px;
    z-index:2;
}
.faq-list .detail_info td .a_wrap .conts {
    display:flex;    
    gap:1.5rem;
}
.faq-list .detail_info td .a_wrap .conts .aicon {
    display:inline-block;
    width:4rem;
    height:4rem;
    line-height:4rem;
    font-size:1.8rem;
    color:#fff;
    text-align:center;
    background:var(--red);
    border-radius:100vh;
}
.faq-list .detail_info td .a_wrap .conts .answer {
    flex:1;
    font-size:1.8rem;
    color:#757575;
    line-height:1.6;
}
/* 반응형 테이블 */
@media all and (max-width:991px) {
	.faq-list {}
	.faq-list table {position:relative; border-top:solid 1px #ddd;}
	.faq-list table colgroup {display:none;}
	.faq-list table thead {display:none;}
	.faq-list table tr {position:relative; display:block;}
	.faq-list table td {display:block; height:auto; line-height:inherit;}
	.faq-list table tr td.no {position:absolute; width:4rem; left:0; top:2rem; border:0; padding:0; text-align:center;} /* 번호 */
    .faq-list table tr td.cate {position:absolute; left:5.5rem; top:2rem; border:0; padding:0;} /* 분류 */
	.faq-list table tr td.sbj {padding:5rem 0; padding-left:0; padding-bottom:1.5rem;} /* 제목 */

    .faq-list .detail_info td .a_wrap {
        padding: 0 0 3rem;
        background:#fff;
    }
    .faq-list .detail_info td .a_wrap .conts {
        flex-wrap:wrap;
    }
    .faq-list .detail_info td .a_wrap .conts .answer {
        flex-basis:100%;
    }
}

/* Career */
.career-list {
    margin-top:5rem;
}
.career-list table {
    width:100%;
}
.career-list th {
    background:#f5f5f5;
    font-size:1.8rem;
    color:#000;
    text-align:center;
    height:6rem;
    line-height:6rem;
    font-weight:500;
}
.career-list td {
    font-size:1.8rem;
    color:#000;
    height:8rem;
    line-height:8rem;
    border-bottom:solid 1px #ddd;
    text-align:center;
}
.career-list td.sbj {
    text-align:left;
}
.career-list td.sbj a {
    font-size:1.8rem;
    color:#000;
    width:100%;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
/* 진행/마감 */
.career-list td.state span {
    display:inline-block;
    width:7.5rem;
    height:3rem;
    line-height:3rem;
    text-align:center;
    background:var(--red);
    font-size:1.6rem;
    color:#fff;
}
.career-list td.state .ing {
    background:var(--red);
}
.career-list td.state .end {
    background:#666;
}
.career .tbl-view .ing {
    margin-bottom:1rem;
    display: inline-block;
    width: 7.5rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    background: var(--red);
    font-size: 1.6rem;
    color: #fff;
}
.career .tbl-view .end {
    margin-bottom:1rem;
    display: inline-block;
    width: 7.5rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    background:#666;
    font-size: 1.6rem;
    color: #fff;
}
/* 반응형 테이블 */
@media all and (max-width:991px) {
	.career-list {}
	.career-list table {position:relative; border-top:solid 1px #ddd;}
	.career-list table colgroup {display:none;}
	.career-list table thead {display:none;}
	.career-list table tr {position:relative; display:block;}
	.career-list table td {display:block; height:auto; line-height:inherit;}
	.career-list table tr td.no {position:absolute; width:6rem; left:0; top:2rem; border:0; padding:0; text-align:center;} /* 번호 */
    .career-list table tr td.state {position:absolute; left:8rem; top:1.5rem; border:0; padding:0;} /* 상태 */
	.career-list table tr td.sbj {padding:6rem 0; padding-left:0; padding-bottom:1.5rem;} /* 제목 */
    .career-list table tr td.date {position:absolute; right:0; top:2rem; border:0; padding:0;} /* 상태 */
}

/* CONTACT */
.board-write {    
    margin-top:5rem;
    padding-top:5rem;
    border-top:solid 2px #000;
}
.board-write label.tit {
    display:block;
    font-size:1.8rem;
    color:#000;
    font-weight:650;
    margin-bottom:1rem;
}
.board-write .row {
    display:flex;
    align-items:center;
    column-gap:6rem;
    row-gap:3rem;
}
.board-write .row + .row {
    margin-top:3rem;
}
.board-write .row .col {
    flex:1;
}
@media all and (max-width:991px) {
    .board-write {    
        margin-top:3rem;
        padding-top:3rem;;
    }
    .board-write .row {
        column-gap:3rem;
    }
    .board-write .mrow .col-1 {
        flex:1;
    }
    .board-write .mrow .col-2 {
        display:none;
    }
}
@media all and (max-width:580px) {
    .board-write .row {
        flex-wrap:wrap;
    }
    .board-write .row .col {
        flex-basis:100%;
    }
}



/* 검색 결과 페이지 */
.search-top {
    margin-top:10rem;
    padding:0 3.125%;
    background:#f5f5f5;
}
.search-top .form-box {
    position:relative;
    width:70rem;
    margin:auto;
    padding:3rem 0;
}
.search-top .form-box input[type=text] {
    width:100%;
    border-bottom:solid 3px #000;
    padding:2rem 4rem 2rem 0;
    background:transparent;
}
.search-top .form-box button {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right:0;
    width:2.3rem;
    height:2.3rem;
    background:url("../png/hd_search.png") no-repeat center;
    background-size:contain;
    font-size:0;
    cursor: pointer;
}

.search-total {
    margin-top:6rem;
    padding:0 3.125%;
    font-size:1.8rem;
    color:#000;
    font-weight:600;
}
.search-total span {
    color:var(--red);
}

@media (max-width:720px){
    .search-top .form-box {
        width:100%;
    }
}
@media (max-width:450px){
    .search-top {
        padding:0 5%;
    }
    .search-total {
        padding:0 5%;
    }
}