/* 리스트 검색박스 ======================================*/ .bbs_searchbox {position:relative;width:100%; max-width:800px; margin:0 auto;padding: 0 0 40px 0; } .bbs_searchbox fieldset {display: grid; grid-template-columns:30% auto; gap:0 1%; } .bbs_searchbox select { padding-left:10px; height:50px;font-size:1em; vertical-align:top;border:1px solid #bbb;cursor:pointer; } .bbs_searchbox span {position:relative; height:52px;color:#333;line-height:52px;vertical-align:top;} .bbs_searchbox .search_input {box-sizing:border-box; width:100%;height:50px;color:#333;vertical-align:top;border:1px solid #bbb;font-size:1em; padding:0px 10px;} .bbs_searchbox .search_input::placeholder{background-color:#fff; color:#bbb;} .bbs_searchbox .search_btn {position:absolute;top:0;right:0; width:55px;height:50px;text-indent:-9999999px; overflow:hidden; display:block; background:url('./icon_search.png') no-repeat center 50% #333; color:#fff; } @media screen and (max-width:800px) { .bbs_searchbox {padding: 0 0 30px 0; } .bbs_searchbox fieldset { grid-template-columns:1fr; gap:5px; } } /* 리스트 ======================================*/ .mov_list {position:relative; display: grid; grid-template-columns: repeat(4, 1fr); gap:30px; } .mov_list:after {content:""; display:block; clear:both;} .mov_list li {position:relative; width:100%; overflow:hidden;} .mov_list_img {position:relative; aspect-ratio:16 / 9;overflow:hidden; border:1px solid #eaeaea;border-radius:10px;} .mov_list_img img {width:100%; height:100%; object-fit:cover;transition:all 0.4s ease;} .mov_list li:hover .mov_list_img img {transform: scale(1.12);filter: brightness(0.6);} .mov_list_txt {padding:15px 0 20px 0;overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: #333; font-weight:500;} .mov_list_date {color:#888;font-size:0.9em;padding:5px 0 0 0;} @media screen and (max-width:1024px) { .mov_list {grid-template-columns: repeat(3, 1fr);gap:20px;} } @media screen and (max-width:800px) { .mov_list {grid-template-columns: repeat(2, 1fr);gap:20px;} } @media screen and (max-width:480px) { .mov_list {grid-template-columns: repeat(1, 1fr); } .mov_list_txt {padding:10px 0 20px 0;font-size:1.05em;} } /* 뷰 ======================================*/ .view_tit_wrap { padding:25px;border-top:2px solid #333;border-bottom:1px solid #ccc;text-align:center; background:#f9f9f9;overflow:hidden;} .view_tit1 {display:inline-block; padding:2px 14px;COLOR:#fff; background:#ff6600; word-break:keep-all;} .view_tit2 {font-size:1.35em; line-height:140%; COLOR:#333; font-weight:bold;padding:10px 0 0 0;} .view_name {color:#888;padding:10px 0 0 0; font-size:0.95em;} .view_tit_link {border-bottom:1px solid #e0e0e0;padding:25px 20px ; font-size:0.95em;} .view_tit_link a {text-decoration:underline;color:#087fed;font-size:0.95em;} .view_file {position:relative;border-top:1px solid #ddd;display: flex; gap:20px; } .view_file .txt01 {position:relative; width: 15%; font-size:0.9em; padding:15px ; } .view_file .txt01:before {content:''; position:absolute; top:10px; right:-1px; width:1px;height:calc(100% - 20px);background:#e8e8e8; } .view_file ul {flex:2; padding:12px 0 ; } .view_file li {list-style:none;font-size:0.85em;padding:3px 0; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; width:90%; } .view_content {padding:30px 10px ; word-break:break-all; border-bottom:1px solid #ddd;} .view_content img {max-width:100%;} .view_content_text_size {padding:5px 0 0 0; text-align:right;} .view_content .video_wrap { position: relative; height: 0;overflow: hidden; padding-bottom: 56.25%; /* 16:9 비율에 맞게 조정 */ margin-bottom:20px;} .view_content .video_wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .view_com01 {font-size:10px;COLOR: #999999; font-family:Tahoma;} /*코멘트날짜표시*/ .view_bg {background-color:#F8E5F2} /*코멘트박스색깔*/ .write_title { text-align:center; color:#333; font-weight:500;padding:15px 0; background: #f5f5f5; border-top:2px solid #333; } .write_area {width:100%;border-collapse:collapse;table-layout:fixed;} .write01 {text-align:center; font-weight:normal;background:#f9f9f9; padding:12px ; width:15%; border-right:1px solid #ddd;border-top:1px solid #ddd;} .write02 {padding:12px; border-top:1px solid #ddd;} .comment_box {margin-top:15px; border-top:1px solid #b5b5b5; border-bottom:1px solid #b5b5b5; padding:7px; background-color:#f7f7f7; overflow:auto; } .comment_txt {padding-top:3px; } .comment_txt dt {float:left; width:calc(100% - 120px); } .comment_txt dd {float:right; } .comment_txt dt textarea {border:1px solid #cccccc; width:100%; } .comment_txt .com_btn {display:inline-block; zoom:1; *display:inline; text-align:center; font-size:15px; border:1px solid #ccc; background:#fff; color:#333; padding:0 25px; line-height:48px; margin:0 3px; cursor:pointer; vertical-align:top; } .comment_txt .com_btn:hover {border:1px solid #444; background:#555; color:#fff; } .comment_view {border-bottom:1px solid #dfdfdf; padding:20px 0; min-height:120px; } .comment_view_name {padding:0 10px; line-height:130%; color:#333; } .comment_view_name span {font-size:10px; color:#999999; } .comment_view_content {margin-top:20px; padding:0 10px; color:#555; } /* 보드 뷰페이지 이전, 다음글 ======================================*/ .view_prev_group {border-top:1px solid #ddd; } .view_prev_group_li01 {overflow:hidden;border-bottom:1px solid #ddd;} .view_prev_group_li02 {overflow:hidden;border-bottom:1px solid #ddd;} .view_prev_tit1, .view_prev_tit2 {position:relative;float:left;width:15%;font-size:0.9em; padding:15px ; } .view_prev_txt {position:relative;float:left;width:85%;font-size:0.9em;padding:15px 0;text-indent:20px;overflow: hidden; text-overflow:ellipsis; white-space:nowrap; } .view_prev_txt:before {content:''; position:absolute; top:10px; left:0; width:1px;height:calc(100% - 20px);background:#e8e8e8; } .view_prev_tit2:after {content:''; position:absolute; top:40%; right:20px; border:solid #666; border-width:1px 1px 0 0; width:5px;height:5px; transform: rotate(135deg); -webkit-transform: rotate(-45deg);} .view_prev_tit1:after {content:''; position:absolute; top:42%; right:20px;border:solid #666; border-width:1px 1px 0 0; width:5px;height:5px;transform: rotate(135deg); -webkit-transform: rotate(135deg);} /* mobie screen 520 */ @media screen and (max-width:520px){ .view_prev_tit1, .view_prev_tit2 {width:20%; font-size:0.9em;} .view_prev_txt {width:80%;font-size:0.9em; } } /* 보드 뷰페이지 이전, 다음글 ======================================*/