:root {
    --font-14: 14px;
    --font-15: 15px;
    --font-16: 16px;
    --font-18: 18px;

    --color-black: #222222;

    --radius4:4px;
    --radius10:10px;
    --radius80:80px;
}


/* 공통 */
.radius20 { -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; }

/* 게시판 */
#board {}

#board .board_head { display:flex; justify-content:space-between; margin-bottom:15px; }

/* 검색 */
#search { }
#search .list { }
#search .list ul { margin: 0; padding: 0; }
#search .list li { list-style: none; float: left; margin: 0 0 0 5px; background-color: #f2f2f2; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
#search .list li.select { width:130px; }
#search .list li.select select { width: 100%; height: 36px; margin: 0; padding: 0 10px; font-weight: normal; font-size: var(--font-14); line-height: 36px; color: #999999; letter-spacing: -0.5px; border: none; background-color: transparent; outline: none; }
#search .list li.input { width: 200px; }
#search .list li.input input { width: 100%; height: 36px; margin: 0; padding: 0 14px; font-weight: normal; font-size: var(--font-14); line-height: 36px; color: #999999; letter-spacing: -0.5px; border: none; background-color: transparent; outline: none; }
#search .list li.input input::-webkit-input-placeholder { font-size: var(--font-14); color:#999999; }
#search .list li.input input:moz-placeholder { font-size: var(--font-14); color:#999999; }
#search .list li.input input::-moz-placeholder { font-size: var(--font-14); color:#999999; }
#search .list li.input input:-ms-input-placeholder { font-size: var(--font-14); color:#999999; }
#search .list li.submit { width: 80px; background-color: #444444; }
#search .list li.submit a,
#search .list li.submit a:hover { display: block; font-weight: normal; font-size: var(--font-14); line-height: 36px; color: #f1f1f1; letter-spacing: -0.5px; text-align: center; }
#search .list li.submit input { width: 100%; padding: 0; background-color: #444444; font-size: var(--font-14); line-height: 36px; color: #f1f1f1; letter-spacing: -0.5px; text-align: center; border:none; outline:none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
#search .list:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */}


/* 버튼 */
.board_btn { display: inline-block; min-width: 80px; background-color: #444444; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.board_btn a,
.board_btn a:hover { display: block; padding: 0 25px; font-size: 14px; line-height: 36px; color: #f1f1f1; text-align: center; }


/* 게시판 - 영상 리스트 */
#board > .movie_list { display: flex; flex-wrap:wrap; gap: 2%; padding-top: 30px; border-top: 3px solid #444444; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; }
#board > .movie_list .item { display: flex; flex-direction: column; gap: 28px; width: 32%; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; }
#board > .movie_list .item .thumb { cursor: pointer; position: relative; display: flex; justify-content: center; align-items:center; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; }
#board > .movie_list .item .thumb img { width:100%; }
#board > .movie_list .item .thumb:after { content:""; position:absolute; width: 71.43px; height: 50px; left:50%; top:50%; margin-left:-35.7px; margin-top:-25px; background:url('/board/skin/youtube/images/board/icon_youtube.svg') no-repeat center; background-size:cover; }
#board > .movie_list .item .thumb_info { padding:0 12px; font-weight: 600; font-size: 20px; line-height: 150%; color: #1D1A1A; letter-spacing:-0.5px; }



/* 페이징 */
#paging { position: relative; margin: 40px 0 0; padding: 16px 0 20px; background-color: #fff; font-size: 0; text-align: center; }
#paging.paging_reple { position: relative; left: auto; right: auto; bottom: auto; padding: 35px 0 20px; background-color: transparent; border-top: none; }
#paging .paging_btn { cursor: pointer; display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-top: 3px; text-align: center; text-indent:-9999px }
#paging .paging_btn.first { background: url("../images/board/first.svg") no-repeat center; margin-right: 10px; }
#paging .paging_btn.before { background: url("../images/board/before.svg") no-repeat center; }
#paging .paging_btn.next { background: url("../images/board/next.svg") no-repeat center; }
#paging .paging_btn.last { background: url("../images/board/last.svg") no-repeat center; margin-left: 10px; }

#paging .paging_list { display: inline-block; vertical-align: middle; margin: 0 18px; }
#paging .paging_list ul { margin: 0; padding: 0; }
#paging .paging_list li { display: inline-block; vertical-align: top; list-style: none; margin: 0 10px; }
#paging .paging_list a,
#paging .paging_list a:hover { display: block; font-weight: normal; font-size: var(--font-14); line-height: 24px; color: #888888; letter-spacing: -0.5px; text-align: center; }
#paging .paging_list li.select a,
#paging .paging_list li.select a:hover { font-weight: bold; font-size: var(--font-14); color: #242424; }
#paging .paging_list:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */}


/* 유튜브 팝업 */
#youtube_popup_bg { position:fixed; width:100%; height:100vh; left:0; top:0; background-color:rgba(0,0,0,0.6); z-index:999999; display:none; }
#youtube_popup { position:fixed; width:100%; height:100vh; left:0; top:0; -webkit-overflow-scrolling:touch; z-index:999999; display:table; display:none; }
#youtube_popup .outer { display:table-cell; vertical-align:middle; }
#youtube_popup .outer .inner { position:relative; width:1024px; margin:0 auto; background-color:#fff; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;  -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; }
#youtube_popup .outer .inner .inner_box { position:relative; height:576px; padding:10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -moz-box-shadow:0 0 20px #555; -webkit-box-show:0 0 20px #555; box-shadow:0 0 20px #555; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; }
#youtube_popup .outer .inner .inner_box .youtube { width: 100%; height: 100%; }
#youtube_popup .outer .inner .btn_close { position:absolute; right:-40px; top:4px; cursor:pointer; }


@media screen and (max-width:1100px) {
    /* 유튜브 팝업 */
    #youtube_popup .outer .inner { width:700px; }
    #youtube_popup .outer .inner .inner_box { height:394px; }
}

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

    /* 게시판 - 영상 리스트 */
    #board > .movie_list { gap: 40px 3%; }
    #board > .movie_list .item { width: 48.5%; }
    #board > .movie_list .item .thumb:after { width: 50px; height: 35px; margin-left:-25px; margin-top:-17.5px; }

}

@media screen and (max-width:768px) {
    /* 유튜브 팝업 */
    #youtube_popup .outer .inner { width:auto; height:300px; margin:30px; }
    #youtube_popup .outer .inner .inner_box { height:300px; }
    #youtube_popup .outer .inner .btn_close { position: relative; width:100%; height:40px; left:auto; right:auto; top:auto; margin-top:10px; background-color:#999; text-align:center; cursor:pointer; }
    #youtube_popup .outer .inner .btn_close img { width:16px; margin-top:10px; }
}

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

    #board .board_head { display:flex; justify-content:space-between; flex-direction:column; }

    /* 검색 */
    #search { margin:10px 0 0; }
    #search .list li { margin: 0 0 0 1%; }
    #search .list li:first-child { margin: 0; }
    #search .list li.select { width: 25%; margin-left:0; }
    #search .list li.input { width: 58%; }
    #search .list li.submit { width: 15%; }

    /* 게시판 */
    #board > .search { margin: 0 0 20px; }
    #board > .search li { width: 39%; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
    #board > .search .select { height: 40px; padding: 0 10px; font-size: 15px; line-height: 40px; }
    #board > .search .input { height: 40px; padding: 0 10px; font-size: 15px; line-height: 40px; }
    #board > .search .input::-webkit-input-placeholder { font-size: 15px; }
    #board > .search .input:moz-placeholder { font-size: 15px; }
    #board > .search .input::-moz-placeholder { font-size: 15px; }
    #board > .search .input:-ms-input-placeholder { font-size: 15px; }
    #board > .search li.submit { width: 20%; height: 40px; }
    #board > .search li.submit a,
    #board > .search li.submit a:hover { font-size: 15px; line-height: 40px; }
    #board > .search li.submit input { font-size: 15px; line-height: 40px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }


    /* 게시판 - 영상 리스트 */
    #board > .movie_list { flex-direction: column; gap: 40px; }
    #board > .movie_list .item { gap: 16px; width: 100%; }
    #board > .movie_list .item .thumb_info { padding:0 8px; font-size: 16px; }
}