@charset "utf-8"; /*** 리스트형 게시판 목록 ***/ /* 게시판 공용 */ .wrap.board, .wrap.board_content {} /* //게시판 공용 */ .section.board { max-width: 1300px; padding: 50px 0; margin: 0 auto; } .section.board2 { max-width: 1300px; margin: 0 auto; } .detail_page {} /* board-search */ .board-search-wrap { margin-bottom: 30px; background-color: #f7f7f7; padding: 30px 30px; } .board-search-wrap .left { float: left; } .board-search-wrap .left.title { width: 50px; } .board-search-wrap .left.form {} .board-search-wrap .board-search-tit { color: #333; line-height: 40px; font-size: 18px; font-weight: 700; } .total { color: #333; font-size: 18px; line-height: 44px; font-weight: 400; margin-top: 40px; margin-bottom: 10px; } .total .blue { font-weight: 700; color: #383683; } .board-search-wrap .right { float: right; } .board-select { float: left; margin-right: 15px; } .board-select select.selectbox { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .board-select select.selectbox::-ms-expand { display: none; } .board-select .selectbox { width: 180px; height: 54px; border: 1px solid #333; box-sizing: border-box; color: #333; font-size: 16px; font-weight: bold; padding-left: 10px; /* border-radius: 5px; */ background-image: url(/images/jakdangso/board/i-select-board.png); background-repeat: no-repeat; background-position: right 12px center; } .board-select .selectbox option { font-size: 14px; } .board-search { float: left; } .board-search { overflow: hidden; } .board-search div { float: left; } .board-search div label {} .board-search div input { width: 290px; height: 45px; font-size: 15px; /* line-height: 30px; ie때문에 주석처리 */ padding-left: 10px; background-color: #fff; border: 1px solid #d7d7d7; border-radius: 5px; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .board-search .btn-board-search { display: block; float: left; width: 80px; height: 45px; background-color: #029ce6; border-radius: 5px; margin-left: 5px; } .board-search .btn-board-search span { color: #fff; font-size: 15px; vertical-align: middle; } .board-search-wrap .form label { display: inline-block; min-width: 40px; font-size: 16px; text-align: right; font-weight: 600; color: #333; margin-right: 10px; } .wrap33 { overflow: hidden; margin-bottom: 15px; } .wrap33 .board-select { width: calc(33.3% - 10px); } .wrap33 > div:last-child.board-select { margin-right: 0; } .wrap33 .board-select select.selectbox { width: calc(100% - 55px); } /* //board-search */ /* table style */ .scroll1cont {} table.t1 { width: 100%; border: 0; border-collapse: collapse; border-top: 2px solid #333333; box-sizing: border-box; table-layout: fixed; /* table-layout: fixed; 테이블내에서 말줄임 속성을 사용하기위해 테이블에 필요한 속성*/ letter-spacing: -0.2px; } table.t1 > * > tr > th, table.t1 > * > tr > td { padding: 15px 10px; border-bottom: 1px solid #DBDBDB; border-width: 0 0 1px 1px; text-align: center; vertical-align: middle; } table.t1 > tbody > tr:last-child > th, table.t1 > tbody > tr:last-child > td { border-bottom: 1px solid #595F6B; } table.t1 > * > tr > th { font-size: 15px; font-weight: 700; color: #333; } table.t1 > thead > tr > th { border-bottom: 1px solid #dedede; background: #f8f8f8; } table.t1 > tbody > tr > th { font-weight: 500; } table.t1 > tbody > tr.tr_notice > th, table.t1 > tbody > tr.tr_notice > td { background-color: #f7f8f9; } table.t1 > tbody > tr > td { font-size: 15px; color: #6a6a6a; font-weight: 500; } table.t1 > tbody > tr > td .icon-lock:after { display: inline-block; content: ''; width: 15px; height: 20px; background-image: url(/images/bycenter/board/icon-lock.png); background-repeat: no-repeat; background-position: center center; margin-bottom: -3px; margin-left: 10px; } table.t1 > tbody .tal { text-align: left; } table.t1 > tbody .reply { color: #e06987; margin-right: 10px; font-weight: 700; } table.t1 > tbody .reply:before { display: inline-block; content: ''; width: 14px; height: 14px; background-image: url(/images/bycenter/board/i-reply.png); margin-right: 20px; } /* table_icon */ .icon_notice { background-color: #4d4d4d; color: #fff; font-size: 15px; font-weight: 600; border-radius: 4px; padding: 5px 8px; vertical-align: middle; letter-spacing: 0.5px; } .icon_new:after { content: 'N'; display: inline-block; vertical-align: middle; width: 20px; height: 20px; line-height: 17px; margin-right: 5px; text-align: center; border: 1px solid #4b50b6; border-radius: 100%; box-sizing: border-box; color: #4b50b6; font-size: 12px; } .icon_file { display: inline-block; width: 16px; height: 17px; background-image: url(/images/bycenter/board/i-file.png); background-repeat: no-repeat; background-position: center center; vertical-align: middle; } /* //table_icon */ /* //table style */ /*** //리스트형 게시판 목록 ***/ /*** 리스트형 게시판 상세 ***/ /* board_content */ .board_content { font-family: 'Noto Sans KR'; } .board_content .side-info { margin-top: 10px; } .board_content .side-info ul {} .board_content .side-info.mb {} .board_content .side-info li { float: left; margin-right: 30px; font-size: 16px; font-weight: 500; color: #666; } .board_content .side-info li:after { display: inline-block; content: ''; border-right: 1px solid #999; height: 10px; padding-right: 30px; } .board_content .side-info li:last-child { margin-right: 0; } .board_content .side-info li:last-child:after { display: none; } .board_content .content { border-top: 2px solid #595F6B; box-sizing: border-box; } .board_content .content.mt { margin-top: 70px; } .board_content .content .con { padding: 30px; font-size: 15px; font-weight: 400; color: #7f7f7f; line-height: 25px; box-sizing: border-box; background-color: #f8f8f8; } .board_content .content .con-reply { padding: 0 40px; font-size: 17px; line-height: 25px; font-weight: 500; color: #333; box-sizing: border-box; background-color: #fff; } .board_content .content .con-reply .reply { color: #e24f74; font-weight: 700; } .board_content .content .con-reply:before { display: block; content: ''; border-bottom: 1px dashed #ddd; margin-bottom: 40px; } .board_content .content .con p, .board_content .content .con-reply p { line-height: 150%; } .board_content .content .con p:last-child {} .board_content .board-title-wrap { border-bottom: 1px solid #ccc; padding: 30px; } .board_content .title { font-size: 22px; font-weight: 700; box-sizing: border-box; color: #333; } .board_content .title .reply { color: #e24f74; margin-right: 10px; } .board_content .file_info { border-bottom: 1px solid #ccc; box-sizing: border-box; display: table; width: 100%; } .board_content .file_info .tit { display: table-cell; text-align: left; vertical-align: middle; width: 15%; padding-left: 40px; font-weight: 500; } .board_content .file_info .tit:before { display: inline-block; content: ''; width: 12px; height: 19px; background-image: url(/images/bycenter/board/i-file2.png); margin-right: 10px; vertical-align: middle; margin-top: -4px; } .board_content .file_info .tit span { vertical-align: middle; } .board_content .file_info .list { display: table-cell; padding: 20px 20px; } .board_content .file_info .list li { color: #666; margin-bottom: 4px; } .board_content .file_info .list span { font-size: 15px; } .board_content .file_info .list .file-down { border: 1px solid #c4c4c4; background-color: #fff; border-radius: 4px; padding: 4px 15px 3px 15px; margin-left: 10px; font-size: 13px; display: inline-block; } .board_content .file_info .list .file-down:after { display: inline-block; content: ''; width: 14px; height: 14px; background-image: url(/images/bycenter/board/i-down.png); margin-bottom: -1px; ; margin-left: 5px; } .video_area video { width: 100%; } .video_text { max-height: 300px; line-height: 20px; background: #fff; border-radius: 10px; border: 1px solid #eaeaea; overflow-y: auto; padding: 20px; } /* 답변추가 */ .reply-list-wrap {} .reply-list-wrap .reply-item {} .reply-list-wrap .reply-item.mt { margin-top: 50px; } .reply-item li { display: block; border: 1px solid #dbdbdb; background-color: #fff; box-sizing: border-box; margin-bottom: 10px; padding: 20px; } .reply-item li:last-child { margin-bottom: 0; } .reply-item p {} .reply-item .writer { font-size: 16px; color: #333; } .reply-item .datetime { font-size: 16px; color: #999; margin-left: 20px; } .reply-item .text-area { font-size: 16px; color: #999; } .reply-item .text-area.mt { margin-top: 5px; } .reply-area { border: 1px solid #CFD5DE; background-color: #fff; box-sizing: border-box; margin-bottom: 10px; padding: 20px; } .reply-area.mt { margin-top: 10px; } .reply-area.mb { margin-bottom: 50px; } .reply-area form {} .reply-area p {} .reply-area .writer { font-size: 16px; color: #333; } .content-reply { display: block; width: 100%; height: 160px !important; border: 0; font-family: 'NotoSansKR'; font-size: 16px; color: #6D7B91; resize: none; } .content-reply.mt { margin-top: 5px; } .content-reply.mb { margin-bottom: 5px; } .reply-area .counter { float: left; line-height: 40px; font-size: 16px; color: #78b332; } .reply-area .counter + .btn.blue { display: block; min-width: 90px; height: 40px; border-radius: 3px; box-sizing: border-box; font-size: 16px; letter-spacing: -1px; background-color: #78b332; color: #fff; } .reply-area .counter + .btn.blue.right { float: right; } .reply-item li .counter { float: left; line-height: 30px; } .reply-item li .btns { float: right; } .reply-item li .btn.blue { display: block; min-width: 60px; height: 30px; border-radius: 3px; box-sizing: border-box; font-size: 14px; letter-spacing: -1px; background-color: #0a276d; color: #fff; } .reply-item li .btn.red { display: block; min-width: 60px; height: 30px; border-radius: 3px; box-sizing: border-box; font-size: 14px; letter-spacing: -1px; background-color: #D43300; color: #fff; } .reply-item li .btn { float: left; } .reply-item li .btn.right { margin-right: 5px; } .reply-item li .btn.right:last-child { margin-right: 0; } /* //답변추가 */ .board_content .page_topbottom { border-top: 1px solid #595F6B; border-bottom: 1px solid #595F6B; box-sizing: border-box; font-weight: 500; } .board_content .page_topbottom.mt { /*margin-top: 30px;*/ } .board_content .arrow_top { padding: 15px 0; border-bottom: 1px solid #dbdbdb; box-sizing: border-box; background-color: #fff; } .board_content .arrow_bottom { padding: 18px 0; background-color: #fff; } .board_content .arrow_top a, .board_content .arrow_bottom a { display: block; } .board_content .icon_top, .board_content .icon_bottom { display: table-cell; width: 14%; float: left; padding-left: 40px; font-size: 16px; } .board_content .txt_top, .board_content .txt_bottom { display: table-cell; /* width: 100%; */ display: block; padding-left: 20px; color: #666; font-size: 16px; padding-right: 40px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* //board_content */ /*** //리스트형 게시판 상세 ***/ /*** 포토게시판 리스트 ***/ /* 원래 이미지 비율 + 너무작은 이미지만 min-height로 강제로 높이 늘리기 */ .photo_wrap { width: 100%; border-top: 2px solid #999; padding-top: 50px; border-bottom: 2px solid #999; padding-bottom: 40px; font-family: 'Noto Sans KR'; } .photo_wrap ul { margin-bottom: -44px; } .photo_wrap ul li { display: block; float: left; /* width: calc((100% - 90px) / 4); ie에서 감싸는 부모 속성도 %여서 감싸는 속성 계산이 한박자 느림 */ width: 23.5%; /* 계산된 값으로 넣는데 소수점 한자리까진 괜찮음 두세자리 넘어가면 이것도 안됨 */ } .photo_wrap ul li:nth-child(1n), .photo_wrap ul li:nth-child(2n), .photo_wrap ul li:nth-child(3n) { /* margin-right: 30px; ie에서 감싸는 부모 속성도 %여서 감싸는 속성 계산이 한박자 느림 */ margin-right: 2%; } .photo_wrap ul li:nth-child(4n) { margin-right: 0; } .photo_wrap ul li a { display: block; } .photo_wrap .img { display: block; height: 200px; /*이미지 비율에 적절한값으로 수정하면됨*/ overflow: hidden; } .photo_wrap .img img { min-height: 200px; /*이미지 비율에 적절한값으로 수정하면됨*/ } .photo_wrap .tit { display: block; text-align: center; } .photo_wrap .tit.mt { margin-top: 20px; margin-bottom: 44px; } /* 4x4 */ .photo_wrap.row_4 li:nth-child(13) .tit.mt, .photo_wrap.row_4 li:nth-child(14) .tit.mt, .photo_wrap.row_4 li:nth-child(15) .tit.mt, .photo_wrap.row_4 li:nth-child(16) .tit.mt { margin-bottom: 0; } /* //4x4 */ /* 4x2 */ .photo_wrap.row_2 li:nth-child(5) .tit.mt, .photo_wrap.row_2 li:nth-child(6) .tit.mt, .photo_wrap.row_2 li:nth-child(7) .tit.mt, .photo_wrap.row_2 li:nth-child(8) .tit.mt { margin-bottom: 0; } /* //4x2 */ .photo_wrap .tit .title { display: block; font-size: 18px; color: #333; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .photo_wrap .tit .day { display: block; font-size: 16px; letter-spacing: -0.2px; } /*** //포토게시판 리스트 ***/ /* 포토게시판(type1) */ .photo_type > ul { overflow: hidden; } .photo_type > ul > li { display: inline-block; width: calc(33% - 12px); overflow: hidden; border: 1px solid #dfdfdf; border-radius: 20px; margin-right: 15px; margin-bottom: 15px; } .photo_type ul li:nth-child(3n+0) { margin-right: 0; } .photo_area { position: relative; } .photo_img { position: relative; overflow: hidden; padding-top: 70.5%; } .photo_img img { position: absolute; width: 100%; max-width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } .photo_area .layer { position: absolute; right: 0; bottom: 0; text-align: center; color: #fff; font-size: 14px; padding: 5px 15px; } .photo_area .layer.type1 { background: rgba(10, 178, 189, 0.85); } .photo_area .layer.type2 { background: rgba(10, 189, 66, 0.85); } .photo_area .layer.type3 { background: rgba(77, 10, 189, 0.85); } .photo_area .layer.type4 { background: rgba(63, 128, 215, 0.85); } .photo_area .layer.type5 { background: rgba(241, 64, 121, 0.85); } .shot_info { padding: 20px; } .photo_tit { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 600; color: #333; margin-bottom: 10px; } .info_box { margin-bottom: 10px; } .info_box > ul > li { font-size: 15px; color: #7f7f7f; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 5px; } .info_box > ul > li::before { content: ''; display: inline-block; width: 19px; height: 19px; vertical-align: middle; margin-right: 8px; background-size: 100%; } .info_box > ul > li.tel::before { background: url("/images/bycenter/board/i-call.png") no-repeat; } .info_box > ul > li.address::before { background: url("/images/bycenter/board/i-map.png") no-repeat; } .detail_btns { overflow: hidden; font-size: 15px; border-radius: 5px; border: 1px solid #029ce6; } .detail_btns > ul > li { display: inline-block; width: 50%; float: left; color: #029ce6; text-align: center; padding: 8px 0; } .detail_btns > ul > li.bgd_blue { color: #fff; background-color: #029ce6; } /* //포토게시판(type1) */ /* 포토게시판(type2) */ .photo_type2 > ul { overflow: hidden; } .photo_type2 > ul > li { position: relative; display: inline-block; width: calc(33% - 12px); margin-right: 15px; margin-bottom: 30px; } .photo_type2 ul li:nth-child(3n+0) { margin-right: 0; } .photo2_area { position: relative; overflow: hidden; /* border-radius: 20px; */ padding-top: 70.5%; } .photo2_area img { position: absolute; width: 100%; max-width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } .shot_info2 {} .photo2_tit { width: 100%; /* overflow: hidden; */ /* text-overflow: ellipsis; */ white-space: break-spaces; font-size: 18px; font-weight: 600; color: #333; /* padding: 15px 0 10px 0; */ margin: 15px 0 10px 0; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 24px; height: 49px; } .info_box2 { margin-bottom: 10px; } .info_box2 dl { font-size: 15px; color: #6f6f6f; } .info_box2 dt { display: inline-block; min-width: 50px; float: left; } /* //포토게시판(type2) */ /* 홍보영상 */ .video_wrap { background-color: #eff5fc; width: 100%; padding: 55px; } .video_wrap.mb { margin-bottom: 44px; } .video_wrap .tit .title { font-size: 28px; font-weight: bold; line-height: 50px; } .video_wrap .tit .data { font-size: 16px; } .video_wrap .tit .data span { margin-right: 20px; } .video_wrap .con.mt { margin-top: 44px; } .video_wrap .con .box { float: left; } .video_wrap .con .video { width: calc(50% - 50px); height: 344px; overflow: hidden; margin-right: 50px; background-color: #000; } .video_wrap .con .video iframe { width: 100%; height: 100%; } /* 자체파일 제공시 사용 익스플로러 재생 확인해봐야함 .video_wrap .con .video video { width: 100%; height: 344px; min-height: 344px; } */ /* 오른쪽 자막높이랑 맞추기 위해서 높이값줌 */ .video_wrap .con .subtitles { width: 50%; height: 344px; background-color: #fff; overflow-y: auto; padding: 40px; } .video_wrap .con .subtitles .blind { position: absolute; left: -9999px; width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden; } .video_wrap .con .subtitles .blind.onshow:focus { display: block; position: relative; left: 0; width: auto; height: auto; padding: 10px; background: #0a276d; color: #fff; font-size: 14px; line-height: normal; overflow: hidden; opacity: 1; } /* //홍보영상 */ /* 썸네일 리스트 */ .results-wrap.webzine .con .info .tit { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list_info { position: relative; font-size: 14px; color: #888; } .write_box span::after { content: ''; display: inline-block; width: 1px; height: 12px; vertical-align: middle; background-color: #888; margin: 0 12px; } .write_box span:last-child::after { display: none; } .write_box .icon_file { vertical-align: middle; } .results-wrap.webzine .con .info .txt { -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5em; height: 2.8em; } .results-wrap.webzine .con .logo { max-height: 120px; overflow: hidden; } .results-wrap.webzine .con .logo img { width: 100%; min-height: 120px; } /* //썸네일 리스트 */ /* 미디어쿼리 */ @media all and (max-width:1200px) { .section.board { padding: 23px 0; } .section.board2 {} .wrap.board, .wrap.board_content { padding-top: 0; /* margin-bottom: 50px; */ } .board-search-wrap {} .board_content .page_topbottom.mt { /*margin-top: 30px;*/ } .board-select { width: calc(50% - 10px); margin-right: 20px; margin-bottom: 10px; } .board-select.mmr0 { margin-right: 0; } .board-select .selectbox { /* width: calc(100% - 54px); */ } .board-search { width: 100%; } .board-search div { width: calc(100% - 85px); } .board-search div input { width: calc(100% - 54px); } .wrap33 { margin-bottom: 10px; } .wrap33 .board-select { width: calc(33.3% - 14px); } } @media all and (max-width:900px) { .section.board { padding-top: 30px; } .section.board2 { /* padding-top: 30px; */ /* margin-top: -1%; */ } .board_content .content.mt { margin-top: 40px; } .board_content .page_topbottom.mt { /*margin-top: 20px;*/ } .board_content .content .con { padding: 20px 20px; } .board_content .content .con-reply:before { margin-bottom: 20px; } .board_content .content .con-reply { padding: 0 20px; } .board-select {} .board-select .selectbox {} .board-search {} .board-search div input {} .board-search .btn-board-search {} .board-search .btn-board-search:after { margin-left: 2px; } .board_content .side-info li { font-size: 15px; } .board_content .board-title-wrap { padding: 20px 20px; } .board_content .title { font-size: 16px; } .board_content .file_info { display: block; } .board_content .file_info .tit { display: block; width: 100%; padding: 20px 20px 5px 20px; } .board_content .file_info .list { display: block; width: 100%; padding: 0 20px 15px 20px; } .board_content .file_info .list li {} .board_content .file_info .list a { font-size: 14px; } .board_content .icon_top, .board_content .icon_bottom { padding-left: 20px; } .board_content .icon_top:before {} /* 포토게시판(type1) */ .photo_tit { font-size: 17px; margin-bottom: 5px; } .shot_info { padding: 15px; } .info_box > ul > li { font-size: 14px; } .detail_btns > ul > li { font-size: 14px; } /* 포토게시판(type1) */ /* 포토게시판(type2) */ .photo2_tit { font-size: 17px; } /* 포토게시판(type2) */ } @media all and (max-width:700px) { /* 포토게시판(typ2) */ .photo_type > ul > li { width: calc(50% - 12px); } .photo_type > ul > li:nth-child(3n+0) { margin-right: 20px; } .photo_type > ul > li:nth-child(even) { margin-right: 0; } /* //포토게시판(typ2) */ } @media all and (max-width:600px) { /* 게시판 공용 */ .section.board { padding-top: 10px; } .section.board2 {} .wrap.board, .wrap.board_content { padding-top: 0; } .board_content .content.mt { margin-top: 0; border-top: 0; } .board_content .board-title-wrap { padding: 8px 0 15px 0; } /* //게시판 공용 */ .board-search-wrap { margin-bottom: 20px; padding: 5px 10px 10px 10px; } .board-search-wrap .left, .board-search-wrap .right { float: none; } .board-search-wrap .left.title { width: 100%; } .board-search-wrap .left.form { width: 100%; } .total { line-height: inherit; font-size: 15px; font-weight: normal; letter-spacing: 0; } .board-select { width: 100%; margin-right: inherit; margin-bottom: 5px; } .board-select .selectbox { width: 100%; height: 34px; font-size: 14px; font-weight: normal; } .board-search { width: 100%; } .board-search div { width: calc(100% - 39px); } .board-search div input { width: 100%; height: 34px; font-size: 15px; padding-left: 15px; } .board-search .btn-board-search { width: 34px; height: 34px; background-image: url(/images/bycenter/board/btn-search-m.svg); background-repeat: no-repeat; background-position: center center; margin-top: 27px; } .board-search .btn-board-search:after, .board-search .btn-board-search span { display: none; } .board-search-wrap .form label { display: block; min-width: auto; text-align: left; font-size: 14px; margin-right: 0; margin-bottom: 5px; } /* 답변추가 */ .reply-item li { padding: 10px; margin-bottom: 5px; } .reply-list-wrap .reply-item.mt { margin-top: 20px; } .reply-item .writer, .reply-item .datetime, .reply-item .text-area, .reply-area .writer, .content-reply, .reply-area .counter { font-size: 14px; } .reply-item .text-area.mt { margin-top: 0; } .content-reply.mt { margin-top: 0; } .reply-area .counter + .btn.blue { min-width: 60px; height: 30px; border-radius: 3px; box-sizing: border-box; font-size: 14px; letter-spacing: -1px; padding-bottom: 1px; } .reply-area { padding: 5px 10px; } .reply-area.mt { margin-top: 5px; } .reply-area.mb { margin-bottom: 20px; } /* //답변추가 */ /* 쎔네일 리스트 */ .results-wrap.webzine .con .logo { display: flex; max-height: 190px; justify-content: center; } .results-wrap.webzine .con .logo img { max-width: 100%; min-height: 190px; height: auto; } .write_box { text-align: center; } /* //쎔네일 리스트 */ /* table */ .t-wrap { width: 100%; } .scroll1cont { overflow-y: auto; } table.t1 > thead > tr > th { position: absolute; left: -9999px; width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden; opacity: 0; } table.t1 { display: block; border-width: 1px; } table.t1 > tbody { display: block; } table.t1 > tbody > tr { display: block; overflow: hidden; border-bottom: 1px solid #ddd; box-sizing: border-box; padding: 10px 10px; } table.t1 > tbody > tr:last-child { border-color: #3c3f45; } table.t1 > tbody > tr:last-child > th, table.t1 > tbody > tr:last-child > td { border: 0; } table.t1 > tbody > tr > th, table.t1 > tbody > tr > td { display: block; float: left; border: 0; padding: 0; background-color: transparent; } table.t1 > tbody > tr.tr_notice > th, table.t1 > tbody > tr.tr_notice > td { background-color: transparent; } /*table일경우display: inline-block;보다 공백 안생기고 깔끔하게 보임*/ table.t1 > tbody > tr > th { position: absolute; left: -9999px; width: 1px; height: 1px; font-size: 0; line-height: 0; overflow: hidden; opacity: 0; } table.t1 > tbody > tr > td.ellipsis { width: 100%; font-weight: 400; font-size: 15px; margin-top: 0; border-right: 0; } table.t1 > tbody > tr > td.ellipsis ~ td { margin-top: 4px; margin-right: 10px; padding-right: 10px; border-right: 1px solid #ddd; box-sizing: border-box; line-height: 16px; font-size: 12px; } table.t1 > tbody > tr > td:last-child { border-right: 0 !important; } table.t1 > tbody .reply { margin-right: 5px; } table.t1 > tbody .reply:before { margin-right: 10px; } /* table_icon */ .icon_file { background-size: 12px; height: 16px; width: 13px; background-image: url(/images/bycenter/board/i-file-m.svg); } /* //table_icon */ /* //table */ /* board_content */ .board_content .side-info ul { float: none; display: table; margin: 0; } .board_content .side-info li:after { padding-left: 3px; padding-right: 3px; } .board_content .side-info li { margin-right: 10px; font-size: 12px; } .board_content .side-info li .num { letter-spacing: 0; } .board_content .side-info.mb { margin-bottom: 10px; } .board_content .title { font-size: 15px; } .board_content .content .con { padding: 10px; font-size: 14px; } .board_content .content .con-reply:before { margin-bottom: 10px; } .board_content .content .con-reply { padding: 0 10px; font-size: 14px; } .board_content .content .con p, .board_content .content .con-reply p { line-height: 150%; } .board_content .file_info .tit { padding: 10px 0 5px 0; font-size: 14px; } .board_content .file_info .list { padding: 0 0 5px 0; font-size: 14px; } .board_content .file_info .list li { margin-bottom: 3px; line-height: 14px; } .board_content .file_info .list span { font-size: 14px; margin-right: 4px; } .board_content .file_info .list .file-down { margin-left: 0; padding: 3px 5px 0px 5px } .board_content .file_info .list .file-down:after { margin-left: 2px; background-size: 11px; background-repeat: no-repeat; background-position: center center; } .board_content .page_topbottom.mt { /*margin-top: 15px;*/ } .board_content .arrow_top, .board_content .arrow_bottom { padding: 10px 0; } .board_content .icon_top, .board_content .icon_bottom { width: 23%; padding-left: 0; font-size: 14px; } .board_content .icon_top:before, .board_content .icon_bottom:before { margin-right: 8px; width: 10px; } .board_content .txt_top, .board_content .txt_bottom { width: 77%; padding: 0; font-size: 12px; } .video_text { max-height: 150px; padding: 15px; } /* //board_content */ /* photo */ .photo_wrap { padding: 0; border: 0; } .photo_wrap ul { margin-bottom: -10px; } .photo_wrap ul li { width: calc((100% - 10px) / 2); } .photo_wrap ul li:nth-child(1n), .photo_wrap ul li:nth-child(3n) { margin-right: 10px; } .photo_wrap ul li:nth-child(2n), .photo_wrap ul li:nth-child(4n) { margin-right: 0; } .photo_wrap .tit.mt { margin-top: 3px; margin-bottom: 10px; } /* 4x4 */ .photo_wrap.row_4 li:nth-child(13) .tit.mt, .photo_wrap.row_4 li:nth-child(14) .tit.mt { margin-top: 3px; margin-bottom: 10px; } .photo_wrap.row_4 li:nth-child(15) .tit.mt, .photo_wrap.row_4 li:nth-child(16) .tit.mt { margin-bottom: 0; } /* //4x4 */ /* 4x2 */ .photo_wrap.row_2 li:nth-child(5) .tit.mt, .photo_wrap.row_2 li:nth-child(6) .tit.mt { margin-top: 3px; margin-bottom: 10px; } .photo_wrap.row_2 li:nth-child(7) .tit.mt, .photo_wrap.row_2 li:nth-child(8) .tit.mt { margin-bottom: 0; } /* //4x2 */ .photo_wrap .img { height: 110px; /* 원하는 이미지 비율로 수정 및 세분화 하면됨 (이미지를 원본비율로 확대축소해서 보이게끔 되어있는 상태에서 overflow:hidden 처리가 되어있어서 일일이 값을 줘서 세분화를 시켜야 깔끔한뷰가 나옴) (최소높이값은 잡혀져 있어서 엄청 높이값이 작은사진은 원본비율이 아니고 확대대어서 보여짐) 현재 pc=iphone5 비율로 맞추어놓았음(다른크기의 화면에서는 높이가 작아보일수 있음) */ } .photo_wrap .img img { min-height: 110px; } .photo_wrap .tit .title { font-size: 14px; line-height: 20px; } .photo_wrap .tit .day { display: block; font-size: 12px; } /* //photo */ /* video */ .video_wrap { padding: 20px; } .video_wrap.mb { margin-bottom: 20px; } .video_wrap .tit .title { font-size: 20px; line-height: 30px; } .video_wrap .tit .data { font-size: 12px; } .video_wrap .tit .data span { margin-right: 5px; } .video_wrap .con.mt { margin-top: 10px; } .video_wrap .con .video { width: 100%; margin-right: 0; height: auto; /* pc에서는 오른쪽 자막영역의 높이랑 높이값을 맞춘다고 값을줬지만 모바일에선 1줄로 보이기때문에 원래비율의 높이로 보여도 됨 */ background-color: transparent; } .video_wrap .con .subtitles { width: 100%; height: 150px; padding: 10px; font-size: 14px; line-height: 18px; } .video_wrap .con .subtitles.mt { margin-top: 10px; } /* //video */ /* 포토게시판(type1) */ .photo_type > ul > li { width: 100% } .photo_type > ul > li:nth-child(even) { margin-right: 0; } .photo_type > ul > li:last-child { margin-bottom: 0; } .photo_img { padding-top: 60.5%; } .photo_tit { font-size: 16px; } .detail_btns > ul > li { padding: 5px 0; } /* //포토게시판(type1) */ /* 포토게시판(type2) */ .photo_type2 > ul > li { width: 100%; margin-bottom: 15px; margin-right: 0; } .photo_type2 > ul > li:nth-child(even) { margin-right: 0; } .photo_type2 > ul > li:last-child { margin-bottom: 0; } .photo2_area { padding-top: 60.5%; } .photo2_tit { font-size: 16px; display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; line-height: normal; height: auto; white-space: nowrap; } .info_box2 dl { font-size: 14px; } /* //포토게시판(type2) */ .wrap33 { margin-bottom: 5px; } .wrap33 > div.board-select { width: calc(50% - 10px); margin-right: 20px; } .wrap33 > div:nth-child(2).board-select { margin-right: 0; } .wrap33 > div:nth-child(3).board-select { width: 100%; } .wrap33 .board-select select.selectbox { width: 100%; } } /* ie */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .content-reply.mt { margin-top: 10px; } @media all and (max-width:600px) { .content-reply { font-size: 10px; } .content-reply.mt { margin-top: 0px; } } } /* //미디어쿼리 */ /* 권한별 버튼 */ .btns-wrap { max-width: 1510px; margin: 0 auto; } .btns .btn { display: block; min-width: 90px; height: 40px; border-radius: 4px; box-sizing: border-box; font-size: 16px; letter-spacing: -1px; padding: 0 10px; } .btns.mt { margin-top: 40px; } .btns.mt.page { margin-top: 0; } .btns.right { float: right; } .btn.left { float: left; } .btn.ml { margin-left: 10px; } .btns .btn.blue { background-color: #333; color: #fff; /* border: 1px solid #333; */ } .btns .btn.white { border: 1px solid #808080; box-sizing: border-box; color: #474747; background-color: #fff; } .btns .btn.grey { background-color: #eb391c; color: #fff; } @media all and (max-width:1510px) { .btns.mt.page, .btns.mt { margin-top: 20px; } } @media all and (max-width:900px) { .btns .btn { min-width: 74px; height: 36px; } } @media all and (max-width:600px) { /* btn */ .btns-wrap { display: flex; justify-content: center; } .btns.right { float: none; } .btns .btn { min-width: 60px; height: 30px; border-radius: 3px; box-sizing: border-box; font-size: 14px; letter-spacing: -1px; padding-bottom: 1px; } .btns.mt.page, .btns.mt { margin-top: 20px; } .btn.ml { margin-left: 5px; } /* //btn */ } /* //권한별 버튼 */ /* paging */ .paging.mt { margin-top: 70px; } .pagenav { display: table; margin: 0 auto; } .control, .pages { float: left; } .control:first-child { margin-right: 20px; } .control:last-child { margin-left: 20px; } .paging a { display: block; width: 50px; height: 50px; line-height: 50px; box-sizing: border-box; text-align: center; font-size: 18px; font-weight: 400; color: #000; } .paging a.on { /* border-color: #242b54; */ box-sizing: border-box; background-color: #000; color: #fff; } .paging .p { display: block; float: left; margin-right: 5px; background-color: #fff; } .paging .p:last-child { margin-right: 0; } .paging .first { text-indent: -9999px; border: 1px solid #E2E2E2; background-image: url(/images/bycenter/board/i-paging-first.png); background-repeat: no-repeat; background-position: center center; } .paging .last { text-indent: -9999px; border: 1px solid #E2E2E2; background-image: url(/images/bycenter/board/i-paging-last.png); background-repeat: no-repeat; background-position: center center; } .paging .prev { text-indent: -9999px; border: 1px solid #E2E2E2; background-image: url(/images/bycenter/board/i-paging-prev.png); background-repeat: no-repeat; background-position: center center; } .paging .next { text-indent: -9999px; border: 1px solid #E2E2E2; background-image: url(/images/bycenter/board/i-paging-next.png); background-repeat: no-repeat; background-position: center center; } @media all and (max-width: 1550px) { .paging.mt { margin-top: 30px; } } @media all and (max-width: 900px) { .scroll1cont { overflow-y: auto; } .paging a { width: 30px; height: 30px; line-height: 30px; font-size: 16px; } } @media all and (max-width: 600px) { .control:first-child { margin-right: 10px; } .control:last-child { margin-left: 10px; } .paging.mt { margin-top: 20px; } .paging a { display: block; width: 25px; height: 25px; font-size: 13px; line-height: 25px; } .paging .p { margin-right: -1px; } .paging .last { margin-right: 0; } .paging .first, .paging .last { max-height: 25px; background-size: 10px; } .paging .prev, .paging .next { max-height: 25px; background-size: 5px; } } /* //paging */ /* write */ /* Q&A (글쓰기) */ .write_info { color: #333; padding: 20px 0; } .form_wrap.gray_bg { background-color: #F9FBFC; padding: 20px; } .form_group { padding: 15px 0; } .form_group .box25 { display: inline-block; width: calc(25% - 10px); } .form_group .box50 { display: inline-block; width: calc(50% - 5px); } .block_type label { display: block; color: #333; cursor: auto; margin-bottom: 10px; font-size: 16px; font-weight: 500; } .basic_input input { display: inline-block; width: 100%; background-color: #fff; border-radius: 0; border: 1px solid #dbdbdb; border-radius: 5px; box-sizing: border-box; -webkit-appearance: none; padding: 10px; } .basic_textarea textarea { display: inline-block; width: 100%; font-family: 'Noto Sans KR', sans-serif; background-color: #fff; border-radius: 0; border: 1px solid #dbdbdb; border-radius: 5px; box-sizing: border-box; -webkit-appearance: none; padding: 10px; } .bdbt { border-bottom: 1px solid #dbdbdb; } @media all and (max-width:600px) { .form_wrap.gray_bg { background-color: #fff; padding: 5px 0 0 0; border-top: 1px solid #dbdbdb; } .form_group { padding: 5px 0 10px 0; } .form_group .box25 { width: calc(50% - 10px); } .form_group .box50 { width: 100%; } .block_type label { margin-bottom: 5px; } .basic_input input { padding: 5px 0; } } /* //write */ /* file */ .upload-btn_wrap { overflow: hidden; position: relative; float: left; width: 100px; } .upload-btn_wrap button { display: block; width: 100px; height: 39px; background: #F9FBFC; border: 1px solid #dbdbdb; color: #666; border-radius: 5px 0 0 5px; } .basic_input input.input_file { height: 39px; position: absolute; top: 0; right: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -moz-opacity: 0; } .basic_input input.upload_text2 { float: left; width: calc(100% - 100px); background-color: #fff; color: #333; text-indent: 10px; border-left: 0; border-radius: 0 5px 5px 0; } @media all and (max-width:600px) { .upload-btn_wrap button { height: 29px; } } /* //file */ /* 아코디언 */ .Accordion { margin: 0; padding: 0; border-top: 2px solid #999; border-bottom: 1px solid #ccc; font-family: 'GmarketSansMedium', 'Noto Sans KR', sans-serif; } .Accordion h3 { margin: 0; padding: 0; } .Accordion > * + * { border-top: 1px solid hsl(0, 0%, 82%); } .Accordion-trigger { background: none; color: hsl(0, 0%, 13%); display: flex; font-size: 1rem; font-weight: bold; margin: 0; padding: 1em 2em; position: relative; text-align: left; width: 100%; outline: none; align-items: center; } .Accordion-trigger:focus-visible { border: 2px solid #333; } .Accordion-trigger:before { display: block; content: ''; width: 36px; height: 36px; background-image: url(/images/bycenter/board/icon-q.png); background-repeat: no-repeat; background-position: center center; margin-right: 10px; } .Accordion *:first-child .Accordion-trigger { border-radius: 5px 5px 0 0; } button { border-style: none; } .Accordion button::-moz-focus-inner { border: 0; } .Accordion-title { display: flex; pointer-events: none; border: transparent 2px solid; border-radius: 5px; padding: 0.25em; outline: none; font-family: 'GmarketSansMedium', 'Noto Sans KR', sans-serif; font-weight: 700; font-size: 18px; width: calc(100% - 100px); } .Accordion-icon { width: 36px; height: 36px; pointer-events: none; position: absolute; top: calc(50% - 18px); right: 2em; background-image: url(/images/bycenter/board/icon+.png); background-repeat: no-repeat; } .Accordion-trigger[aria-expanded="true"] .Accordion-icon { background-image: url(/images/bycenter/board/icon-.png); } .Accordion-panel { margin: 0; padding: 1em 1.5em; color: #666; font-weight: normal; font-size: 17px; line-height: 30px; display: flex; } .Accordion-panel:before { display: block; content: ''; width: 36px; height: 36px; background-image: url(/images/bycenter/board/icon-a.png); background-repeat: no-repeat; background-position: center center; margin-right: 20px; } .Accordion-panel > div { width: calc(100% - 65px); } .Accordion-panel > div strong { color: #de5a7b; } .Accordion-panel[hidden] { display: none; } .Accordion-panel:not(hidden) { background-color: #f7f8f9; } @media all and (max-width:900px) { .Accordion-title { font-size: 16px; } .Accordion-panel { font-size: 16px; line-height: 28px; } } @media all and (max-width:600px) { .Accordion-trigger { padding: 5px 0; } .Accordion-title { font-size: 14px; width: calc(100% - 50px); } .Accordion-trigger:before { background-size: 25px; width: 25px; height: 25px; margin-right: 5px; } .Accordion-panel { padding: 10px 0; font-size: 14px; line-height: 22px; } .Accordion-icon { background-size: 25px; width: 25px; height: 25px; right: 0; top: calc(50% - 12.5px); } .Accordion-panel:before { background-size: 25px; width: 25px; height: 25px; margin-right: 10px; } .Accordion-panel > div { width: calc(100% - 44px); } } /* //아코디언 */ /* 모달 */ #dashboard .section-2 > .tit .btns .more { border: 0; width: 85px; height: 30px; background-color: #3A3A3A; float: left; text-align: center; cursor: pointer; } #dashboard .section-2 > .tit .btns .more span { vertical-align: middle; color: #fff; font-size: 14px; line-height: 30px; } .monitoring-alerts { width: 500px; overflow: hidden; background-color: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10001; display: none; } .monitoring-alerts { border: 1px solid #444; } .monitoring-alerts .title { width: 100%; height: 42px; background-color: #444; border-bottom: 1px solid #ddd; } .monitoring-alerts .title .tit { float: left; margin-left: 20px; font-size: 16px; color: #fff; line-height: 40px; font-weight: 500; } .monitoring-alerts .title .close { float: right; width: 40px; height: 40px; border: 0; background-color: #444; color: #fff; cursor: pointer; } .monitoring-alerts .title .close:after { content: 'x'; display: block; vertical-align: middle; text-align: center; font-size: 20px; padding-bottom: 4px; } .monitoring-alerts .con { overflow-y: auto; padding: 20px; } .monitoring-alerts .con .tit { font-size: 22px; color: #333; text-align: center; margin-top: 20px; } .monitoring-alerts .con .txt { font-size: 14px; color: #333; text-align: center; margin-top: 20px; } .monitoring-alerts .con .lock_wrap { display: flex; justify-content: center; } .monitoring-alerts .con .lock { display: flex; align-items: center; margin-top: 30px; margin-bottom: 30px; } .monitoring-alerts .con .lock label { margin-right: 10px; } .monitoring-alerts .con .lock input { border-radius: 4px 0 0 4px; border-right: 0; height: 40px; } .monitoring-alerts .con .lock .btn-lock-save { font-family: 'Noto Sans KR'; padding: 9.5px 15px; border-radius: 0 4px 4px 0; background-color: #78b332; color: #fff; font-size: 16px; } .monitoring-alerts-bg { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background-color: #000; opacity: 0.5; z-index: 10000; display: none; } @media all and (max-width:600px) { .monitoring-alerts { width: 80%; } .monitoring-alerts .con .tit { margin-top: 0; font-size: 18px; } .monitoring-alerts .con .txt { margin-top: 10px; } .monitoring-alerts .con .txt br {} .monitoring-alerts .con .lock { margin-top: 20px; margin-bottom: 10px; } .monitoring-alerts .con .lock label { display: none; } .monitoring-alerts .con .lock input { width: 70%; } .monitoring-alerts .con .lock .btn-lock-save { width: 30%; padding: 9.5px 5px; } } /* //모달 */ /* Col_table */ .col_table { border-collapse: collapse; border-top: 2px solid #333333; border-bottom: 1px solid #dedede; } .col_table tbody tr { border-bottom: 1px solid #dedede; } .col_table tbody tr:last-child { border-bottom: none; } .col_table tbody th, .col_table tbody td { box-sizing: border-box; vertical-align: middle; padding: 12px; } .col_table tbody th { width: 18%; background: #f8f8f8; color: #333; font-weight: 600; } .col_table tbody td { color: #333; /*border-right: 1px solid #dedede;*/ background: #fff; } .col_table tbody td:last-child { border-right: none; } .col_table tbody th.block_th { border-right: 1px solid #dedede; } .col_table tbody td .add_file ul { border-top: none; } .col_table tbody td .add_file ul > li { border-bottom: none; padding: 5px; } @media all and (max-width:900px) {} @media all and (max-width:600px) { /* Col_Table */ .col_table.horizontal { width: 100%; min-width: 100%; display: block; } .col_table.horizontal th, .col_table.horizontal td { width: 100%; font-size: 13px; line-height: 20px; display: block; border-top: none; border-right: none; word-break: keep-all; padding: 8px 0; } .col_table.horizontal th { border-bottom: 1px solid #ddd; padding: 5px 0; word-break: keep-all; display: flex; align-items: center; justify-content: center; } .col_table.horizontal tr:first-child th { border-top: 1px solid #ddd; } .col_table tbody { display: block; } .col_table tbody tr { position: relative; display: flex; flex-flow: wrap; align-items: stretch; } .col_table tbody tr::before { content: ''; position: absolute; display: inline-block; width: 30%; /* height: 100%; */ background: #f8f8f8; z-index: -1; } .col_table tbody th.inline_th { width: 30%; border-bottom: none; } .col_table tbody th.block_th { border-right: none; border-bottom: 1px solid #dedede; } .col_table.horizontal tr:first-child th.inline_th { border-top: none; } .col_table tbody td.inline_td { width: 70%; padding: 5px; } } /* 청년공간 검색(리스트) */ .search_map { width: 100%; border: 1px solid #dfdfdf; } .search_map img { width: 100%; } /* //청년공간 검색(리스트) */ /* 청년공간 검색(상세) */ .section_tit { font-size: 25px; font-weight: 600; color: #000; margin-bottom: 15px; } .second_tit { font-size: 18px; font-weight: 600; color: #002261; margin-bottom: 20px; } .list_tit { font-size: 16px; font-weight: 400; color: #000; margin-bottom: 10px; } .detail_main { display: flex; align-items: center; column-gap: 50px; background: linear-gradient(320deg, rgba(254, 248, 248, 1) 5%, rgb(250 248 255) 35%, rgb(237 246 252) 70%); padding: 50px; margin: 0 auto; margin-bottom: 40px; } .dt_left { position: relative; overflow: hidden; width: calc(50% - 25px); padding-top: 35.5%; } .dt_left img { position: absolute; width: 100%; max-width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } .dt_right { position: relative; width: calc(50% - 25px); } .cate { font-size: 14px; margin-bottom: 5px; } .cate.type1 { color: #0ab2bd; } .cate.type2 { color: #0abd42; } .cate.type3 { color: #4d0abd; } .cate.type4 { color: #3f80d7; } .cate.type5 { color: #f14079; } .dt_tit { font-size: 40px; color: #000; font-weight: 700; margin-bottom: 20px; } .homepage a { word-break: break-word; } .homepage a::after { content: ''; display: inline-block; width: 13px; height: 13px; background: url("/images/bycenter/board/icon_window_black.png") no-repeat; background-size: 100%; margin-left: 10px; vertical-align: middle; } .homepage2 a { color: #333; } .homepage2 a::after { content: ''; display: inline-block; width: 13px; height: 13px; background: url("/images/bycenter/board/icon_window_g.png") no-repeat; background-size: 100%; margin-left: 10px; vertical-align: middle; } .btn_big_blue { width: 165px; display: inline-block; text-align: center; font-size: 18px; font-weight: 600; color: #fff; background-color: #383683; border: 1px solid #383683; padding: 15px 0 } .btn_big_blue_line { width: 165px; display: inline-block; text-align: center; font-size: 18px; font-weight: 600; color: #029ce6; border: 1px solid #029ce6; background-color: #fff; padding: 15px 0 } .btn_layer { position: absolute; right: 0; bottom: 0; } .text { color: #333; font-size: 16px; word-break: keep-all; } .btn_center { text-align: center; } .btn_right { text-align: right; } .btn_big_line { display: inline-block; min-width: 100px; font-size: 18px; font-weight: 600; color: #333333; border: 1px solid #dfdfdf; background: #fff; padding: 10px 0; margin: 0 auto; } .btn_big_blue2 { display: inline-block; min-width: 100px; font-size: 18px; font-weight: 600; color: #fff; border: 1px solid #383683; background: #383683; padding: 10px 0; margin: 0 auto; } .btn_big_gray { display: inline-block; min-width: 100px; font-size: 18px; font-weight: 600; color: #fff; border: 1px solid #656565; background: #656565; padding: 10px 0; margin: 0 auto; } .btn_big_line2 { display: inline-block; min-width: 100px; font-size: 18px; font-weight: 600; color: #383683; border: 1px solid #383683; padding: 10px 15px; margin: 0 auto; } @media all and (max-width:1200px) { .detail_main{ column-gap: 30px; padding: 25px; } .dt_left{ width: calc(50% - 15px); } .dt_right{ width: calc(50% - 15px); } .dt_tit{ font-size: 32px; margin-bottom: 15px; } } @media all and (max-width:900px) { .detail_main { flex-direction: column; margin-bottom: 30px; } .dt_left { width: 100%; padding-top: 55.5%; } .dt_right { width: 100%; padding: 40px 0 0 0; } .btn_layer { position: static; max-width: 100px; float: right; margin: 20px 0 0 0; } .btn_big_blue { width: 140px; font-size: 16px; padding: 12px 0; } .btn_big_blue_line { width: 140px; font-size: 16px; padding: 12px 0; } .btn_big_line { min-width: 95px; font-size: 16px; } .btn_big_line2 { min-width: 95px; font-size: 16px; } .btn_big_blue2 { min-width: 95px; font-size: 16px; } .btn_big_gray { min-width: 95px; font-size: 16px; } } @media all and (max-width:600px) { .second_tit { font-size: 16px; margin-bottom: 10px; } .detail_main { padding: 15px; margin-bottom: 20px; } .dt_tit { font-size: 20px; margin-bottom: 5px; } .dt_right { padding: 15px 0 0 0; } .btn_layer { min-width: 100px; margin: 10px 0 0 0; } .text { font-size: 14px; } .btn_big_blue { font-size: 14px; padding: 10px 0; } .btn_big_blue_line { font-size: 14px; padding: 10px 0; } .btn_big_line { min-width: 80px; font-size: 14px; padding: 8px 0; } .btn_big_line2 { min-width: 80px; font-size: 14px; padding: 8px 8px; } .btn_big_blue2 { min-width: 80px; font-size: 14px; padding: 8px 0; } .btn_big_gray { min-width: 80px; font-size: 14px; padding: 8px 0; } .homepage a::after { margin-left: 4px; } .list_tit{ font-size: 14px; } } /* //청년공간 검색(상세) */ /* 청년공간 예약(상세) */ .dt_left.rsv { height: 100%; padding: 0; } .dt_left.rsv img { position: static; } .dt_left.rsv .slider-for .slide-container { position: relative; overflow: hidden; padding-top: 70.5%; } .dt_left.rsv .slider-for .slick-prev { left: 20px; width: 42px; height: 42px; background: url("/images/bycenter/board/btn_slide_prev.png") no-repeat; z-index: 1; } .dt_left.rsv .slider-for .slick-next:before { content: ''; } .dt_left.rsv .slider-for .slick-next { right: 20px; width: 42px; height: 42px; background: url("/images/bycenter/board/btn_slide_next.png") no-repeat; z-index: 1; } .dt_left.rsv .slider-for .slick-prev:before { content: ''; } .dt_left.rsv .slider-for .slide-container img { position: absolute; width: 100%; max-width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } .dt_left.rsv .slide-btn { position: relative; overflow: hidden; padding-top: 70.5%; cursor: pointer; } .dt_left.rsv .slide-btn img { position: absolute; width: 100%; max-width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } .slider-nav .slick-slide { margin: 0 5px; } .slider-nav .slick-slide.slick-current.slick-active .slide-btn { /*border: 3px solid #000;*/ box-sizing: border-box; } .dt_left.rsv .slide-btn img { box-sizing: border-box; } .dt_left.rsv .slide-btn img:focus { border: 1px dashed #000; box-sizing: border-box; } .cont_section { margin: 0 auto; margin-bottom: 40px; } .cont_section.border_b { border-bottom: 1px solid #e3e3e3; padding-bottom: 40px; } .rsv_hpg { overflow: hidden; border: 1px solid #d0d0d0; padding: 12px; } .hpg_tit { font-size: 18px; color: #333; font-weight: 600; margin-top: 10px; } .btn_medium_blue { min-width: 138px; font-size: 18px; font-weight: 600; text-align: center; color: #fff; background: #383683; } .btn_medium_blue a { display: inline-block; padding: 8px 20px; } .date_wrap { display: flex; flex-flow: wrap; display: -ms-flexbox; -ms-flex-wrap: wrap; } .rsv_half { width: calc(50% - 20px); } .cal_wrap { border: 1px solid #e9e9e9; padding: 15px; } .month { display: flex; justify-content: center; align-items: center; text-align: center; padding: 15px 0 25px 0; } .month span {} .month_text { display: flex; align-items: center; font-size: 20px; color: #000; font-weight: 700; margin: 0 20px; } .calendar_table { border-collapse: collapse; } .calendar_table tr { border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .calendar_table th, .calendar_table td { display: table-cell; font-size: 15px; text-align: left; border-right: 1px solid #fff; /*padding: 10px 12px;*/ } .calendar_table th { border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; border-right: none; text-align: center; color: #333; font-weight: 500; padding: 10px 12px; } .calendar_table th:last-child { border-right: none; } .calendar_table td:last-child { border-right: none; } .calendar_table td { color: #333; background: #f3f3f3; vertical-align: middle; border-bottom: 1px solid #fff; } .calendar_table td a { display: inline-block; padding: 8px 38%; } .calendar_table .center, .col_table .center { text-align: center; } .calendar_table .left { text-align: left; } .calendar_table .bd_right { border-right: 1px solid #d0d2db !important; } .txt_red, .txt_red a { color: #d92929; } .txt_blue, .txt_blue a { color: #167ef3; } .calendar_table td.y { background: #ffe450; } .calendar_table td.sel { background: #000; } .calendar_table td.sel a { color: #fff; } .cal_legend { overflow: hidden; padding: 20px 0; } .cal_legend > ul > li { display: inline-block; float: left; font-size: 15px; color: #333; margin-right: 30px; } .cal_legend > ul > li:last-child { margin-right: 0; } .cal_legend > ul > li::before { content: ''; display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; } .cal_legend > ul > li.n::before { background: #f3f3f3; border: 1px solid #e9e9e9; } .cal_legend > ul > li.y::before { background: #ffe450; } .cal_legend > ul > li.sel::before { background: #000; } .txt_gray { font-size: 16px; color: #666; margin-bottom: 10px; } .time_list { overflow: hidden; border-bottom: 1px dashed #c6c6c6; padding-bottom: 30px; margin-bottom: 30px; } .time_list ul > li { display: inline-block; width: calc(33.3% - 7px); float: left; margin-right: 10px; margin-bottom: 10px; } .time_list ul > li:nth-child(3n+0) { margin-right: 0; } .option_list { overflow: hidden; border-bottom: 1px dashed #c6c6c6; padding-bottom: 30px; margin-bottom: 30px; } .bg_b { position: relative; background-color: #fff; padding: 15px; border: 1px solid #000; border-radius: 10px; } .select_date > ul > li { margin-bottom: 5px; } .select_date > ul > li:last-child { margin-bottom: 0; } .sel_date_txt { display: inline-block; font-size: 15px; color: #000; margin-right: 10px; font-weight: 600; } .sel_date_txt::before { content: ''; display: inline-block; width: 18px; height: 17px; vertical-align: text-top; background: url("/images/bycenter/board/icon_calendar3.png") no-repeat; background-size: 100%; margin-right: 10px; } .btn_del { vertical-align: top; } .not_select { position: absolute; left: 45px; display: inline-block; font-size: 15px; color: #000; margin-right: 10px; font-weight: 600; } .opt_tit { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 10px; } .opt_sel > ul > li { font-size: 15px; color: #717171; margin-bottom: 5px; } .opt_sel > ul > li:last-child { margin-bottom: 0; } .opt_txt { margin-right: 10px; color: #000; font-weight: 500; } .related_files > ul > li { background: #f6f6f6; border-radius: 10px; padding: 10px; margin-bottom: 10px; } .related_files > ul > li::before { content: ''; display: inline-block; width: 32px; height: 32px; background: url("/images/bycenter/board/icon_file.png") no-repeat; background-size: 100%; vertical-align: middle; margin-right: 10px; } @media all and (max-width:900px) { .section_tit { font-size: 20px; margin-bottom: 10px; } .dt_left.rsv .slider-for .slick-prev { width: 35px; height: 35px; background-size: 100%; } .dt_left.rsv .slider-for .slick-next { width: 35px; height: 35px; background-size: 100%; } .dt_left.rsv .slider-for .slide-container { padding-top: 55.5%; } .dt_left.rsv .slide-btn { padding-top: 65.5%; } .rsv_hpg { padding: 8px; } .hpg_tit { font-size: 16px; } .btn_medium_blue { min-width: 120px; font-size: 16px; } .rsv_half { width: 100%; } .rsv_half.mr40 { margin-right: 0 !important; } } @media all and (max-width:600px) { .section_tit{ font-size: 18px; margin-bottom: 5px; } .cont_section { margin-bottom: 20px; } .cont_section.border_b { margin-bottom: 30px; padding-bottom: 30px; } .bg_b { padding: 10px; } .opt_tit { margin-bottom: 5px; } .time_list { padding-bottom: 20px; margin-bottom: 20px; } .time_list ul > li { width: calc(50% - 5px); } .time_list ul > li:nth-child(3n+0) { margin-right: 10px; } .time_list ul > li:nth-child(even) { margin-right: 0; } .calendar_table th { padding: 8px 4%; } .calendar_table td a { padding: 8px 32%; } .sel_date_txt { font-size: 14px; margin-right: 5px; } .sel_date_txt::before { width: 16px; height: 17px; } .opt_sel > ul > li { font-size: 14px; } .not_select { left: 35px; } .related_files > ul > li{ font-size: 14px; } } /* //청년공간 예약(상세) */ /* 예약정보 등록 */ .rsv_infobox { display: flex; flex-flow: wrap; display: -ms-flexbox; -ms-flex-wrap: wrap; border: 1px solid #e3e3e3; padding: 15px; /* background-color: #f7f7f7; */ padding: 40px; } .space_img { position: relative; overflow: hidden; width: 270px; padding-top: 20%; margin-right: 30px; } .space_img img { position: absolute; width: 100%; max-width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } .space_info { width: calc(100% - 300px); margin-top: 30px; } .si_list > ul > li { font-size: 16px; color: #333; } .scroll_text { max-height: 300px; overflow-y: auto; font-size: 16px; border: 1px solid #e9e9e9; padding: 30px; } .agree_check { padding: 10px 0; } .agree_txt { font-weight: 700; } .blue_txt { color: #383683; } .text1 { font-size: 18px; } .scroll_text .line_list > ul > li { font-size: 16px; } @media all and (max-width:1200px) { .space_info { margin-top: 4.5%; } .space_info .dt_tit { font-size: 20px; margin-bottom: 10px; } } @media all and (max-width:900px) { .space_info { width: calc(100% - 220px); margin-top: 2.5%; } .space_img { width: 200px; margin-right: 20px; } .si_list ul li { font-size: 15px; } .scroll_text { font-size: 15px; padding: 20px; } .scroll_text .line_list > ul > li { font-size: 15px; } } @media all and (max-width:700px) { .rsv_infobox { padding: 0; /* background-color: #fff; */ border: 0; } .space_info .dt_tit { font-size: 18px; } .space_img { width: 100%; padding-top: 50%; margin-right: 0; } .space_info { width: 100%; } .space_info .dt_tit { font-size: 18px; margin: 8px 0; } .si_list ul li { font-size: 14px; } .scroll_text { max-height: 200px; font-size: 14px; padding: 15px; } .scroll_text .line_list > ul > li { font-size: 14px; } } /* //예약정보 등록 */ /* 이용동의 */ .g_bg { background: #f6f6f6; border: 1px solid #029ce6; padding: 5px 15px 10px 15px; margin: 20px 0; } @media all and (max-width:900px) { .g_bg { padding: 5px 10px; } .g_bg .basic_check { padding: 20px 0; } } @media all and (max-width:600px) { .g_bg .basic_check { padding: 18px 0; } } @media all and (max-width:413px) { .g_bg { height: 70px; } } /* //이용동의 */ /* 맞춤정책검색(리스트) */ .text_type ul li { text-align: left; border-bottom: 1px solid #dfdfdf; padding: 15px 0; } .t_head { overflow: hidden; margin-bottom: 10px; } .cate_text { display: inline-block; float: left; max-width: 80px; font-size: 15px; line-height: 22px; vertical-align: middle; color: #fff; background: #6a94d0; padding: 3px 10px; margin-right: 10px; } .cate_text.blue { border-radius: 20px; background-color: #1151f2; } .cate_text.red { border-radius: 20px; background-color: #ea182d; } .t_title { display: inline-block; float: left; max-width: calc(100% - 80px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: 18px; color: #333; font-weight: 600; } .t_cont { display: block; clear: both; font-size: 15px; color: #7f7f7f; } .t_cont > span::after { content: ''; display: inline-block; width: 1px; height: 15px; background: #d8d8d8; vertical-align: middle; margin: 0 20px; } .t_cont > span:last-child::after { display: none; } .tab.list { margin: 30px 0; } .tab.list > ul { position: relative; } .tab.list > ul:after { content: ""; display: block; clear: both } .tab.list > ul > li { width: 33.3%; float: left; font-family: 'NanumSquareEB', 'Noto Sans KR', sans-serif; font-size: 20px; text-align: center; margin-bottom: -1px } .tab.list li > a { position: relative; width: 100%; float: left; text-decoration: none; border: 1px solid #eee; border-bottom-color: #029ce6; background: #fafafa; color: #333; padding: 10px 0; } .tab.list li > a span { display: inline-block; padding: 6px 25px 6px 25px; letter-spacing: -1px; cursor: pointer } .tab.list li .tab_cont { width: 100%; position: absolute; top: 90px; left: 0; list-style: none; border: 0; margin: 0; padding: 0; } .tab.list li .tab_cont:after { content: ""; display: block; clear: both } .tab.list li .tab_cont .more { font-family: 'NanumSquareR', 'Noto Sans KR', sans-serif; font-size: 15px; color: #6c6c6c; } .tab.list ul > li > ul > li { position: relative; width: 100%; float: none; text-align: left; color: #333; margin: 0 0 8px 0; } .tab.list ul > li > ul > li a { float: none; padding: 0; margin: 0; border: 0 !important; color: #666 !important; font-weight: normal; background: transparent; letter-spacing: normal } .tab.list ul > li > ul > li a:hover, .tab.list ul > li > ul > li a:active, .tab.list ul > li > ul > li a:focus { color: #000 !important; text-decoration: underline } .tab.list ul > li > ul > li time, .tab.list ul > li > ul > li .time { position: absolute; top: 0; right: 0; color: #767676 } .tab.list ul > li > ul > li.more { position: absolute; top: -30px; right: 0; border: 0 !important; background: transparent } .tab.list li.active > a { border: 1px solid #029ce6; border-bottom: 1px solid #fff; margin-top: -1px; background: transparent; color: #029ce6; } .tab.list li.active > a span { padding-top: 7px; font-weight: bold } .tab.list.jx { height: auto } .tab.list.jx ul { border: 0 } .tab.list.jx li { float: none; position: relative } .tab.list.jx li a { float: none; display: block; font-weight: bold; color: #333; border: 1px solid #eee !important; border-bottom-color: #ccc !important; background: #fafafa !important } .tab.list.jx li ul { position: static; display: block; left: 0; top: 0; padding: 5px 0 } .tab.list.jx li li a { display: inline; border: 0 !important; background: none !important; font-weight: normal } .tab.list.jx li li.more { top: 7px; right: 15px } .total_wrap { background: #f7faff; padding: 30px; margin-bottom: 40px; } .total_wrap .section_tit { margin-bottom: 0; } .total_wrap .section_tit > span { font-size: 18px; } @media all and (max-width:700px) { .t_head { margin-bottom: 3px; } .cate_text { font-size: 13px; line-height: 20px; padding: 0 8px; } .t_title { font-size: 15px; } .t_cont { font-size: 14px; } .tab.list > ul > li { font-family: 'GmarketSansMedium', 'Noto Sans KR', sans-serif; font-size: 14px; } .tab.list li > a span { padding: 5px 0; } .tab.list li > a { padding: 5px 0; } .tab.list li .tab_cont { top: 60px; } .tab.list li .tab_cont .more { font-size: 13px; } .total_wrap { padding: 20px; margin-bottom: 20px; } .total_wrap .section_tit > span { font-size: 14px; } .t_cont > span { display: block; width: 100%; } .t_cont > span::after { display: none; } } /* //맞춤정책검색(리스트) */ /* 맞춤정책검색(상세) */ .blue_round { border-radius: 40px 10px 40px 10px; background: #f1f9fd; padding: 50px; margin-bottom: 50px; } .round_tit { font-family: 'NanumSquareEB', 'Noto Sans KR', sans-serif; font-size: 30px; color: #029ce6; margin-bottom: 10px; } .round_txt { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; color: #333; font-size: 18px; word-break: keep-all; } .col_table.horizontal td .line_list > ul > li { font-size: 15px; } @media all and (max-width:1200px) { .round_tit { font-size: 28px; } .round_txt { font-size: 16px; } } @media all and (max-width:700px) { .blue_round { border-radius: 30px 5px 30px 5px; padding: 30px; margin-top: 20px; margin-bottom: 30px; } .round_tit { font-size: 20px; margin-bottom: 0; } .round_txt { font-size: 14px; } } @media all and (max-width:600px) { .col_table.horizontal td .line_list > ul > li { font-size: 13px; } } /* //맞춤정책검색(상세) */ /* 청년정책 검색(리스트) */ .dtsc_con { display: none; } .toggle_btn { font-size: 18px; color: #fff; border-radius: 5px; padding: 15px 40px 15px 20px; background: #383683 url("/images/bycenter/common/arrow_down_on.png") no-repeat; background-position: center right 20px; } .toggle_btn.on { background: #383683 url("/images/bycenter/common/arrow_top_on.png") no-repeat; background-position: center right 20px; } .search_group > dl { display: flex; flex-flow: wrap; display: -ms-flexbox; -ms-flex-wrap: wrap; align-items: center; margin-bottom: 15px; } .search_group > dl:last-child { margin-bottom: 0; } .search_group > dl > dt, .search_group > dl > dt label { display: inline-block; min-width: 130px; float: left; color: #333333; font-weight: 600; font-size: 22px; } .search_group > dl > dd { display: inline-block; width: calc(100% - 130px); float: left; } .search_group > dl > dd input.form100 { width: 100%; height: auto; font-size: 15px; padding-left: 10px; background-color: #fff; border: 1px solid #333; padding: 10px; /* border-radius: 5px; */ box-sizing: border-box; height: 54px; } ul.cbox_tags { list-style: none; } ul.cbox_tags li { display: inline; } ul.cbox_tags li label { display: inline-block; background-color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(139, 139, 139, 0.3); color: #333; border-radius: 4px; white-space: nowrap; margin: 3px 0px; } .board-search-wrap .form ul.cbox_tags li label { min-width: 100px; font-size: 15px; font-weight: 400; line-height: 35px; text-align: center; box-sizing: border-box; } ul.cbox_tags li input[type="checkbox"]:checked + label { border: 1px solid #0ab2bd; background-color: #0ab2bd; color: #fff; transition: all 0.2s; box-sizing: border-box; padding: 0 15px; } ul.cbox_tags li input[type="checkbox"] { position: absolute; } ul.cbox_tags li input[type="checkbox"] { position: absolute; opacity: 0; } ul.cbox_tags li input[type="checkbox"]:focus + label { border: 1px solid #0798a1; box-sizing: border-box; } .spt_state { position: absolute; right: 10px; top: 10px; min-width: 70px; font-family: 'Noto Sans KR', sans-serif; text-align: center; font-size: 14px; color: #fff; /* border-radius: 20px; */ z-index: 2; padding: 5px 0; } .spt_state.ing { background-color: #fdcc49; } .spt_state.end { background-color: #333333; } .info_box2.type2 dt { min-width: 70px; } @media all and (max-width:1200px) { .toggle_btn { font-size: 16px; padding: 12px 35px 12px 15px; background-position: center right 15px; } .toggle_btn.on { background-position: center right 15px; } .search_group > dl > dd .board-select { margin-bottom: 0; } .spt_state { min-width: 65px; font-size: 13px; padding: 3px 0; } } @media all and (max-width:900px) { .spt_state { min-width: 55px; font-size: 11px; line-height: 18px; } .search_group > dl > dd input.form100 { height: 44px; } } @media all and (max-width:700px) { .board-search-wrap .form ul.cbox_tags li label { display: inline-block; min-width: auto; width: calc(25% - 10px); } .board-search-wrap .form ul.cbox_tags li:nth-child(4n+0) label { margin-right: 0; } } @media all and (max-width:600px) { .toggle_btn { font-size: 14px; padding: 10px 35px 10px 12px; background-position: center right 12px; } .toggle_btn.on { background-position: center right 12px; } .search_group > dl > dt { width: 100%; } .search_group > dl > dd { width: 100%; } .search_group > dl > dt, .search_group > dl > dt label { font-size: 14px; } .search_group > dl > dd input.form100 { padding: 8px; height: 34px; } .board-search-wrap .form ul.cbox_tags li label { width: calc(25% - 3px); font-size: 14px; } .spt_state { min-width: 65px; font-size: 13px; line-height: 24px; padding: 2px 0; } } /* //청년정책 검색(리스트) */ /* 청년정책 검색(상세) */ .detail_page.ct .dt_right { padding: 20px 0 0 50px; } .cate.state { display: inline-block; color: #fff; /* border-radius: 30px; */ padding: 5px 15px; margin-bottom: 10px; } .cate.state.blue { background-color: #fdcc49; } .cate.state.red { background-color: #ea182d; } .detail_page.ct .btn_layer { position: static; float: right; margin-top: 20px; } .cont_img { text-align: center; margin-bottom: 30px; } .cont_img img { max-width: 100%; } .col_table tbody td .input-file { width: 100%; } .col_table tbody td .add_file ul > li .input-file .file-name { width: calc(100% - 115px); } @media all and (max-width:900px) { .detail_page.ct .dt_right { padding: 40px 0 0 0; } .col_table tbody td .add_file ul > li .input-file .file-name { width: calc(100% - 105px); } } @media all and (max-width:700px) { .detail_page.ct .dt_right { padding: 30px 0 0 0; } .cate.state { font-size: 13px; padding: 3px 13px; } .col_table tbody td .add_file ul > li .input-file .file-name { width: calc(100% - 85px); } } /* //청년정책 검색(상세) */ /* 리스트형 게시판(리스트) */ .board-search.basic { width: 100%; } .board-search div.box40 { width: calc(40% - 15px); margin-right: 15px; } .board-search div.box20 { width: 20%; margin-right: 15px; } .box20.board-select .selectbox { width: 100%; } .box40.date_search > span { display: inline-block; float: left; } .date_form { width: calc(46% - 1px); } .box40.date_search .date_form input { width: 100%; font-family: 'Noto Sans KR', sans-serif; font-size: 15px; color: #6f6f6f; padding: 0 15px; } .board-search div.box40 input { width: calc(100% - 85px); float: left; } .box40.date_search > span.hyphen { padding-top: 12px; } .box40.date_search .hyphen { width: 8%; text-align: center; } .board-search div.box40.mr0 { margin-right: 0; } @media all and (max-width:900px) { .board-search div.box40 { width: 100%; margin-right: 0; } .box40.date_search { margin-bottom: 10px; } .board-search div.box20 { width: 100%; margin-right: 0; } } @media all and (max-width:600px) { .box40.date_search .date_form input { font-size: 14px; } .box40.date_search { margin-bottom: 5px; } .box40.date_search > span.hyphen { padding-top: 6px; } .board-search .box40 .btn-board-search { margin-top: 0; } .board-search div.box40 input { width: calc(100% - 40px); } } /* //리스트형 게시판(리스트) */ /* 지난 설문조사(리스트) */ .btn_search_line { font-size: 14px; color: #029ce6; border: 1px solid #029ce6; border-radius: 3px; padding: 5px 10px; } .btn_search_line::after { content: ''; display: inline-block; width: 13px; height: 13px; vertical-align: middle; background: url("/images/bycenter/board/saerch2.png") no-repeat; margin-left: 5px; } @media all and (max-width:600px) { .btn_search_line { font-size: 12px; padding: 2px 5px; } } /* //지난 설문조사(리스트) */ /* 지난 설문조사(결과) */ .result_box { padding: 30px 0; } .blue_section { background: #f1f6fd; padding: 30px; margin: 0 0 20px 0; } .survey_tit { font-size: 18px; font-weight: 500; color: #029ce6; } .survey_result { padding: 0 20px; } .survey_result ul { overflow: hidden; margin-top: 15px; } .survey_result ul li { clear: both; overflow: hidden; margin-bottom: 15px; } .survey_result ul li:last-child { margin-bottom: 0; } .cate_tit { display: inline-block; float: left; width: 40%; font-weight: 500; color: #333; } .progress { display: inline-block; float: right; width: calc(60% - 20px); margin: 0 0 0 20px; } .survey_result ul li progress { width: 100%; height: 10px; vertical-align: middle; appearance: none; } .survey_result ul li progress::-webkit-progress-bar { background: #fff; } .survey_result ul li progress::-webkit-progress-value { background: #8c8c8c; } .survey_result ul li.pick progress::-webkit-progress-value { background: #029ce6; } @media all and (max-width:900px) { .blue_section { padding: 25px; } .survey_result ul li { margin-bottom: 10px; } .survey_tit { font-size: 16px; } .cate_tit { font-size: 15px; } } @media all and (max-width:700px) { .result_box { padding: 15px 0; } .blue_section { padding: 15px; margin: 0 0 10px 0; } .survey_tit { font-size: 14px; } .survey_result { padding: 0; } .survey_result ul { margin-top: 10px; } .cate_tit { width: 100%; font-size: 13px; } .progress { width: 100%; margin: 0; } } /* //지난 설문조사(결과) */ /* 자료실(리스트) */ .icon_lock { display: inline-block; width: 12px; height: 19px; background-image: url(/images/bycenter/board/icon_lock_off.png); background-repeat: no-repeat; background-position: center center; vertical-align: middle; } .icon_lock.on { background-image: url(/images/bycenter/board/icon_lock_on.png); } @media all and (max-width:600px) { .icon_lock { background-size: 10px; width: 10px; height: 16px; } table.t1 > tbody > tr > td.m_none { display: none; } } /* 청년행사 */ .event_filter { margin-bottom: 20px; } .event_filter.board-search { float: right; } .event_filter .board-select.year_select .selectbox { width: 100px; } .event_filter .board-select.event_select .selectbox { width: 250px; } @media all and (max-width:1200px) { .event_filter.board-search { width: auto; } .event_filter.board-search div { width: auto; } } @media all and (max-width:600px) { .event_filter.board-search { width: 100%; } .event_filter .board-select.year_select { width: 100%; } .event_filter .board-select.year_select .selectbox { width: 100%; } .event_filter .board-select.event_select { width: calc(100% - 39px); } .event_filter .board-select.event_select .selectbox { width: 100%; } .event_filter.board-search .btn-board-search { margin-top: 0; } } /* 정책문자 알림서비스 */ .gray_line { color: #333; background: #f8f8f8; border: 1px solid #dedede; padding: 30px; } .agree_info { overflow: hidden; padding: 20px 0; } .agree_info .left { display: inline-block; float: left; margin-top: 10px; } .agree_info .right { display: inline-block; width: 75px; float: right; padding: 0; } @media all and (max-width:700px) { .gray_line { font-size: 15px; padding: 20px; } .agree_info { font-size: 15px; } .agree_info .left { margin-top: 0; } .agree_info .right { width: 60px; } } /* 대관하기(목록) */ .section_tit2 { color: #000; font-size: 30px; font-weight: 600; padding-bottom: 10px; border-bottom: 2px solid #333; margin-bottom: 30px; } .rent_list_wrap { max-width: 1510px; margin: 0 auto; } .rent_list { display: flex; flex-wrap: wrap; } .rent_list .group { border: 1px solid #d8d8d8; border-radius: 30px; overflow: hidden; margin-right: 2%; width: 49%; margin-bottom: 2%; padding: 30px; } .rent_list .group:nth-child(2n) { margin-right: 0; } .rent_list .group a { display: flex; align-items: center; } .rent_list .group .img { max-height: 245px; overflow: hidden; flex-basis: 400px; flex-shrink: 0; margin-right: 40px; } .rent_list .group img { width: 100%; min-height: 245px; height: 100%; } .rent_list .group .info { overflow: hidden; } .rent_list .group .info .tit { color: #333; font-size: 36px; font-weight: 900; } .rent_list .group .info p { overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2em; height: 2.4em; } .rent_list .group .info .txt1 { color: #555; font-size: 18px; font-weight: 600; } .rent_list .group .info .txt2 { margin-top: 20px; color: #808080; font-size: 18px; } .rent_list .group .info .txt2:before { display: inline-block; content: ''; width: 30px; height: 17px; background-image: url(/images/bycenter/board/icon_user.png); background-repeat: no-repeat; vertical-align: middle; margin-right: 20px; background-size: 100%; } @media all and (max-width:1510px) { .section_tit2 { font-size: calc(12px + 1.2vw); margin-bottom: 20px; } .rent_list_wrap {} .rent_list {} .rent_list .group { padding: 20px; } .rent_list .group a {} .rent_list .group .img { max-height: 200px; flex-basis: 300px; margin-right: 4%; } .rent_list .group img { min-height: 200px; } .rent_list .group .info {} .rent_list .group .info .tit { font-size: calc(12px + 0.8vw); } .rent_list .group .info .txt1 { font-size: calc(12px + 0.3vw); } .rent_list .group .info .txt2 { margin-top: 5%; font-size: 15px; } .rent_list .group .info .txt2:before { margin-right: 5px; } } @media all and (max-width:1200px) { .section_tit2 {} .rent_list_wrap {} .rent_list {} .rent_list .group {} .rent_list .group a {} .rent_list .group .img { flex-basis: 250px; } .rent_list .group img {} .rent_list .group .info {} .rent_list .group .info .tit {} .rent_list .group .info .txt1 {} .rent_list .group .info .txt2 {} .rent_list .group .info .txt2:before {} } @media all and (max-width:900px) { .section_tit2 {} .rent_list_wrap {} .rent_list {} .rent_list .group { } .rent_list .group a { flex-direction: column; align-items: flex-start; } .rent_list .group .img { margin-right: 0; min-width: 100%; margin-bottom: 15px; } .rent_list .group img {} .rent_list .group .info {} .rent_list .group .info .tit {} .rent_list .group .info .txt1 {} .rent_list .group .info .txt2 {} .rent_list .group .info .txt2:before {} } @media all and (max-width:600px) { .section_tit2 { padding-bottom: 5px; margin-bottom: 15px; } .rent_list_wrap {} .rent_list {} .rent_list .group { width: 100%; margin-right: 0; padding: 15px; border-radius: 15px; } .rent_list .group a {} .rent_list .group .img {} .rent_list .group img {} .rent_list .group .info {} .rent_list .group .info p { line-height: initial; height: initial; } .rent_list .group .info .tit {} .rent_list .group .info .txt1 { margin-top: 5px; } .rent_list .group .info .txt2 { margin-top: 10px; } .rent_list .group .info .txt2:before {} } /* 알림버튼 */ .section_comment { position: relative; } .section_comment .section_tit2 {} .section_comment_btn { display: inline-block; color: #000; font-size: 18px; font-weight: 500; border: 1px solid #e94337; padding: 10px 25px; background-color: #fff; line-height: normal; position: absolute; right: 0; top: 0; } .section_comment_btn:before { display: inline-block; content: ''; width: 21px; height: 21px; background-image: url(/images/bycenter/common/icon_warning.png); background-repeat: no-repeat; vertical-align: middle; margin-right: 10px; background-size: 100%; } @media all and (max-width:1510px) { .section_comment {} .section_comment .section_tit2 {} .section_comment_btn { font-size: 16px; padding: 10px 15px; } .section_comment_btn:before { width: 18px; height: 18px; margin-right: 5px; } } @media all and (max-width:900px) { .section_comment {} .section_comment .section_tit2 {} .section_comment_btn { font-size: 14px; padding: 7px 10px; } .section_comment_btn:before {} } @media all and (max-width:600px) { .section_comment {} .section_comment .section_tit2 {} .section_comment_btn { font-size: 12px; padding: 5px 6px; } .section_comment_btn:before { width: 15px; height: 15px; margin-right: 2px; } } /* 대관하기(예약) */ .calendar { width: 350px; padding: 5px 20px 20px 20px; box-sizing: border-box; border: 1px solid; } .calendar > .header { text-align: center; } .calendar > .header > .title { width: 50%; display: inline-block; } .calendar > .header > .calendar_btn { width: 30px; height: 30px; border: none; padding: 0; background-color: #ffffff; vertical-align: middle; color: black; } .day { width: 100%; display: table; table-layout: fixed; } .calendar > .day > div { display: table-cell; text-align: center; height: 50px; vertical-align: middle; } .calendar > .day > div:first-child { color: red; } .calendar > .day > div:last-of-type { color: blue; } .dates { display: flex; flex-wrap: wrap; width: 100%; } .date { text-align: center; width: calc(100%/7); height: 50px; box-sizing: border-box; line-height: 3; border-radius: 3px; cursor: pointer; } .date:nth-child(7n) { color: blue; } .date:nth-child(7n+1) { color: red; } .last { color: #c8c8c8 !important; } .next { color: #c8c8c8 !important; } .date.n { background: #f3f3f3; color: #aaa; } .selectedDate { background-color: #000; color: white; } .date.selectedDate:nth-child(7n) { color: #fff; } .date.selectedDate:nth-child(7n+1) { color: #fff; } /* 대관하기(예약완료) */ .join_end_box { overflow: hidden; text-align: center; background: #f5f5f5; padding: 50px; } .end_txt_wrap { padding: 30px 0; } .end_txt_wrap .box_info { margin-top: 0; } .end_info { margin: 40px 0; } @media all and (max-width: 700px) { .join_end_box { padding: 30px; } .end_logo img { max-width: 230px; } } /* title 추가 */ .rent_st { font-size: 25px; color: #000; font-weight: 600; margin-bottom: 10px; } @media all and (max-width: 1200px) { .rent_st { font-size: 22px; } } @media all and (max-width: 900px) { .rent_st { font-size: 18px; } } @media all and (max-width: 600px) { .rent_st { font-size: 15px; margin-bottom: 5px; } } /* banner 추가 */ .banner_img{ padding: 50px 0; } @media all and (max-width: 1200px) { .banner_img{ padding: 30px 0; } } @media all and (max-width: 600px) { .banner_img{ padding: 15px 0; } } /* 대관하기(목록) - 2024개편 */ .rentalWrap{ padding:50px 0; } .rtSearchWrap{ display: flex; align-items: center; column-gap: 30px; background: #f8f8f8; padding: 25px; } .rtSearchGroup{ display: flex; column-gap: 20px; align-items: center; } .rtSearchGroup label{ font-size: 18px; color:#000; font-weight: 600; } .rtSearchGroup select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #000; box-sizing: border-box; color: #000; font-size: 18px; font-weight: 400; background: #fff url(/images/bycenter/board/i-select-board.png); background-repeat: no-repeat; background-position: right 15px center; padding: 15px 50px 15px 15px; } .btnSch{ min-width: 100px; background:#000; color:#fff; padding: 15px; } .totalWrap{ font-size: 20px; color: #000; padding: 30px 0; } .totalWrap .bold{ font-weight: 700; } .spaceList > ul{ display: flex; flex-wrap: wrap; column-gap: 40px; grid-row-gap: 40px; } .spaceList > ul > li{ width: calc(25% - 30px); border: 1px solid #000; transition: transform .5s; } .spaceList > ul > li:hover { transform: scale(1.05); } .spaceList > ul > li:hover .spInfoWrap{ background: linear-gradient(320deg, rgba(254, 248, 248, 1) 5%, rgb(250 248 255) 35%, rgb(237 246 252) 70%); } .spInfoWrap{ padding:20px; } .spaceImg{ height: 200px; overflow: hidden; } .spaceImg img{ width:100%; height: 100%; } .spaceCate{ font-size: 15px; color: #002261; font-weight: 400; } .spaceName{ font-size: 20px; color:#000; font-weight: 600; margin-bottom: 20px; } .spInfoGroup { display: flex; justify-content: space-between; align-items: center; color:#000; font-size: 15px; padding: 2px 0px; } .roundBg{ font-size: 14px; font-weight: 500; color: #fff; background: #000; border:1px solid #000; border-radius: 30px; padding: 0 12px; } .roundLine{ font-size: 14px; font-weight: 500; color: #000; border:1px solid #000; border-radius: 30px; padding: 0 12px; } @media all and (max-width:1200px) { .rentalWrap { padding: 25px 0; } .rtSearchWrap { column-gap: 20px; padding: 20px; } .rtSearchGroup label { font-size: 16px; } .rtSearchGroup select { font-size: 16px; } .totalWrap { font-size: 18px; padding: 20px 0; } .spaceList > ul { column-gap: 30px; grid-row-gap: 30px; } .spaceList > ul > li { width: calc(33.3% - 20px); } } @media all and (max-width:900px) { .rtSearchWrap { column-gap: 15px; padding: 15px; } .rtSearchGroup label { font-size: 15px; } .rtSearchGroup select { max-width: 170px; font-size: 15px; background-size: 12px; padding: 10px 25px 10px 10px; } .rtSearchWrap .btnSch { padding: 9px; } .totalWrap { font-size: 16px; padding: 15px 0; } .spaceList > ul { column-gap: 20px; grid-row-gap: 20px; } .spaceList > ul > li { width: calc(33.3% - 14px); } .spaceImg { height: 140px; } .spInfoWrap { padding: 15px; } .spaceCate { font-size: 13px; } .spaceName { font-size: 16px; margin-bottom: 10px; } .spInfoGroup { font-size: 13px; } .roundBg, .roundLine{ font-size: 13px; } } @media all and (max-width:600px) { .rentalWrap { padding: 10px 0; } .rtSearchWrap { flex-wrap: wrap; column-gap: 5px; grid-row-gap: 5px; padding: 10px; } .rtSearchGroup { column-gap: 5px; } .rtSearchGroup label { font-size: 13px; width: 25px; } .rtSearchGroup select { max-width: 125px; font-size: 13px; background-size: 10px; background-position: right 7px center; padding: 5px 10px 5px 5px; } .rtSearchWrap .btnSch { min-width: 45px; font-size: 12px; height: 27px; line-height: 12px; padding: 5px; } .spaceList > ul { column-gap: 15px; grid-row-gap: 15px; } .spaceList > ul > li { width: calc(50% - 8px); } .spaceImg { height: 110px; } .spInfoWrap { padding: 10px; } .spaceCate { font-size: 12px; } .spaceName { font-size: 15px; margin-bottom: 5px; } .spInfoGroup { font-size: 12px; } .roundBg, .roundLine { font-size: 11px; line-height: 17px; padding: 0 8px; } } /* 대관하기(상세) - 2024개편 */ .dt_list > ul > li{ display: flex; column-gap: 20px; font-size: 18px; padding: 15px 25px; background: #ffffff; border-radius: 10px; margin-top: 10px; } .dtAtcTxt{ min-width: 100px; color: #000; font-weight: 700; border-right: 1px solid #e4e4e4; } .dt_right .btnLargeBasic{ float: right; margin-top:25px; } .btnLargeBasic{ min-width: 170px; text-align: center; color: #fff; font-size: 20px; background: #000; padding: 18px 0; } .scheduleList{ max-height: 325px; overflow-y: auto; margin-top: 15px; } .scheduleList > ul > li { display: flex; align-items: center; border-radius: 5px; cursor: default; padding: 5px 17px; margin: 5px 0; } /* 스크롤바 설정*/ .scheduleList::-webkit-scrollbar { width: 6px; } /* 스크롤바 막대 설정*/ .scheduleList::-webkit-scrollbar-thumb { height: 17%; background-color: #000; border-radius: 10px; } /* 스크롤바 뒷 배경 설정*/ .scheduleList::-webkit-scrollbar-track { background-color: #f4f4f4; } .scheduleList > ul > li:nth-child(odd) { background: #f3f3f3; } .timeInfo { width: 130px; color: #000; font-size: 18px; font-weight: 600; } .userName { font-size: 16px; color: #4d4d4d; font-weight: 400; } .cmtTxt{ font-size: 18px; color: #2d335a; background: #e9ebfc; border-radius: 10px; margin-top: 10px; padding: 15px 25px; } .cmtTxt > span{ font-weight: 600; text-decoration: underline; } @media all and (max-width:1200px) { .dt_list > ul > li{ font-size: 16px; padding: 12px 20px; } .btnLargeBasic { min-width: 150px; font-size: 18px; padding: 15px 0; } .timeInfo { font-size: 17px; } .userName { font-size: 15px; } .cmtTxt{ font-size: 16px; padding: 12px 20px; } } @media all and (max-width:900px) { .btnLargeBasic { min-width: 120px; font-size: 16px; } } @media all and (max-width:600px) { .dt_list > ul > li{ column-gap: 15px; font-size: 13px; padding: 10px 10px; margin-top: 8px; } .dtAtcTxt { min-width: 55px; } .dt_right .btnLargeBasic { margin-top: 15px; } .btnLargeBasic { min-width: 100px; font-size: 14px; padding: 10px 0; } .scheduleList { max-height: 180px; margin-top: 0; } .timeInfo { width: 110px; font-size: 15px; } .userName { font-size: 14px; } .cmtTxt{ font-size: 13px; padding: 10px; margin-top: 8px; } }