@charset "utf-8"; .cr::after { display: block; clear: both; content: ''; } /*** 리스트형 게시판 목록 ***/ /* 게시판 공용 */ /* //게시판 공용 */ .section.board { margin: 0 auto; max-width: 1550px; } /* board-search */ .board-search-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; } .board-search-wrap .left { flex-shrink: 0; } .board-search-wrap .total { /* display: flex; */ font-size: 18px; font-weight: 300; color: #666; /* align-items: center; */ } .board-search-wrap .total span { margin: 0 5px; } .board-search-wrap strong { color: #000; margin: 0 2px; } .board-search-wrap i { display: inline-block; margin: 0 15px; width: 1px; height: 15px; background-color: #c8c8c8; content: ''; } .board-select { margin-right: 5px; float: left; } .board-select select.selectbox { font-family: 'Pretendard'; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .board-select select.selectbox::-ms-expand { display: none; } .board-select .selectbox { padding-left: 20px; border: 1px solid #ddd; width: 140px; height: 54px; background-image: url("https://visitbusan.net/archive/images/common/select_down.svg"); background-repeat: no-repeat; background-position: right 15px center; font-size: 18px; font-weight: 300; color: #000; box-sizing: border-box; } .board-select .selectbox option { font-size: 14px; } .board-search { float: left; overflow: hidden; } .board-search div { float: left; } .board-search div input { /* line-height: 30px; ie때문에 주석처리 */ padding-left: 20px; border: 0; border: 1px solid #ddd; width: 340px; height: 54px; background-color: #fff; font-family: 'Pretendard'; font-size: 18px; font-weight: 300; box-sizing: border-box; } .board-search .board-btn-search { display: block; margin-left: 5px; width: 120px; height: 54px; float: left; background-color: #333; border-radius: 0; } .board-search .board-btn-search:after { display: none; width: 20px; height: 20px; vertical-align: middle; background-repeat: no-repeat; background-position: center center; content: ''; } .board-search .board-btn-search span { vertical-align: middle; font-size: 18px; color: #fff; } /* //board-search */ /* table style */ table.t1 { border: 0; border-top: 2px solid #333; width: 100%; /* table-layout: fixed; 테이블내에서 말줄임 속성을 사용하기위해 테이블에 필요한 속성*/ letter-spacing: -0.2px; table-layout: fixed; border-collapse: collapse; box-sizing: border-box; } table.t1>*>tr>th, table.t1>*>tr>td { padding: 16px 15px; border-bottom: 1px solid #DBDBDB; border-right: 1px solid #DBDBDB; text-align: center; } table.t1>*>tr>th:last-child, table.t1>*>tr>td:last-child { border-right: 0; } table.t1>tbody>tr:last-child>th, table.t1>tbody>tr:last-child>td { border-bottom: 1px solid #999999; } table.t1>*>tr>th { font-size: 18px; color: #333; } table.t1>thead>tr>th { border-bottom: 1px solid #333; background-color: #f6f6f6; font-weight: 600; } table.t1>tbody>tr>th { font-weight: normal; font-weight: 700; } table.t1>tbody>tr>td.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } table.t1>tbody>tr>td { font-size: 18px; font-weight: 500; font-weight: 400; color: #333; } table.t1>tbody .tal { text-align: left; } /* table_icon */ .icon_notice1 { display: inline-block; margin-left: 10px; padding: 2px 10px 3px 10px; vertical-align: middle; background-color: #E4007F; font-size: 16px; color: #fff; letter-spacing: 0.5px; border-radius: 3px; } .icon_notice2 { padding: 2px 10px 3px 10px; vertical-align: middle; background-color: #2e928e; font-size: 16px; color: #fff; letter-spacing: 0.5px; border-radius: 3px; } .icon_new:after { display: inline-block; margin-right: 5px; border: 1px solid #4b50b6; width: 20px; height: 20px; vertical-align: middle; font-size: 12px; line-height: 17px; color: #4b50b6; text-align: center; content: 'N'; border-radius: 100%; box-sizing: border-box; } .icon_file { display: inline-block; width: 22px; height: 21px; vertical-align: middle; background-image: url(../../images/board/i-file.png); background-repeat: no-repeat; background-position: center center; } /* //table_icon */ /* //table style */ /*** //리스트형 게시판 목록 ***/ /*** 리스트형 게시판 상세 ***/ /* board_content */ .board_content .side-info { margin-top: 20px; } .board_content .side-info li { margin-right: 30px; float: left; font-size: 1.8rem; font-weight: 500; color: #333; } .board_content .side-info li strong { margin-right: 20px; } .board_content .side-info li:after { display: inline-block; padding-right: 30px; border-right: 1px solid #999; height: 14px; content: ''; } .board_content .side-info li:last-child { margin-right: 0; } .board_content .side-info li:last-child:after { display: none; } .board_content .content { box-sizing: border-box; } .board_content .content .con { padding: 70px 40px; background-color: #fff; font-size: 1.7rem; font-weight: 300; line-height: 25px; color: #333; box-sizing: border-box; } .board_content .content .con-reply { padding: 0 40px; background-color: #fff; font-size: 17px; font-weight: 500; line-height: 25px; color: #333; box-sizing: border-box; } .board_content .content .con-reply .reply { font-weight: 700; color: #e24f74; } .board_content .content .con-reply:before { display: block; margin-bottom: 40px; border-bottom: 1px dashed #ddd; content: ''; } .board_content .content .con p, .board_content .content .con-reply p { line-height: 200%; } .board_content .board-title-wrap { display: flex; align-items: center; flex-direction: column; } .board_content .title { font-size: 3.0rem; font-weight: 700; color: #18152a; letter-spacing: -2px; box-sizing: border-box; } .board_content .title .reply { margin-right: 10px; color: #e24f74; } .board_content .file_info { display: flex; justify-content: flex-start; margin: 0 auto; margin-bottom: 3%; padding: 25px 30px; border: 1px solid #ddd; width: 100%; box-sizing: border-box; } .board_content .file_info .group_wrap { display: flex; align-items: flex-start; flex-direction: column; } .board_content .file_info .group { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 10px; } .board_content .file_info .group:last-child { margin-bottom: 0; } .board_content .file_info .tit { display: flex; font-size: 1.8rem; font-weight: 500; } .board_content .file_info .tit:before { display: inline-block; margin-right: 10px; width: 12px; height: 19px; vertical-align: middle; background-image: url(../../images/board/i-board-view-file.png); } .board_content .file_info .tit span { margin-right: 10px; font-weight: 600; color: #000; } .board_content .file_info .list ul { display: flex; flex-wrap: wrap; } .board_content .file_info .list li { display: flex; color: #666; } .board_content .file_info .list li:last-child { margin-bottom: 0; } .board_content .file_info .list li a { display: inline-block; display: flex; align-items: center; flex-wrap: wrap; margin-right: 5px; font-weight: 400; } .board_content .file_info .list li a:last-child { margin-right: 0; } .board_content .file_info .list li a .file_name { display: inline-block; overflow: hidden; max-width: 350px; white-space: nowrap; text-overflow: ellipsis; } .board_content .file_info .list li:nth-child(1) { margin-right: 15px; font-size: 1.8rem; } .board_content .file_info .list li:nth-child(3) { margin-left: 2px; } .file-view { padding: 0.6em 1.5rem 0.6rem 3.5rem; border: 1px solid #ddd; background: #fff url("https://visitbusan.net/archive/images/icon/fluent-mdl2_page.svg") no-repeat; background-position: left 1.4rem center; font-size: calc(12px + 0.2vw); color: #222; border-radius: 0.5rem; } .file-down { padding: 0.6em 1.5rem 0.6rem 3.5rem; background: #111 url("https://visitbusan.net/archive/images/icon/icon_down.svg") no-repeat; background-position: left 1.4rem center; font-size: calc(12px + 0.2vw); color: #fff; border-radius: 0.5rem; } @media all and (max-width:1550px) { /* board_content */ .board_content .side-info { margin-top: 5px; } .board_content .content .con { padding: 30px 20px; } .board_content .board-title-wrap { padding-bottom: 20px; } .board_content .title { font-size: 2.2rem; } .board_content .file_info .tit span { font-size: calc(12px + 0.4vw); } .board_content .file_info .list li a .file_name { max-width: 300px; } .board_content .file_info .list li:nth-child(1) { font-size: calc(12px + 0.4vw); } .file-view, .file-down { font-size: calc(12px + 0.2vw); } } @media all and (max-width:900px) { /* board_content */ .board_content .file_info .group { margin-bottom: 5px; } .board_content .side-info li { margin-right: 10px; font-size: 1.3rem; } .board_content .side-info li strong { margin-right: 10px; } .board_content .side-info li:after { padding-right: 10px; height: 10px; } .board_content .content .con { font-size: 1.4rem; } .board_content .board-title-wrap { padding-bottom: unset; } .board_content .file_info { padding: 15px; } .board_content .file_info .list li a .file_name { max-width: 190px; } } @media all and (max-width:600px) { /* board_content */ .board_content .side-info { margin-top: 5px; } .board_content .side-info ul { display: flex; justify-content: flex-start; flex-direction: column; } .board_content .side-info li:after { content: none; } .board_content .board-title-wrap { align-items: flex-start; } .board_content .file_info .group { align-items: flex-start; flex-direction: column; margin-bottom: 10px; width: 100%; } .board_content .file_info .list { width: 100%; } .board_content .file_info .list ul { display: block; } .board_content .file_info .list li a { display: unset; } .board_content .file_info .list li a .file_name { max-width: 100%; } .board_content .file_info .list li:nth-child(1) { display: unset; margin-right: unset; } .file-view, .file-down { padding: 3px 8px 2px 8px; background-image: unset; font-size: 1.2rem; } .file-view:after, .file-down:after { margin-bottom: 0; width: 10px; height: 10px; background-size: 10px; } } /* 답변추가 */ .reply-list-wrap {} .reply-list-wrap .reply-item {} .reply-list-wrap .reply-item.mt { margin-top: 50px; } .reply-item li { display: block; margin-bottom: 10px; padding: 20px; border: 1px solid #dbdbdb; background-color: #fff; box-sizing: border-box; } .reply-item li:last-child { margin-bottom: 0; } .reply-item p {} .reply-item .writer { font-size: 16px; color: #333; } .reply-item .datetime { margin-left: 20px; font-size: 16px; color: #999; } .reply-item .text-area { font-size: 16px; color: #999; } .reply-item .text-area.mt { margin-top: 5px; } .reply-area { margin-bottom: 10px; padding: 20px; border: 1px solid #CFD5DE; background-color: #fff; box-sizing: border-box; } .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; border: 0; width: 100%; height: 160px !important; 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; font-size: 16px; line-height: 40px; color: #6D7B91; } .reply-area .counter+.btn.blue { display: block; min-width: 90px; height: 40px; background-color: #242b55; font-size: 16px; color: #fff; letter-spacing: -1px; border-radius: 3px; box-sizing: border-box; } .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; background-color: #0a276d; font-size: 14px; color: #fff; letter-spacing: -1px; border-radius: 3px; box-sizing: border-box; } .reply-item li .btn.red { display: block; min-width: 60px; height: 30px; background-color: #D43300; font-size: 14px; color: #fff; letter-spacing: -1px; border-radius: 3px; box-sizing: border-box; } .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 #666; border-bottom: 1px solid #666; box-sizing: border-box; } .board_content .page_topbottom.mt {} .board_content .arrow_top { padding: 18px 0; border-bottom: 1px solid #dbdbdb; background-color: #fff; box-sizing: border-box; } .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: flex; align-items: center; padding-left: 20px; float: left; font-size: 1.6rem; font-weight: 600; color: #000; } .board_content .icon_top:before { display: inline-block; margin-right: 17px; padding-bottom: 13px; width: 15px; height: 8px; background-image: url("https://visitbusan.net/archive/images/common/select_down.svg"); background-repeat: no-repeat; background-position: center center; content: ''; transform: rotate(180deg); } .board_content .icon_bottom:before { display: inline-block; margin-right: 17px; padding-bottom: 13px; width: 15px; height: 8px; background-image: url("https://visitbusan.net/archive/images/common/select_down.svg"); background-repeat: no-repeat; background-position: center center; content: ''; } .board_content .txt_top, .board_content .txt_bottom { display: block; padding-right: 20px; padding-left: 5%; overflow: hidden; font-size: 1.6rem; font-weight: 500; color: #000; white-space: nowrap; text-overflow: ellipsis; } /* //board_content */ /*** //리스트형 게시판 상세 ***/ /* 홍보영상 */ .video_wrap { padding: 55px; width: 100%; background-color: #eff5fc; } .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 { margin-right: 50px; overflow: hidden; width: calc(50% - 50px); height: 344px; 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 { padding: 40px; overflow-y: auto; width: 50%; height: 344px; background-color: #fff; } .video_wrap .con .subtitles .blind { overflow: hidden; position: absolute; left: -9999px; width: 1px; height: 1px; font-size: 0; line-height: 0; } .video_wrap .con .subtitles .blind.onshow:focus { display: block; padding: 10px; overflow: hidden; position: relative; left: 0; width: auto; height: auto; background: #0a276d; font-size: 14px; line-height: normal; color: #fff; opacity: 1; } /* //홍보영상 */ /* 썸네일 리스트 */ .results-wrap.webzine .con .info .tit { overflow: hidden; width: 100%; white-space: nowrap; text-overflow: ellipsis; } .list_info { position: relative; font-size: 14px; color: #888; } .write_box span::after { display: inline-block; margin: 0 12px; width: 1px; height: 12px; vertical-align: middle; background-color: #888; content: ''; } .write_box span:last-child::after { display: none; } .write_box .icon_file { vertical-align: middle; } .results-wrap.webzine .con .info .txt { height: 2.8em; line-height: 1.5em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .results-wrap.webzine .con .logo { overflow: hidden; max-height: 120px; } .results-wrap.webzine .con .logo img { width: 100%; min-height: 120px; } /* //썸네일 리스트 */ /* 미디어쿼리 */ @media all and (max-width:1550px) { .wrap.board, .wrap.board_content {} .board-search-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; padding: 30px; background-color: #f7f8f9; } .board_content .page_topbottom.mt {} } @media all and (max-width:900px) { .board-search-wrap {} .board-search-wrap .total { font-size: 15px; } .board-search-wrap i { margin: 0 10px; } .board-select .selectbox { padding-left: 10px; width: 100px; height: 45px; font-size: 14px; } .board-select { margin-right: 5px; } .board-search div input { padding-left: 10px; width: 190px; height: 45px; font-size: 14px; } .board-search .board-btn-search { margin-left: 5px; width: 60px; height: 45px; font-size: 14px; } .board-search .board-btn-search span { font-size: 14px; } .board-search .board-btn-search:after { margin-left: 2px; } .board_content .side_info li { font-size: 15px; } .board_content .title { font-size: 1.8rem; } .board_content .file_info { display: block; } .board_content .file_info .list a { font-size: 1.4rem; } .board_content .icon_top, .board_content .icon_bottom {} .board_content .icon_top:before {} .board_content .arrow_top, .board_content .arrow_bottom { padding: 10px 0; } .board_content .icon_top, .board_content .icon_bottom, .board_content .txt_top, .board_content .txt_bottom { font-size: 1.4rem; } table.t1>*>tr>th, table.t1>tbody>tr>td { padding: 10px 10px; font-size: 15px; } .icon_notice1 { display: inline-block; margin-top: -3px; padding: 0px 8px 1px 8px; font-size: 13px; } .icon_notice2 { display: inline-block; margin-top: -3px; padding: 0px 8px 1px 8px; font-size: 13px; } .icon_file { width: 18px; height: 18px; background-size: 16px; } } @media all and (max-width:600px) { /* 게시판 공용 */ .wrap.board_content, .wrap.board { padding-top: 0; /* margin-bottom: 20px; */ } /* //게시판 공용 */ .board-search-wrap { flex-direction: column-reverse; margin-bottom: 15px; padding: 15px; } .board-search-wrap .left, .board-search-wrap .right { width: 100%; float: none; } .board-search-wrap .left { margin-top: 11px; } .board-search-wrap .total { justify-content: center; font-size: 15px; font-weight: normal; line-height: inherit; letter-spacing: 0; } .board-select { margin-right: inherit; margin-bottom: 5px; width: 100%; } .board-select .selectbox { width: 100%; height: 34px; background-size: 12px; font-size: 13px; font-weight: normal; } .board-search { width: 100%; } .board-search div { width: calc(100% - 34px); } .board-search div input { padding-left: 15px; width: 100%; height: 34px; font-size: 13px; } .board-search .board-btn-search { margin-left: 0; width: 34px; height: 34px; background-image: url("https://visitbusan.net/archive/images/common/icon_search_w.svg"); background-repeat: no-repeat; background-position: center center; } .board-search .board-btn-search:after, .board-search .board-btn-search span { display: none; } /* 답변추가 */ .reply-item li { margin-bottom: 5px; padding: 10px; } .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 { padding-bottom: 1px; min-width: 60px; height: 30px; font-size: 14px; letter-spacing: -1px; border-radius: 3px; box-sizing: border-box; } .reply-area { padding: 5px 10px; } .reply-area.mt { margin-top: 5px; } .reply-area.mb { margin-bottom: 20px; } /* //답변추가 */ /* 쎔네일 리스트 */ .results-wrap.webzine .con .logo { display: flex; justify-content: center; max-height: 190px; } .results-wrap.webzine .con .logo img { max-width: 100%; height: auto; min-height: 190px; } .write_box { text-align: center; } /* //쎔네일 리스트 */ /* table */ .t-wrap { width: 100%; } .scroll1cont { overflow-y: auto; } table.t1>thead>tr>th { overflow: hidden; position: absolute; left: -9999px; width: 1px; height: 1px; font-size: 0; line-height: 0; opacity: 0; } table.t1 { display: block; border-width: 1px; } table.t1>tbody { display: block; } table.t1>tbody>tr { display: block; padding: 10px 0; border-bottom: 1px solid #ddd; overflow: hidden; box-sizing: border-box; } 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; padding: 0; border: 0; float: left; background-color: transparent; } /*table일경우display: inline-block;보다 공백 안생기고 깔끔하게 보임*/ table.t1>tbody>tr>th { overflow: hidden; position: absolute; left: -9999px; width: 1px; height: 1px; font-size: 0; line-height: 0; opacity: 0; } table.t1>tbody>tr>td.ellipsis { width: 100%; font-size: 13px; font-weight: 400; } table.t1>tbody>tr>td.ellipsis~td { margin-top: 4px; margin-right: 10px; padding-right: 10px; border-right: 1px solid #ddd; font-size: 12px; line-height: 15px; box-sizing: border-box; } /* table.t1 > tbody > tr > td.ellipsis ~ td:last-child {*/ table.t1>tbody>tr>td.ellipsis { margin-top: 0; border-right: 0; } table.t1>tbody>tr>td:last-child { border-right: 0 !important; } /* table_icon */ .icon_file { height: 16px; background-size: 12px; } /* //table_icon */ /* //table */ /* board_content */ .board_content .side_info ul { display: table; margin: 0; float: none; } .board_content .side_info li { margin-right: 20px; font-size: 14px; } .board_content .side_info li .num { letter-spacing: 0; } .board_content .side_info.mb { margin-bottom: 10px; } .board_content .title { padding: 0px; font-size: 15px; } .board_content .content .con { padding: 20px 10px; font-size: 1.3rem; line-height: 1.8em; } .board_content .page_topbottom.mt { margin-top: 0; } .board_content .arrow_top, .board_content .arrow_bottom { padding: 10px 0; } .board_content .icon_top, .board_content .icon_bottom { padding-left: 0; width: 23%; 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 { padding: 0; width: 77%; font-size: 1.2rem; } /* //board_content */ /* 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 { margin-right: 0; width: 100%; height: auto; /* pc에서는 오른쪽 자막영역의 높이랑 높이값을 맞춘다고 값을줬지만 모바일에선 1줄로 보이기때문에 원래비율의 높이로 보여도 됨 */ background-color: transparent; } .video_wrap .con .subtitles { padding: 10px; width: 100%; height: 150px; font-size: 14px; line-height: 18px; } .video_wrap .con .subtitles.mt { margin-top: 10px; } /* //video */ } /* 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 {} .btns .btn { display: block; padding: 0 10px; min-width: 90px; height: 40px; font-size: 1.6rem; letter-spacing: -1px; border-radius: 4px; box-sizing: border-box; } .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.point1 { background-color: #E4007F; color: #fff; } .btns .btn.point2 { background-color: #4b2e92; color: #fff; } .btns .btn.white { border: 1px solid #808080; background-color: #fff; color: #474747; box-sizing: border-box; } .btns .btn.grey { background-color: #474747; color: #fff; } @media all and (max-width:1300px) { .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 { padding-bottom: 1px; min-width: 60px; height: 30px; font-size: 1.4rem; letter-spacing: -1px; border-radius: 3px; box-sizing: border-box; } .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; font-size: 18px; font-weight: 400; font-weight: 200; line-height: 50px; color: #000; text-align: center; box-sizing: border-box; } .paging a.on { background-color: #333; color: #fff; /* border-color: #242b54; */ box-sizing: border-box; } .paging .p { display: block; margin-right: 5px; float: left; background-color: #fff; } .paging .p:last-child { margin-right: 0; } .paging .first { border: 1px solid #E2E2E2; background-image: url("https://visitbusan.net/archive/images/icon/icon_paging_first.svg"); background-repeat: no-repeat; background-position: center center; } .paging .last { border: 1px solid #E2E2E2; background-image: url("https://visitbusan.net/archive/images/icon/icon_paging_last.svg"); background-repeat: no-repeat; background-position: center center; } .paging .prev { border: 1px solid #E2E2E2; background-image: url("https://visitbusan.net/archive/images/icon/icon_paging_prev.svg"); background-repeat: no-repeat; background-position: center center; } .paging .next { border: 1px solid #E2E2E2; background-image: url("https://visitbusan.net/archive/images/icon/icon_paging_next.svg"); 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: 40px; height: 40px; line-height: 40px; } } @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: 30px; height: 30px; line-height: 29px; } .paging .p { margin-right: -1px; } .paging .last { margin-right: 0; } } /* //paging */ /* write */ /* Q&A (글쓰기) */ .write_info { padding: 20px 0; color: #333; } .form_wrap.gray_bg { padding: 20px; background-color: #F9FBFC; } .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; margin-bottom: 10px; font-size: 16px; color: #333; cursor: auto; } .basic_input input { display: inline-block; padding: 10px; border: 1px solid #dbdbdb; width: 100%; background-color: #fff; border-radius: 0; border-radius: 5px; box-sizing: border-box; -webkit-appearance: none; } .basic_textarea textarea { display: inline-block; padding: 10px; border: 1px solid #dbdbdb; width: 100%; background-color: #fff; font-family: 'Noto Sans KR', sans-serif; border-radius: 0; border-radius: 5px; box-sizing: border-box; -webkit-appearance: none; } .bdbt { border-bottom: 1px solid #dbdbdb; } @media all and (max-width:600px) { .form_wrap.gray_bg { padding: 5px 0 0 0; border-top: 1px solid #dbdbdb; background-color: #fff; } .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; width: 100px; float: left; } .upload-btn_wrap button { display: block; border: 1px solid #dbdbdb; width: 100px; height: 39px; background: #F9FBFC; color: #666; border-radius: 5px 0 0 5px; } .basic_input input.input_file { position: absolute; top: 0; right: 0; height: 39px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -moz-opacity: 0; } .basic_input input.upload_text2 { border-left: 0; width: calc(100% - 100px); float: left; background-color: #fff; color: #333; text-indent: 10px; border-radius: 0 5px 5px 0; } @media all and (max-width:600px) { .upload-btn_wrap button { height: 29px; } } /* //file */ /*** 포토게시판 리스트 ***/ /* 원래 이미지 비율 + 너무작은 이미지만 min-height로 강제로 높이 늘리기 */ .photo_wrap { padding-top: 50px; padding-bottom: 100px; border-top: 2px solid #1c1c1b; border-bottom: 1px solid #1c1c1b; width: 100%; } .photo_wrap ul { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: -2%; } .photo_wrap ul li { display: block; /* 계산된 값으로 넣는데 소수점 한자리까진 괜찮음 두세자리 넘어가면 이것도 안됨 */ border: 1px solid #efefef; /* 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%; margin-bottom: 2%; } .photo_wrap ul li:nth-child(4n) { margin-right: 0; } .photo_wrap ul li a { display: block; } .photo_wrap .img { display: block; border-bottom: 1px solid #efefef; /*이미지 비율에 적절한값으로 수정하면됨*/ overflow: hidden; height: 330px; background-image: url(../../images/common/noimg.png); background-repeat: no-repeat; background-position: center center; background-size: 50%; } .photo_wrap .img img { min-height: 330px; /*이미지 비율에 적절한값으로 수정하면됨*/ } .photo_wrap .tit { display: block; padding: 35px 25px 35px; position: relative; text-align: left; } .photo_wrap .tit.mt { margin-top: 40px; } /* 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 .cate { display: inline-block; padding: 6px 12px; position: absolute; top: -19px; right: 30px; font-size: 16px; font-weight: 500; } .photo_wrap .tit .cate.color1 { background-color: #007ac6; color: #fff; } .photo_wrap .tit .cate.color2 { background-color: #383683; color: #fff; } .photo_wrap .tit .cate.color3 { background-color: #9036ae; color: #fff; } .photo_wrap .tit .cate.color4 { background-color: #8e7c4d; color: #fff; } .photo_wrap .tit .title { display: -webkit-box; overflow: hidden; height: 50px; font-size: 20px; font-weight: 500; line-height: 25px; color: #000; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .photo_wrap .tit .txt { display: -webkit-box; margin-top: 20px; overflow: hidden; height: 65px; font-size: 15px; font-weight: 400; line-height: 22px; color: #666; letter-spacing: -0.2px; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /*** //포토게시판 리스트 ***/ @media all and (max-width:1550px) { .photo_wrap { padding-top: 30px; padding-bottom: 50px; } .photo_wrap ul li { width: 32%; } .photo_wrap ul li:nth-child(4n) { margin-right: 2%; } .photo_wrap ul li:nth-child(3n) { margin-right: 0; } .photo_wrap .tit { padding: 8% 5% 8% 5%; } .photo_wrap .tit .title { height: 2.6em; font-size: calc(12px + 0.5vw); line-height: 1.4em; } .photo_wrap .tit .txt { margin-top: 5%; height: 4.5em; font-size: calc(12px + 0.2vw); line-height: 1.5em; } } @media all and (max-width:600px) { .photo_wrap { padding-top: 20px; padding-bottom: 20px; } .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: 150px; /* 원하는 이미지 비율로 수정 및 세분화 하면됨 (이미지를 원본비율로 확대축소해서 보이게끔 되어있는 상태에서 overflow:hidden 처리가 되어있어서 일일이 값을 줘서 세분화를 시켜야 깔끔한뷰가 나옴) (최소높이값은 잡혀져 있어서 엄청 높이값이 작은사진은 원본비율이 아니고 확대대어서 보여짐) 현재 pc=iphone5 비율로 맞추어놓았음(다른크기의 화면에서는 높이가 작아보일수 있음) */ } .photo_wrap .tit { /* padding: 15% 8% 11% 8%; */ } .photo_wrap .tit .cate { right: auto; font-size: 13px; } .photo_wrap .tit .title { height: 37px; font-size: 15px; line-height: 18px; } .photo_wrap .tit .txt { height: 43px; font-size: 12px; line-height: 15px; } /* //photo */ } /*** 활동게시판(목록) ***/ /* 활동게시판(목록:공통) */ .section.board.mb { margin-bottom: 70px; } .wrap.board_search, .wrap.board_search_content2 {} @media all and (max-width:1550px) { .section.board.mb {} .wrap.board_search, .wrap.board_search_content2 {} } @media all and (max-width:900px) { .section.board.mb {} .wrap.board_search, .wrap.board_search_content2 {} } @media all and (max-width:600px) { .section.board.mb { margin-bottom: 30px; } .wrap.board_search, .wrap.board_search_content2 {} } /* 활동게시판(목록:검색) */ .board-search-wrap2 {} .board-search2 { margin: 0 auto; border: 4px solid #333; max-width: 830px; background-color: #333; border-radius: 60px; } .board-search2 .align { display: flex; } .board-search2 div { flex-basis: 100%; } .board-search2 div label {} .board-search2 div input { padding-left: 30px; border: 0; width: 100%; height: 60px; font-family: 'Pretendard'; font-size: 18px; font-weight: 400; border-radius: 60px 0 0 60px; } .board-search2 .btn-search2 { flex-basis: 100px; background-color: #333; font-family: 'Pretendard'; font-size: 18px; font-weight: 400; color: #fff; border-radius: 0 60px 60px 0; } .total2 { display: flex; align-items: center; flex-wrap: wrap; margin-top: 40px; margin-bottom: 20px; } .total2 p {} .total2 p:nth-child(1) { margin-right: 20px; font-size: 25px; font-weight: 600; color: #000; } .total2 p:nth-child(1) strong { font-weight: 700; color: #4b2e92; } .total2 p:nth-child(2) { font-size: 18px; font-weight: 400; color: #666; } .total2 p:nth-child(2) span {} @media all and (max-width:1550px) { .board-search-wrap2 {} .board-search2 { max-width: 600px; } .board-search2 .align {} .board-search2 div {} .board-search2 div label {} .board-search2 div input { font-size: calc(12px + 0.4vw); } .board-search2 .btn-search2 { font-size: calc(12px + 0.4vw); } .total2 {} .total2 p {} .total2 p:nth-child(1) { font-size: calc(12px + 0.9vw); } .total2 p:nth-child(1) strong {} .total2 p:nth-child(2) { font-size: calc(12px + 0.4vw); } .total2 p:nth-child(2) span {} } @media (max-width: 900px) { .board-search-wrap2 {} .board-search2 { max-width: 500px; } .board-search2 .align {} .board-search2 div {} .board-search2 div label {} .board-search2 div input { height: 50px; } .board-search2 .btn-search2 {} .total2 {} .total2 p {} .total2 p:nth-child(1) {} .total2 p:nth-child(1) strong {} .total2 p:nth-child(2) {} .total2 p:nth-child(2) span {} } @media all and (max-width:600px) { .board-search-wrap2 {} .board-search2 {} .board-search2 .align {} .board-search2 div {} .board-search2 div label {} .board-search2 div input { padding-left: 15px; height: 40px; } .board-search2 .btn-search2 {} .total2 { margin-top: 20px; } .total2 p {} .total2 p:nth-child(1) {} .total2 p:nth-child(1) strong {} .total2 p:nth-child(2) {} .total2 p:nth-child(2) span {} } /* 활동게시판(목록:탭) */ ul.tabs { display: flex; margin: 0px; padding: 0px; font-size: 0; list-style: none; } ul.tabs.mb { margin-bottom: 5%; } ul.tabs:after { display: block; clear: both; content: ''; } ul.tabs li { display: block; margin-left: -1px; padding: 10px 10px; border: 1px solid #ddd; border-bottom-color: #000; background: none; background-color: #f3f3f3; font-size: 20px; font-weight: 500; color: #666; text-align: center; cursor: pointer; box-sizing: border-box; } ul.tabs.tab4 li { width: 25%; } ul.tabs li:first-child { margin-left: 0; border-left: 1px solid #ddd; } ul.tabs li:first-child.current {} ul.tabs li.current { position: relative; background-color: #fff; color: #000; } ul.tabs li.current:before { display: block; border: 1px solid #000; border-bottom-color: #fff; position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); content: ''; } .tab-content { display: none; } .tab-content.current { display: inherit; } @media all and (max-width:1550px) { ul.tabs.tab4 li { padding: 10px 5px; font-size: calc(12px + 0.5vw); } } @media all and (max-width:900px) { ul.tabs.tab4 { flex-wrap: wrap; } ul.tabs.tab4 li { margin-bottom: -1px; width: 25%; } ul.tabs.tab4 li:nth-child(5) { margin-left: 0; } } @media all and (max-width:600px) { ul.tabs.tab4 li { width: 25%; } ul.tabs.tab4 li:nth-child(4) { margin-left: 0; } ul.tabs.tab4 li:nth-child(5) { margin-left: -1px; padding: 5px; } ul.tabs.tab4 li:nth-child(7) { margin-left: 0; } } /* 활동게시판(목록:왼쪽메뉴+게시판) */ .wrap_menu_board { display: flex; justify-content: space-between; } @media all and (max-width:1550px) { .wrap_menu_board {} } @media all and (max-width:1200px) { .wrap_menu_board { flex-wrap: wrap; } } @media all and (max-width:900px) { .wrap_menu_board {} } @media all and (max-width:600px) { .wrap_menu_board {} } /* 활동게시판(목록:왼쪽메뉴) */ .sub_left_menu { flex-basis: 300px; flex-shrink: 0; margin-right: 95px; } .sub_nab_wrap {} .accordion_wrap {} .menu1_name { margin-bottom: 25px; font-size: 28px; font-weight: 600; color: #000; } .accordion_wrap ul { position: relative; } .accordion_wrap>ul>li { margin-bottom: 10px; background-color: #4b2e92; } .accordion_wrap>ul>li>a { display: block; padding: 12px 15px; font-size: 18px; font-weight: 500; color: #fff; } .accordion_wrap>ul>li:hover, .accordion-active {} .accordion_wrap>ul>li a:hover {} .accordion_wrap>ul>li.accordion-active {} .accordion_wrap>ul>li.accordion-active>a { font-weight: 600; color: #fff; } .accordion_wrap>ul>li.accordion-active.not_ul>a { border-bottom: none; } .accordion_wrap>ul>li.accordion-active.not_ul>a:after { display: none; } .accordion_cont>a:after { position: absolute; right: 10px; width: 25px; height: 25px; background-image: url("../../images/board/btn_plus_off.png"); background-repeat: no-repeat; background-position: center center; content: ""; } .accordion-active>a:after { width: 25px; height: 25px; background-image: url("../../images/board/btn_plus_on.png"); content: ""; } .accordion_wrap ul ul { display: none; padding-top: 10px; background-color: #fff; } .accordion_wrap ul ul li { margin-bottom: 10px; border: 1px solid #e0e0e0; position: relative; } .accordion_wrap ul ul li.act { border-color: #000; } .accordion_wrap ul ul li.act a {} .accordion_wrap ul ul a { display: block; padding: 10px 20px; font-size: 18px; font-weight: 500; color: #000; } @media all and (max-width:1550px) { .sub_left_menu { flex-basis: 250px; margin-right: 50px; } .sub_nab_wrap {} .accordion_wrap {} .menu1_name { font-size: calc(12px + 1.0vw); } .accordion_wrap ul {} .accordion_wrap>ul>li {} .accordion_wrap>ul>li>a { font-size: calc(12px + 0.4vw); } .accordion_wrap>ul>li:hover, .accordion-active {} .accordion_wrap>ul>li a:hover {} .accordion_wrap>ul>li.accordion-active {} .accordion_wrap>ul>li.accordion-active>a {} .accordion_wrap>ul>li.accordion-active.not_ul>a {} .accordion_wrap>ul>li.accordion-active.not_ul>a:after {} .accordion_cont>a:after {} .accordion-active>a:after {} .accordion_wrap ul ul {} .accordion_wrap ul ul li {} .accordion_wrap ul ul li.act {} .accordion_wrap ul ul li.act a {} .accordion_wrap ul ul a { font-size: calc(12px + 0.4vw); } } @media all and (max-width:1200px) { .sub_left_menu { flex-basis: 100%; margin-right: 0; } .sub_nab_wrap {} .accordion_wrap {} .menu1_name {} .accordion_wrap ul { /* display: flex; */ } .accordion_wrap>ul>li { /* margin-right: 10px; */ /* flex-basis: 100%; */ background-color: transparent; } .accordion_wrap>ul>li>a { padding: 8px 10px; position: relative; background-color: #4b2e92; } .accordion_wrap>ul>li:hover, .accordion-active {} .accordion_wrap>ul>li a:hover {} .accordion_wrap>ul>li.accordion-active {} .accordion_wrap>ul>li.accordion-active>a {} .accordion_wrap>ul>li.accordion-active.not_ul>a {} .accordion_wrap>ul>li.accordion-active.not_ul>a:after {} .accordion_cont>a:after {} .accordion-active>a:after {} .accordion_wrap ul ul { margin-bottom: -10px; padding-bottom: 10px; } .accordion_wrap ul ul:after { display: block; clear: both; content: ''; } .accordion_wrap ul ul li { margin-right: 5px; margin-bottom: 5px; float: left; } .accordion_wrap ul ul li.act {} .accordion_wrap ul ul li.act a {} .accordion_wrap ul ul a { padding: 5px 10px; } } @media all and (max-width:900px) { .sub_left_menu {} .sub_nab_wrap {} .accordion_wrap {} .menu1_name {} .accordion_wrap ul {} .accordion_wrap>ul>li {} .accordion_wrap>ul>li>a {} .accordion_wrap>ul>li:hover, .accordion-active {} .accordion_wrap>ul>li a:hover {} .accordion_wrap>ul>li.accordion-active {} .accordion_wrap>ul>li.accordion-active>a {} .accordion_wrap>ul>li.accordion-active.not_ul>a {} .accordion_wrap>ul>li.accordion-active.not_ul>a:after {} .accordion_cont>a:after {} .accordion-active>a:after {} .accordion_wrap ul ul {} .accordion_wrap ul ul li {} .accordion_wrap ul ul li.act {} .accordion_wrap ul ul li.act a {} .accordion_wrap ul ul a {} } @media all and (max-width:600px) { .sub_left_menu {} .sub_nab_wrap {} .accordion_wrap {} .menu1_name { margin-bottom: 10px; } .accordion_wrap ul {} .accordion_wrap>ul>li {} .accordion_wrap>ul>li>a {} .accordion_wrap>ul>li:hover, .accordion-active {} .accordion_wrap>ul>li a:hover {} .accordion_wrap>ul>li.accordion-active {} .accordion_wrap>ul>li.accordion-active>a {} .accordion_wrap>ul>li.accordion-active.not_ul>a {} .accordion_wrap>ul>li.accordion-active.not_ul>a:after {} .accordion_cont>a:after {} .accordion-active>a:after {} .accordion_wrap ul ul {} .accordion_wrap ul ul li {} .accordion_wrap ul ul li.act {} .accordion_wrap ul ul li.act a {} .accordion_wrap ul ul a {} } /* 활동게시판(목록:게시판) */ .group_board { flex-basis: 100%; } .photo_wrap.row_3 ul li { width: 32%; } .photo_wrap.row_3 ul li:nth-child(4n) { margin-right: 2%; } .photo_wrap.row_3 ul li:nth-child(3n) { margin-right: 0; } .photo_wrap.row_3 .tit .title2 { display: block; margin-bottom: 10px; overflow: hidden; overflow: hidden; font-size: 22px; font-weight: 700; color: #333; white-space: nowrap; text-overflow: ellipsis; } .photo_wrap.row_3 .tit .cate2 { display: block; margin-bottom: 15px; overflow: hidden; overflow: hidden; font-size: 16px; font-weight: 500; color: #666; white-space: nowrap; text-overflow: ellipsis; } .photo_wrap.row_3 .tit .txt2 { display: block; display: -webkit-box; overflow: hidden; height: 75px; font-size: 16px; font-weight: 500; line-height: 25px; color: #666; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } @media all and (max-width:1550px) { .group_board {} .photo_wrap.row_3 ul li {} .photo_wrap.row_3 ul li:nth-child(2n) {} .photo_wrap.row_3 ul li:nth-child(4n) {} .photo_wrap.row_3 ul li:nth-child(3n) {} .photo_wrap.row_3 .tit .title2 { margin-bottom: 5px; font-size: calc(12px + 0.6vw); } .photo_wrap.row_3 .tit .cate2 { margin-bottom: 5px; } .photo_wrap.row_3 .tit .txt2 { font-weight: 400; } } @media all and (max-width:900px) { .group_board { width: 100%; } .photo_wrap.row_3 ul li { width: 49%; } .photo_wrap.row_3 ul li:nth-child(3n) { margin-right: 2%; } .photo_wrap.row_3 ul li:nth-child(2n) { margin-right: 0; } .photo_wrap.row_3 .tit .title2 { margin-bottom: 0; } .photo_wrap.row_3 .tit .cate2 { margin-bottom: 0; } .photo_wrap.row_3 .tit .txt2 { height: 60px; font-size: 14px; line-height: 20px; } } @media all and (max-width:600px) { .group_board {} .photo_wrap.row_3 ul li { width: 48%; } .photo_wrap.row_3 .tit .title2 {} .photo_wrap.row_3 .tit .cate2 { font-size: 13px; } .photo_wrap.row_3 .tit .txt2 { height: 48px; font-size: 12px; line-height: 16px; } } /*** //활동게시판(목록) ***/ /*** 활동게시판(상세) ***/ .detail_main { display: flex; display: -ms-flexbox; -ms-flex-wrap: wrap; margin: 0 auto; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #e3e3e3; overflow: visible; max-width: 1550px; flex-flow: wrap; } .dt_left { overflow: hidden; position: relative; width: 50%; /* padding-top: 35.5%; */ } .dt_left img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; max-width: 100%; height: 100%; } .dt_right { padding: 50px 0 0 50px; position: relative; width: 50%; } .dt_tag { margin-bottom: 10px; font-size: 16px; font-weight: 500; color: #666; } .dt_tit { margin-bottom: 20px; font-size: 35px; font-weight: 700; color: #000; } .dt_list { font-size: 15px; } .dt_list>dl {} .dt_list>dl>dt { display: inline-block; width: 80px; float: left; font-size: 16px; font-weight: 400; /* margin-right: 20px; */ color: #666; } .dt_list>dl>dt::after { display: inline-block; margin: 0 auto; margin-top: 4px; width: 1px; height: 15px; float: right; background: #ccc; content: ''; } .dt_list>dl>dd { margin-bottom: 10px; padding-left: 100px; vertical-align: middle; font-size: 16px; font-weight: 500; color: #000; } .homepage a { font-weight: 500; color: #333; word-break: break-all; } .homepage a::before { display: inline-block; margin-right: 10px; width: 24px; height: 24px; vertical-align: middle; background-repeat: no-repeat; background-size: 100%; content: ''; } .homepage.icon1 a::before { background-image: url(../../images/board/icon_facebook.png); } .homepage.icon2 a::before { background-image: url(../../images/board/icon_homepage.png); } .homepage.icon3 a::before { background-image: url(../../images/board/icon_instagram.png); } .homepage.icon4 a::before { background-image: url(../../images/board/icon_kakao.png); } .homepage.icon5 a::before { background-image: url(../../images/board/icon_youtube.png); } .homepage.icon6 a::before { background-image: url(../../images/board/icon_naver.png); } .homepage a::after { display: inline-block; margin-left: 10px; width: 13px; height: 13px; vertical-align: middle; background: url("../../images/board/icon_window_black.png") no-repeat; background-size: 100%; content: ''; } .btn_layer { position: absolute; right: 0; bottom: 0; } .text { font-size: 16px; color: #333; word-break: keep-all; } .btn_center { text-align: center; } .btn_right { text-align: right; } .btn_big_line { display: inline-block; margin: 0 auto; padding: 10px 0; border: 1px solid #dfdfdf; min-width: 100px; background: #fff; font-size: 18px; font-weight: 600; color: #333333; } .dt_left.rsv { padding: 0; height: 100%; } .dt_left.rsv img { position: static; } .dt_left.rsv .slider-for .slide-container { padding-top: 70.5%; overflow: hidden; position: relative; } .dt_left.rsv .slider-for .slick-prev { left: 20px; z-index: 1; width: 42px; height: 42px; background: url("../../images/board/btn_slide_prev.png") no-repeat; } .dt_left.rsv .slider-for .slick-next:before { content: ''; } .dt_left.rsv .slider-for .slick-next { right: 20px; z-index: 1; width: 42px; height: 42px; background: url("../../images/board/btn_slide_next.png") no-repeat; } .dt_left.rsv .slider-for .slick-prev:before { content: ''; } .dt_left.rsv .slider-for .slide-container img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; max-width: 100%; height: 100%; } .dt_left.rsv .slide-btn { padding-top: 70.5%; overflow: hidden; position: relative; cursor: pointer; } .dt_left.rsv .slide-btn img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; max-width: 100%; height: 100%; } .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; max-width: 1550px; } .section_tit { margin-bottom: 15px; font-size: 25px; font-weight: 600; color: #000; } .line_list {} .list_tit { margin-bottom: 10px; font-size: 16px; font-weight: 700; color: #383683; } .line_list ul {} .line_list ul li { font-size: 16px; font-weight: 400; color: #666; } .section_info_box { padding: 20px 30px; border: 1px solid #e0e0e0; background-color: #f9f9f9; } .section_info_box.mt { margin-top: 40px; } .section_info_box p {} .section_info_box span { font-size: 16px; font-weight: 500; color: #333; } .section_info_box .line { display: inline-block; margin: 0 20px; width: 1px; height: 12px; background-color: #ccc; content: ''; } @media all and (max-width:1200px) { .dt_right { padding: 0 0 0 50px; } .dt_tag { margin-bottom: 5px; } .dt_tit { font-size: calc(12px + 1.7vw); } .dt_list>dl>dd {} } @media all and (max-width:900px) { .dt_tag {} .detail_main { margin-bottom: 30px; padding: 0 0 30px 0; background-color: #fff; } .dt_left { padding-top: 55.5%; width: 100%; } .dt_right { padding: 40px 0 0 0; width: 100%; } .btn_layer { margin: 20px 0 0 0; position: static; max-width: 100px; float: right; } .btn_big_line { min-width: 95px; font-size: 16px; } .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%; } .line_list {} .list_tit {} .line_list ul {} .line_list ul li {} .section_info_box {} .section_info_box.mt {} .section_info_box p {} .section_info_box span {} .section_info_box .line {} } @media all and (max-width:700px) { .cont_section { margin-bottom: 20px; } .dt_tag {} .dt_tit { margin-bottom: 10px; font-size: 20px; } .dt_right { padding: 30px 0 0 0; } .dt_list>dl>dt { margin-right: 0; width: 100%; font-size: 14px; } .dt_list>dl>dt::after { display: none; } .dt_list>dl>dd { padding-bottom: 5px; padding-left: 0; border-bottom: 1px dashed #e0e0e0; font-size: 14px; } .homepage a::before { margin-right: 5px; width: 18px; height: 18px; } .homepage a::after { margin-left: 5px; width: 10px; height: 10px; } .btn_layer { margin: 10px 0 0 0; min-width: 100px; } .text { font-size: 14px; } .btn_big_line { padding: 8px 0; min-width: 80px; font-size: 14px; } .section_tit { margin-bottom: 10px; font-size: 17px; } .line_list {} .list_tit { font-size: 14px; } .line_list ul {} .line_list ul li { font-size: 14px; } .section_info_box {} .section_info_box.mt { margin-top: 20px; padding: 5px 10px; } .section_info_box p {} .section_info_box span { font-size: 13px; } .section_info_box .line { margin: 0 10px; height: 10px; } } /*** //활동게시판(상세) ***/