/* 공통 */
#fwrite {
    margin-block: 60px;
}
.form-group.hide-option {
    display: none;
}

/* 동영상 */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.popup_youtube, .popup_imgview{ cursor: pointer; }


/* board btn 영역 */
#mj-board-btn-wrap{ margin-bottom: 2.5rem;}
#mj-board-btn-wrap .btn{ margin-right: 0.3rem; margin-bottom: 0.3rem;}

#autosave_wrapper {position:relative}
#autosave_pop {display:none;z-index:10;position:absolute !important;top:34px;right:0;width:350px;height:auto !important;height:180px;max-height:180px;border:1px solid #565656;background:#fff;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
#autosave_pop:before {content:"";position:absolute;top:-8px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #000 transparent}
#autosave_pop:after {content:"";position:absolute;top:-7px;right:45px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
html.no-overflowscrolling #autosave_pop {height:auto;max-height:10000px !important} /* overflow 미지원 기기 대응 */
#autosave_pop strong {position:absolute;font-size:0;line-height:0;overflow:hidden}
#autosave_pop div {text-align:center;margin:0 !important}
#autosave_pop button {margin:0;padding:0;border:0}
#autosave_pop ul {padding:15px;border-top:1px solid #e9e9e9;list-style:none;overflow-y:scroll;height:130px;border-bottom:1px solid #e8e8e8}
#autosave_pop li {padding:8px 5px;border-bottom:1px solid #fff;background:#eee;zoom:1}
#autosave_pop li:after {display:block;visibility:hidden;clear:both;content:""}
#autosave_pop a {display:block;float:left}
#autosave_pop span {display:block;float:right;font-size:0.92em;font-style:italic;color:#999}
.autosave_close {cursor:pointer;width:100%;height:30px;background:none;color:#888;font-weight:bold;font-size:0.92em}
.autosave_close:hover {background:#f3f3f3;color:#3597d9}
.autosave_content {display:none}
.autosave_del {background:url(./img/close_btn.png) no-repeat 50% 50%;text-indent:-999px;overflow:hidden;height:20px;width:20px}

/* view.skin */
.board-content img{ width:30px; border-radius:50%; }
.media-body img{ width:30px; border-radius:50%; }

/* 댓글 */
#mj-board-comment-wrap .board-comment .media-left { float:left; }
#mj-board-comment-wrap .board-comment { margin-top:30px; }
#mj-board-comment-wrap .board-comment .media-list{ margin-bottom:30px; border:1px solid rgba(0,0,0,.125); border-radius:3px; padding:10px 20px; }
#mj-board-comment-wrap .board-comment .media-list li{ border-bottom:1px solid rgba(0,0,0,.125); padding-top:10px; }
#mj-board-comment-wrap .board-comment .media-list li:last-child{ border-bottom:none; }
#mj-board-comment-wrap .board-comment .media-body img{ width:30px; border-radius:50%; }
#mj-board-comment-wrap .board-comment .media-left { float:left; }

.row_subject_wrap{ margin:20px 0;  }
.b_prev{  padding: 20px 0; border-bottom:1px solid #ced4da; }
.b_next{  padding: 20px 0; border-bottom:1px solid #ced4da;; }
.b_title{ font-weight:bold; }


.txt-left{ text-align:left !important;}
.txt-right{ text-align:right  !important;}

.board-file{ margin-bottom:30px; }
.board-link{ margin-bottom:30px; }
.board-comment{ margin-bottom:30px; }
.board-prev-next{ margin-bottom:30px; }


@media (max-width: 767px) {
.txt-left{ text-align:left !important;}
.txt-right{ text-align:left !important;}
}

.board-title-wrap{ border:1px solid #e5e5e5; border-radius:5px; }
.board-title-box{ padding:15px;  }
.board-title-box .category_wrap{ padding:0px; margin:0px; }
.board-title-box h2{ font-size:26px; padding:0px 0px 10px 0px; margin:0px; }

#bo_w .btn-secondary:first-child {
    background: #222;
}

/* 커스텀 */
.a2.sub {
    border:0;
}
.a2 .sub-visual {
    border: 1px solid var(--border);
}

.youtube {
    margin-top: 60px;
}

.youtube-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 30px ;
}
.youtube-list .img {
    position: relative;
}
.youtube-list .img::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%,-50%);
    width: 45px; 
    height: 45px;
    background: url(../../../img/main/yout_bt.png) no-repeat center center / contain;
}
.youtube-list .txt {
    display: block;
    margin-top: 30px;
}
.youtube-list .txt h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}
.youtube-list .txt p {
    font-size: 15px;
    margin-top: 16px;
    line-height: 1.7;
}
.youtube-modal .modal-content {
    background: transparent;
}
.youtube-modal .modal-dialog {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%) !important;
    width: 90%;
    max-width: 800px;
    margin: 0;
}
.youtube-modal .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.youtube-modal .close-btn {
    display: inline-block;
    margin: 0 -25px 10px auto;
}
@media screen and (max-width:1200px){ 
    .youtube-list {
        gap: 30px 20px ;
    }
}
@media screen and (max-width:992px){
    .a2.sub {
        border: 1px solid var(--border);
    }
    .a2 .sub-visual {
        border:0;
        border-bottom: 1px solid var(--border);
    }
    .youtube {
        padding: 10px;
        margin-top: 0;
    }
    .youtube-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .youtube-list .txt h3 {
        font-size: clamp(16px,3vw,22px);
    }
    .youtube-list .txt p {
        font-size: clamp(13px,2.4vw,18px);
    }
}
@media screen and (max-width:768px){
    .youtube-list {
        grid-template-columns: repeat(1, 1fr);
       
    }
    .youtube-modal .close-btn {
        display: inline-block;
        margin: 0 0 10px auto;
    }
}


.youtube-view .view-content .yout-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.youtube-view .view-content .yout-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}