@charset "utf-8"; /* layout */ #boardWrap { position:relative; width:100%;} .scroll { padding-bottom:15px; overflow-x:auto;} .typeC { clear:both; } .typeR { float:right; } .typeL { float:left; } .tal { text-align:left; } .tar { text-align:right;} .tac { text-align:center; } .essential { color:var(--color-point-red); } .lineL { border-left:1px solid #e0e0e0; } .full { width:100%; } .w30 { width:30%; } .w20 { width:20%; } .thumblist_none { flex:0 1 100%; width:100%; padding:3em 0 !important; text-align:center; font-size:1.033em; font-weight:400; justify-content: center; } /* icon */ .icon-calendar { background:url(../images/bbs/icon_calender.svg) no-repeat 50% 50% / auto 16px;width:16px;height:16px;display:block; } .icon-feel { background:url(../images/bbs/icon_feel.png) no-repeat 0 center;width:20px;height:20px;display:block} .icon-date { background:url(../images/bbs/icon_date.png) no-repeat 0 center;width:15px;height:14px;display:inline-block;vertical-align:middle} .icon-file { background:url(../images/bbs/icon_file.png) no-repeat 0 center / auto 100%; width:15px;height:14px;display:inline-block;vertical-align:middle} /* Check box */ .check_input { position:absolute; width:1px; height:1px; opacity:0; } .check_label { position:relative; display:inline-block;vertical-align:middle;padding-left:30px; color:#848484; cursor:pointer; line-height:25px; font-weight:400; } .check_label::before { content:""; position:absolute; top:0; left:0; width:25px; height:25px; overflow:hidden; background-color:#efefef; border-radius:50%; } .check_input:checked + .check_label::before { background:#efefef no-repeat 70% 50%; background-image:url(../images/bbs/bg_check.png); } .check_input:focus + .check_label::before { box-shadow:0 0 0 1px #222; } /* Check box */ .check_input1 { position:absolute; width:1px; height:1px; opacity:0; } .check_label1 { position:relative; padding-left:30px; color:#848484; cursor:pointer; line-height:25px; font-weight:400 } .check_label1::before { content:""; position:absolute; top:0; left:0; width:22px; height:22px; overflow:hidden; background-color:#fff; border:1px solid rgba(0,0,0,.1); border-radius:3px; } .check_input1:checked + .check_label1::before { background: no-repeat 70% 50%; background-image:url(../images/bbs/bg_check.png); } .check_input1:focus + .check_label1::before { box-shadow:0 0 0 1px #222; } /* Input radio */ .radio_input { position:absolute; width:1px !important; height:1px !important; opacity:0; } .radio_label { position:relative; padding-left:30px; color:#848484; cursor:pointer; } .radio_label::before { content:""; position:absolute; top:50%; left:0; width:25px; height:25px; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); overflow:hidden; background:#fff; border:1px solid #848484; border-radius:50%; } .radio_input:checked + .radio_label::before { border:.4em solid #262626; } .radio_input:focus + .radio_label::before { outline-offset:2px; outline:2px dotted #222} /*button*/ .btnArea { position:relative; display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; width:100%; margin-top:2%; } .btnArea:not(span) { /*justify-content:center; */justify-content:flex-end;} .btnArea>span { display:flex; gap:1px; flex-wrap:wrap; flex:auto } .btnArea>span+span { justify-content:flex-end; } #boardWrap .btn { overflow:hidden; display:inline-block; position:relative; height:40px; box-sizing:border-box; margin:2px; padding:0 20px; border:1px solid transparent; background-color:var(--color-point-red);border-radius:3px; color:#fff; box-shadow:none; vertical-align:middle; transition:all ease 0.2s;} #boardWrap .btn>span { display:flex; flex-flow:row wrap; justify-content:center; align-items:center; position:relative; z-index:2; height:100%; line-height:1.2em; color:#fff; transition:all ease 0.2s;} #boardWrap .btn.white { background:#fff; border-color:#dedede; font-weight:500; } #boardWrap .btn.white:hover, #boardWrap .btn.white:focus { border-color:#222; filter:drop-shadow(1px 2px 2px #c3c3c3)} #boardWrap .btn.white>span { color:#222; } #boardWrap .btn.sm { padding:0 15px; height:40px; vertical-align:middle; font-size:14px; } #boardWrap .btn.sm.white:hover, #boardWrap .btn.sm.white:focus { background-color:#fff; border-color:#222; } #boardWrap .btn.sm.white:hover span, #boardWrap .btn.sm.white:focus span { color:#222; } #boardWrap .btn.white:hover, #boardWrap .btn.white:focus { background:var(--color-point-red); border-color:var(--color-point-red);} #boardWrap .btn.white:hover span, #boardWrap .btn.white:focus span { color:#fff; } #boardWrap .btn.black { background:#222; border-color:#222; font-weight:500; } #boardWrap .btn.black:hover, #boardWrap .btn.black:focus { background:#222; border-color:#222; filter:drop-shadow(1px 2px 2px #c3c3c3)} #boardWrap .btn.black>span { color:#fff; } #boardWrap .btn.blue {background:var(--color-point-blue);} #boardWrap .btn.blue:focus,#boardWrap .btn.blue:hover{background:#002f57;} /*주말리그 신청서 다운로드 버튼*/ #boardWrap .btn.form_download {background:var(--color-point-blue);color:#fff;border-color:var(--color-point-blue); height: auto;padding: 1.063em 2em;margin-bottom:12px;} #boardWrap .btn.form_download:focus,#boardWrap .btn.form_download:hover{background:#002f57;border-color:#002f57;padding:1.063em 2.5em;} #boardWrap .btn.form_download span{color:#fff;} #boardWrap .btn.form_download span:after{content:'';display:inline-block;background:url(../images/bbs/icon_download.svg) no-repeat center center / 100%; width:16px;height:16px;margin-left:.5em;} @media all and (max-width:1024px){ #boardWrap .btn.form_download {padding:1em 1.875em;} #boardWrap .btn.form_download:focus,#boardWrap .btn.form_download:hover{padding:1em 2em;} #boardWrap .btn.form_download span:after{width:14px;height:14px;} } #boardWrap .excel { background:url(../images/bbs/excel.png) no-repeat 0 50%; padding-left:22px} #boardWrap .btn.round { border-radius:3px; } #boardWrap .btn.big { height:60px; font-size:1.167rem; font-weight:bold } #boardWrap .btn:focus { outline-offset:2px; outline:2px dotted #222} /*tabmenu*/ .bd_tabNav { display:flex; flex-wrap:wrap; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; position:relative; width:100%; margin-bottom:25px; border-top:1px solid #e0e0e0; border-left:1px solid #e0e0e0 } .bd_tabNav>li { display:flex; flex:auto; flex-flow:row wrap; min-width:calc(100% / 10); justify-content:center; align-items:center; border-right:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; font-weight:400; } .bd_tabNav>li>a { display:table; position:relative; width:100%; height:100%; padding:16px 12px; color:#4a4a4a; text-align:center; line-height:1.3; } .bd_tabNav>li>a:hover { color:var(--color-point-blue); } .bd_tabNav>li.tab_on>a { color:#fff; background-color:var(--color-point-blue);font-weight:600; } /*paging*/ .paging { position:relative; width:100%; display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:2px; margin-top:40px; } .paging a { font-size:.94rem; display:flex; justify-content:center; color:#747474; width:35px; height:35px; background: #f2f2f2;border-radius: 3px; line-height:35px;} .paging a.this { font-size:.94rem; color:#fff; font-weight:400; background:#444;} .paging .btn_prev { background:url(../images/bbs/bbs-prev.png) center no-repeat;} .paging .btn_start { background:url(../images/bbs/bbs-prev-end.png) center no-repeat;} .paging .btn_next { background:url(../images/bbs/bbs-next.png) center no-repeat;} .paging .btn_end { background:url(../images/bbs/bbs-next-end.png) center no-repeat;} @media all and (max-width:768px){ .paging a { width:30px; height:30px; line-height:30px; } } /* 검색 */ .headList { display:flex; flex-wrap:wrap; gap:10px 0; align-items:center; justify-content:space-between; border-top:2px solid #222; border-bottom:1px solid rgba(0,0,0,.1); padding:15px 0;} .headList .bdTotal, .headList .SearchInfo fieldset { display:flex; flex-wrap:wrap; } .headList .SearchInfo fieldset { gap:5px 15px; } .headList .bdTotal>li { font-size:1rem; } .headList .bdTotal>li+li { position:relative; margin-left:10px; padding-left:10px; } .headList .bdTotal>li+li::before { position:absolute; left:0; top:50%; width:1px; height:50%; background:rgba(0,0,0,.3); content:''; transform:translateY(-50%); } .headList .bdTotal>li strong { color:var(--color-point-blue); font-weight:500; } .headList .SearchInfo input, .headList .SearchInfo select, .headList .SearchInfo button { font-size:0.938rem;border-radius: 3px; } .headList .SearchInfo select {background-position:right 10px center;} .headList .SearchInfo .data_list, .headList .SearchInfo .search_list { display:flex; gap:2px; } .headList .SearchInfo .data_list { margin-right:15px; } .headList .SearchInfo .data_list>li { position:relative; max-width:10em; } .headList .SearchInfo .data_list>li>input { width:100%; } .headList .SearchInfo .data_list>li+li { margin-left:20px; } .headList .SearchInfo .data_list>li+li::before { position:absolute; left:-16px; content:''; width:10px; height:1px; background:rgba(0,0,0,.5); top:50%; transform:translateY(-50%);} .headList .SearchInfo .data_list>li>a { position:absolute; right:5px; top:50%; width:35px; height:35px; transform:translateY(-50%); display:flex; align-items:center; justify-content:center } .headList .SearchInfo button { width:60px; padding:8px 15px; border-radius:3px;background-color:#222; color:#fff; vertical-align:middle; min-height:40px; } .headList .list_align { display:flex; gap:0 10px; } .headList .list_align>li a { display:block; position:relative; line-height:1; padding:7px 20px; border:1px solid rgba(0,0,0,.1); border-radius:20px; font-size:15px; font-weight:500;} .headList .list_align>li a.on { border-color:var(--color-point-blue); background:var(--color-point-blue); color:#fff } /* 문화관광용 검색단 */ .tour_search_box .tab { position:relative; display:flex; flex-wrap:wrap; border:3px solid #282828; margin-bottom:25px; } .tour_search_box .tab>li { width:33.333%; padding:0 20px;} .tour_search_box .tab>li+li { border-left:1px solid rgba(0,0,0,.1); } .tour_search_box .tab>li>button { display:block; width:100%; height:100%; text-align:left; font-size:1.03rem; font-weight:500; height:70px; } .tour_search_box .search_box { display:none; position:absolute; width:calc(100% + 6px); top:70px; background:#f2f2f2; border:3px solid #282828; border-top-width:0; left:-3px; z-index:3; padding:25px; } .tour_search_box .search_box.active { display:flex; } .tour_search_box .search_box>ul { display:flex; flex-wrap:wrap; gap:15px 25px; } .tour_search_box .search_box>ul>li { display:flex; align-items:center; gap:0 5px; color:#222; font-weight:400 } .tour_search_box .search_box input[type="text"] { width:80%; } .tour_search_box .search_box button[type="submit"] { width:20%; background:var(--color-point-blue); color:#fff; } /* Desktop Device */ @media all and (max-width:1024px){ .headList .bdTotal, .headList .SearchInfo fieldset { flex:0 1 100%; } .headList .SearchInfo fieldset { justify-content:space-between; } .headList .SearchInfo { width:100%; } .headList .SearchInfo .data_list { margin-right:0; flex: 0 1 auto; } .headList .SearchInfo .search_list>li:last-child{flex:auto;} .headList .SearchInfo .search_list>li input { width:100%; text-overflow: ellipsis;} } @media all and (max-width:768px){ .headList .list_align { gap:0 5px; } .headList .list_align>li a { padding:5px 12px; border:1px solid rgba(0,0,0,.1); font-size:14px;} /* 문화관광용 검색단 */ .tour_search_box .tab>li { padding:0 15px;} .tour_search_box .tab>li>button { font-size:1rem; height:60px; } .tour_search_box .search_box { top:60px; padding:15px; } .tour_search_box .search_box>ul { gap:10px 20px; } } @media all and (max-width:668px){ .headList .SearchInfo .data_list { flex:0 1 100%;} .headList .SearchInfo .data_list>li { max-width:inherit; flex:0 1 calc(50% - 10px) ;} .headList .SearchInfo .search_list { flex:0 1 100%;flex-wrap: wrap; } .headList .SearchInfo .search_list>li.key_wrap { flex:auto; } .headList .SearchInfo .search_list>li.key_wrap > *{width:100%;} .headList .SearchInfo .search_list>li{ flex:0 1 100%;} .headList .SearchInfo .search_list>li select { width:100%; } .headList .SearchInfo .search_list>li.key_wrap{width:calc(100% - 60px - 3px);} .headList .SearchInfo .search_list>li #categoryUid2{width:100%;} /* 문화관광용 검색단 */ .tour_search_box .tab>li { width:100%; } .tour_search_box .tab>li>button { font-size:1rem; height:45px; } .tour_search_box .tab>li+li { border-left:none; border-top:1px solid rgba(0,0,0,.1); } .tour_search_box .search_box { top:137px; } } /*list basic_table*/ .list_group .bbs_table { width:100%; margin:1.25rem 0; table-layout:fixed; border-top:2px solid #222 } .list_group .bbs_table th, .bbs_table td { text-align:center; padding:18px 5px;} .list_group .bbs_table td.title { text-align:left; } .list_group .bbs_table th { font-weight:400; color:#282828;border-bottom:1px solid rgba(0,0,0,.1);} .list_group .bbs_table td { border:1px solid transparent; border-bottom:1px solid rgba(0,0,0,.1); border-left:none; border-right:none ;transition:all .2s ease;} .list_group .bbs_table td .icon-new { display:inline-block; width:17px; height:17px; position:relative; margin-left:5px; vertical-align:middle; margin-top:-3px } .list_group .bbs_table td .icon-new::before { position:absolute; width:100%; height:100%; background:#e93030; text-align:center; line-height:18px; content:'N'; color:#fff; font-weight:500; border-radius:100%; font-size:.75rem } .list_group .bbs_table .colNotice { background-color:#f4f6f9;} /* .list_group .bbs_table .colNotice .icoNotice span { position:relative; display:inline-block; background:#222; color:#fff; padding:5px 10px; font-size:.88rem; line-height:1; border-radius:3px;} */ .list_group .bbs_table .colNotice .icoNotice span{ display:inline-block;vertical-align: middle; width:18px; height:18px; background:url(../images/bbs/icon_notice.svg) center no-repeat;background-size:auto;font-size:0;} .list_group .bbs_table .icon_file { display:inline-block;vertical-align: middle; width:18px; height:18px; background-image:url(../images/bbs/icon_file.png); background-repeat:no-repeat; background-position:50% 50%; background-size:auto;} .list_group .bbs_table .txt_line1, .list_group .bbs_table .txt_line2, .list_group .bbs_table .txt_link1, .list_group .bbs_table .txt_link2 { display:inline-block; padding:5px 10px; font-size:.88rem; line-height:1; border-radius:3px; } .list_group .bbs_table .txt_line1 { color:#38393B; border:1px solid #38393B;} .list_group .bbs_table .txt_line2 { color:var(--color-point-blue); border:1px solid var(--color-point-blue);} .list_group .bbs_table .txt_link1 { background-color:#38393B; color:#fff;} .list_group .bbs_table .txt_link2 { background-color:var(--color-point-blue); color:#fff } .list_group .bbs_table .bbslist_none { padding:5% 3%; text-align:center} .list_group .bbs_table tbody td b.mtitle { display:none;} .list_group .bbs_table tr { transition:0.3s ease 0s; } /* 모바일용 타이틀 */ .mtitle { display:none; } /* hover 효과 */ .list_group .bbs_table tbody tr td:first-child { border-radius:0; } .list_group .bbs_table tbody tr td:last-child { border-radius:0; } .list_group .bbs_table tbody tr td:first-child { border-left:1px solid transparent; } .list_group .bbs_table tbody tr td:last-child { border-right:1px solid transparent; } .list_group .bbs_table tbody tr:hover { position:relative; z-index:1; filter:drop-shadow(5px 5px 4px #eee); } .list_group .bbs_table tbody tr:hover td { border-color:var(--color-point-blue);border-bottom:1px solid var(--color-point-blue); background-color: #fff; color: var(--color-point-blue);} .list_group .bbs_table tbody tr:hover td:first-child { border-color:var(--color-point-blue); border-radius:.5em 0 0 .5em; } .list_group .bbs_table tbody tr:hover td:last-child { border-color:var(--color-point-blue);border-radius:0 .5em .5em 0; } .list_group .bbs_table tbody tr:hover td.bbslist_none { border-radius:.5em; } /* Desktop Device */ @media all and (max-width:1024px){ .list_group .bbs_table thead, .list_group .bbs_table thead th, .list_group .bbs_table td.file { display:none; } .list_group .bbs_table td { border-bottom:none; padding:3px 5px;text-align:left;} .list_group .bbs_table td.title, .list_group .bbs_table tbody tr td[data-cell-header="심판명"], .list_group .bbs_table tbody tr td[data-cell-header="탁구장명"]{ display:block; width:100%;font-weight:400;font-size:1.125em; } .list_group .bbs_table tbody tr { position:relative; display:block; padding:15px; border-bottom:1px solid rgba(0,0,0,.1);} /* .list_group .bbs_table tbody tr td[data-cell-header="번호"], .list_group .bbs_table tbody tr td[data-cell-header="조회"]{ display:none; } */ .list_group .bbs_table td.name, .list_group .bbs_table td.date, .list_group .bbs_table td.views { display:inline-block;color:#747474 } .list_group .bbs_table td.views[data-cell-header="분류"], .list_group .bbs_table td.views[data-cell-header="클럽명"], .list_group .bbs_table td.name[data-cell-header="심판명"]{color: #222;} .list_group .bbs_table .bbslist_none { display:block; } /* 모바일용 타이틀 */ .mtitle { display:inline-block; font-weight:bold; color:rgba(0,0,0,.74); } .mtitle::after { display:inline-block; vertical-align:middle; content:':'; margin:-3.5px 5px 0; font-weight:300; color:rgba(0,0,0,.5); } /* hover 효과 */ .list_group .bbs_table tbody tr td:first-child { border-radius:0; } .list_group .bbs_table tbody tr td:last-child { border-radius:0; } .list_group .bbs_table tbody tr td:first-child { border-left:1px solid transparent; } .list_group .bbs_table tbody tr td:last-child { border-right:1px solid transparent; } .list_group .bbs_table tbody tr td[data-cell-header="승인여부"]{position: absolute;right: 0;bottom: 15px;} .list_group .bbs_table tbody tr:hover { position:relative; z-index:1; filter:none; /*background-color:#dce3ed; */border-radius:0}; .list_group .bbs_table tbody tr:hover::before { position:absolute; width:100%; height:100%; border-radius:16px; border:1px solid var(--color-point-blue); left:0; top:0; /* content:''; */ } .list_group .bbs_table tbody tr:hover td { border-color:transparent; border-bottom:1px solid transparent; background-color:transparent; } .list_group .bbs_table tbody tr:hover td:first-child { border-color:transparent; border-radius:0; } .list_group .bbs_table tbody tr:hover td:last-child { border-color:transparent; border-radius:0; } .list_group .bbs_table tbody tr:hover td.bbslist_none { border-radius:0; } .list_group .bbs_table tbody tr:hover td.views[data-cell-header="클럽명"], .list_group .bbs_table tbody tr:hover td.views[data-cell-header="분류"], .list_group .bbs_table tbody tr:hover td.name[data-cell-header="심판명"]{color: var(--color-point-blue);} } /*list text_list*/ .list_group .text_list { display:flex; flex-wrap:wrap; gap:30px 1.5em; margin-top:2em } .list_group .text_list>li { position:relative; width:calc((100% - 4.5em) / 4); border:1px solid rgba(0,0,0,.1); padding:1.5em; transition:0.3s ease 0s; } .list_group .text_list>li:hover, .list_group .text_list>li:focus { border-color:var(--color-point-blue); box-shadow:5px 5px 5px rgba(0,0,0,.05);} .list_group .text_list>li.nt_import { background:#f8fafd; } .list_group .text_list>li>a { display:block; } .list_group .text_list>li label { display:block; margin-bottom:5px; } .list_group .text_list>li .cont { position:relative; } .list_group .text_list>li .cont .cate_wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:3px; } .list_group .text_list>li .cont .cate { display:inline-block; flex:0 1 auto; padding:5px 10px; border-radius:3px; background:var(--color-point-blue); color:#fff; line-height:1; font-size:.88rem } .list_group .text_list>li .cont .icon_new { display:inline-block; flex:0 1 auto; } .list_group .text_list>li .cont .icon_new::before { display:inline-block; color:#fff; line-height:1; font-size:.75rem; content:'new'; background:#e93030; border-radius:3px; padding:5px 10px; text-transform:uppercase } .list_group .text_list>li .cont strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:20px; margin-top:5px; line-height:1.4; overflow:hidden; font-weight:500; color:#222 } .list_group .text_list>li .cont .text { margin-top:.75em; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; font-size:17.5px; line-height:1.4; overflow:hidden; color:#747474; } .list_group .text_list>li .cont .data { display:flex; align-items:center; margin-top:1.5em; gap:0 5px; line-height:1; opacity:.64; } @media all and (max-width:1024px){ .list_group .text_list>li .cont strong { font-size:19px; } .list_group .text_list>li .cont .text { font-size:16.5px; } } @media all and (max-width:868px){ .list_group .text_list { gap:20px 1em; } .list_group .text_list>li { width:calc((100% - 2em) / 3); } .list_group .text_list>li .cont strong { font-size:18px; } .list_group .text_list>li .cont .text { font-size:15.5px; } } @media all and (max-width:668px){ .list_group .text_list>li { width:calc((100% - 1em) / 2); } } @media all and (max-width:468px){ .list_group .text_list>li { width:100%; } } /* calendar */ .calendarWrap { position:relative; width:100%;} .calendarWrap .sort_area .year_ctrl { position:relative; text-align:center; padding:10px 0; display:flex; align-items:center; justify-content:space-between; } .calendarWrap .sort_area .year_ctrl .date { font-size:2rem; color:#222; font-weight:bold;} .calendarWrap .sort_area .year_ctrl p { display:flex; gap:2px; } .calendarWrap .sort_area .year_ctrl a { display:block; border:1px solid #ebebeb; width:36px; height:36px; text-indent:-9999px; border:1px solid #e0e0e0;} .calendarWrap .sort_area .year_ctrl a.prev_year { left:0; background:url(../images/bbs/bbs-prev-end.png) center no-repeat;} .calendarWrap .sort_area .year_ctrl a.prev_month { left:40px; background:url(../images/bbs/bbs-prev.png) center no-repeat;} .calendarWrap .sort_area .year_ctrl a.next_month { right:40px; background:url(../images/bbs/bbs-next.png) center no-repeat;} .calendarWrap .sort_area .year_ctrl a.next_year { right:0; background:url(../images/bbs/bbs-next-end.png) center no-repeat;} .calendarWrap .calendar table { width:100%; border-collapse:collapse; border-top:2px solid #222; } .calendarWrap .calendar table th { height:60px; font-size:17px; font-weight:400; padding:5px; border-bottom:1px solid #e0e0e0; color:#282828;} .calendarWrap .calendar table td { width:14.285714%; height:150px; padding:10px; border-bottom:1px solid #e0e0e0; border-right:1px solid #e0e0e0; text-align:center; vertical-align:top; position:relative} .calendarWrap .calendar table td:hover { background-color:#f4f6f8;} .calendarWrap .calendar table th:first-child, .calendarWrap .calendar table td:first-child { border-left:1px solid #e0e0e0;} .calendarWrap .calendar table th:last-child { border-right:1px solid #e0e0e0;} .calendarWrap .calendar .num { text-align:right; color:#949494; font-size:15px; font-weight:400; letter-spacing:0;display:block} .calendarWrap .calendar .sun { color:#d20119;} .calendarWrap .calendar .sat { color:#1a68de;} .calendarWrap .calendar .today { background-color:#f4f6f8;} .calendarWrap .calendar .today span { color:#343434;} .calendarWrap .calendar .refer { margin-top:10px;} .calendarWrap .calendar .refer>li { display:inline-block; margin-right:20px;} .calendarWrap .calendar .refer>li span { width:15px; height:15px; display:inline-block; vertical-align:middle; margin-right:3px;} .calendarWrap .calendar .text { position:absolute; width:90%; height:calc(100% - 25px); bottom:-5px; left:50%;transform:translateX(-50%); } .calendarWrap .calendar .schedule>li a { font-size:.94rem; line-height:1.5; text-align:left;} .calendarWrap .calendar ol.schedule>li a::before { width:20px; height:20px; content:" "counter(num); counter-increment:num; display:inline-block; font-size:.75rem; line-height:20px; vertical-align:middle; text-align:center; margin-right:4px; margin-top:-1px; border-radius:50%; background-color:#38393B; color:#fff;} .calendarWrap .calendar a.more { border:1px solid #ddd;font-size:.94rem; display:inline-block; line-height:1; padding:7px 15px; border-radius:3px; margin-top:5px; } .calendarWrap .calendar a.more:hover, .calendarWrap .calendar a.more:focus { background:#fff; border-color:#222; filter:drop-shadow(1px 2px 2px #c3c3c3)} .calendarwhole { position:fixed; display:none; width:100%; height:100vh; background:rgba(0,0,0,.6); left:0; top:0; z-index:10 } .calendarwhole.active { display:block; } .calendarwhole .cont { position:absolute; padding:15px; left:50%; width:94%; max-width:340px; top:50%; box-sizing:border-box; background:#fff; border-radius:1em; transform:translate(-50%,-50%);} .calendarwhole h1 { text-align:center; color:#222; margin-bottom:10px; font-weight:600} .calendarwhole .close { background:#222; padding:7px 15px; text-align:center; margin:15px auto 0 auto; display:table; border-radius:3px; line-height:1; color:#fff;} .schedule>li+li { margin-top:4px; } .schedule>li a { display:block; max-width:94%; align-items:center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; transition:0.3s ease 0s; } .schedule>li>a:hover { text-decoration:underline;} .schedule>li>a i { font-size:.75rem; flex:auto; min-width:3em; text-align:center; color:#fff; margin-right:5px; padding:3px 6px; line-height:1; border-radius:3px;} .schedule>li>a i.cate1 { background:#e0233b;} .schedule>li>a i.cate2 { background:#664d8e;} .schedule>li>a i.cate3 { background:#d37a11;} .schedule>li>a i.cate4 { background:#3e5e8f;} .schedule>li>a i.cate5 { background:#288e7b;} @media all and (max-width:1024px){ .calendarWrap .calendar table td { height:120px; } .calendarWrap .calendar a.more i { display:none; } .calendarWrap .calendar .schedule>li:nth-child(3) { display:none; } .calendarWrap .calendar a.more { font-size:.84rem; padding:5px 12px; } } @media all and (max-width:768px){ .calendarWrap .sort_area .year_ctrl .date { font-size:1.9rem; } .calendarWrap .calendar table th { font-size:16px; height:50px } .calendarWrap .calendar table td { padding:7px; } .calendarWrap .calendar .schedule>li>a i, .calendarWrap .calendar ol.schedule>li a::before { display:none; } .schedule>li+li { margin-top:2px; } } @media all and (max-width:568px){ .calendarWrap .calendar table th { height:45px } .calendarWrap .calendar .text .schedule { display:none; } .calendarWrap .calendar table td { height:65px; padding:5px;} .calendarWrap .calendar .text { bottom:inherit; top:50%; transform:translate(-50%,-50%); } .calendarWrap .calendar a.more { font-size:0; width:26px; height:26px; padding:0; border-radius:100%; border:none; background:#1a68de } .calendarWrap .calendar a.more:hover, .calendarWrap .calendar a.more:focus { background:#1a68de; border-color:none; } } /* 갤러리 게시판 */ .gallery_list { margin-top:20px; } .gallery_list>ul { display:flex; gap:25px 20px; flex-wrap:wrap; } .gallery_list>ul>li { position:relative; width:calc((100% - 60px) / 4); } .gallery_list>ul>li label { position:absolute; left:.5em; top:.5em; z-index:2 } .gallery_list>ul>li .gl_thumb { position:relative; width:100%; height:0; overflow:hidden; border-radius:.5em;background-color:#fafafa; background-position:50% 50%; background-repeat:no-repeat; background-size:80% auto } .gallery_list>ul>li .gl_thumb img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; object-fit:cover; -o-object-fit:cover; transform:translate(-50%,-50%) scale(1,1) rotate(0.001deg); transition:0.5s ease 0s; transition-property:transform;} .gallery_list>ul>li .gl_thumb>a { position:absolute; width:100%; height:100%; left:0; top:0; } .gallery_list>ul>li a:hover .gl_thumb img, .gallery_list>ul>li a:focus .gl_thumb img, .gallery_list>ul>li:hover .gl_thumb img, .gallery_list>ul>li:focus .gl_thumb img { transform:translate(-50%,-50%) scale(1.07, 1.07);} .gallery_list>ul>li .gl_info { margin-top:1em; } .gallery_list>ul>li .gl_info>dt, .gallery_list>ul>li .gl_info>dd { display:block; } .gallery_list>ul>li .gl_info .cate { display:block; color:var(--color-point-blue); font-size:.88rem; line-height:1 } .gallery_list>ul>li .gl_info>dt>strong { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; font-size:20px; line-height:1.4; overflow:hidden; font-weight:500; color:#222} .gallery_list>ul>li .gl_info>dd.con { margin-top:.75em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.4; color:#747474; overflow:hidden;min-height:45px; } .gallery_list>ul>li .gl_info>dd.part { display:flex; flex-wrap:wrap; gap:5px 15px; margin-top:1em; color:#747474; margin-bottom:-.65em } .gallery_list>ul>li .gl_info>dd.part span+span::before { display:inline-block; width:1px; height:14px; background:#ccc; content:''; vertical-align:middle; margin-right:13px; margin-top:-2px; } .gallery_list>ul>li .gl_info>dd.date { margin-top:.75em; display:flex; align-items:center; gap:0 5px; color:#747474; } .gallery_list>ul>li .gl_info>dd.date .icon-date { margin-top:-2px; } .gallery_list>ul>li .gl_info>dd.more { margin-top:1.25em; text-align:center } .gallery_list>ul>li .gl_info>dd.more span { padding:10px; border-radius:3px; display:block; border:1px solid rgba(0,0,0,.1); transition:0.5s ease 0s; font-size:.95rem} .gallery_list>ul>li:hover .gl_info>dd.more span, .gallery_list>ul>li:focus .gl_info>dd.more span { background:var(--color-point-blue); color:#fff; border-color:var(--color-point-blue); box-shadow:5px 5px 5px rgba(0,0,0,.05); } .gallery_list>ul>li .gl_info2>dd { display:flex; gap:5px 15px; margin-top:1em; color:#747474; margin-bottom:-.65em } .gallery_list>ul>li .gl_info2>dd:last-child { margin-bottom:0; } .gallery_list>ul>li .gl_info2>dd .tit { width:70px; display:inline-block; color:#222; text-align:center; border:1px solid #ddd; } .gallery_list>ul>li .gl_info2>dd .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:70%} /* 갤러리 출력수 */ .gallery_list>ul.num3>li { position:relative; width:calc((100% - 40px) / 3); } .gallery_list>ul.num5>li { position:relative; width:calc((100% - 80px) / 5); } /* 갤러리 이미지 사이즈 */ .gallery_list .list_4vs3>li .gl_thumb { padding-top:66.66%; } .gallery_list .list_3vs4>li .gl_thumb { padding-top:132.42%; } /* 갤러리 라인 스타일 */ .gallery_list .line>li { border:1px solid rgba(0,0,0,.1); } .gallery_list .line>li .gl_info { padding:1.25em; margin-top:0; } .gallery_list .line>li:hover, .gallery_list .line>li:focus { border-color:var(--color-point-blue); box-shadow:5px 5px 5px rgba(0,0,0,.05); } /* 갤러리 좌우 스타일 */ .gallery_list .flex>li { width:100%; display:flex; align-items:center; padding-bottom:20px; border-bottom:1px solid rgba(0,0,0,.1); } .gallery_list .flex>li>a { width:100%; display:flex; align-items:center; } .gallery_list .flex>li>a .gl_thumb { width:30%; padding-top:17.66% } .gallery_list .flex>li>a .gl_info { flex:auto; margin-left:40px; max-width:calc(100% - (30% + 40px)); margin-top:0; } .gallery_list .flex>li>a .gl_info>dd.more span { display:table; padding-left:2em; padding-right:2em;} .gallery_list .flex>li>a:not(:has(.gl_thumb)) .gl_info { max-width:100%; /* gl_thumb가 없는 경우 max-width를 100%로 설정 */ } /* 갤러리용 다운로드 버튼 */ .gallery_list .download_btn { display:flex; align-items:center; justify-content:center; margin-top:1em; padding-top:1em; border-top:1px solid rgba(0,0,0,.1); gap:3px; flex-wrap:wrap } .gallery_list .download_btn .icon { display:inline-block; width:30px; height:30px; border-radius:100%; background-position:center; background-repeat:no-repeat; background-size:contain; } .gallery_list .download_btn .icon.pdf { background-image:url(../images/bbs/img_pdf.png); background-color:#d31a1a; } .gallery_list .download_btn .icon.hwp { background-image:url(../images/bbs/img_hwp.png); background-color:#00a8ff; } .gallery_list .download_btn .icon.ex { background-image:url(../images/bbs/img_excel.png); background-color:#1e7145; } .gallery_list .download_btn .icon.img { background-image:url(../images/bbs/img_img.png); background-color:var(--color-point-blue); } .gallery_list .download_btn .icon.zip { background-image:url(../images/bbs/img_zip.png); background-color:#62a8e3; } /* 문화관광용 */ .gallery_list .like_btn { position:absolute; right:.5em; top:.5em; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:100%; z-index:10 } .gallery_list .like_btn::before { display:inline-block; content:''; width:18px; height:18px; background:url(../images/bbs/icon_like.svg) no-repeat 50% 50% / 18px; opacity:.6 } .gallery_list .like_btn.on { background:#ee1c7a; } .gallery_list .like_btn.on::before { filter:invert(1); opacity:1} .gallery_list>ul>li .gl_info>dd.hit { display:flex; flex-wrap:wrap; align-items:center; gap:5px 15px; margin-top:15px; border-radius:8px; background:#fafafa; padding:10px; font-size:14px; font-weight:400 } .gallery_list .hit { position:relative; } .gallery_list .hit>i::before { display:inline-block; vertical-align:middle; content:''; width:12px; height:12px; margin-right:3px; margin-top:-3px; background-position:left center; background-repeat:no-repeat; background-size:12px;} .gallery_list .hit .like::before { background-image:url(../images/bbs/icon_heart.svg); } .gallery_list .hit .view::before { background-image:url(../images/bbs/icon_view.svg);} .gallery_list .hit .add::before { background-image:url(../images/bbs/icon_map.svg); } .gallery_list .hit .sns { position:absolute; display:flex; flex-wrap:wrap; gap:0 5px; right:10px; top:50%; transform:translateY(-50%); } .gallery_list .hit .sns a { position:relative; width:26px; height:26px; border-radius:100%; border:1px solid #ccc; background:#fff; transition:all ease 0.2s } .gallery_list .hit .sns a::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background-size:auto 85%; background-position:60% 50%; background-repeat:no-repeat } .gallery_list .hit .sns .link_fb:hover { background-color:#385691; } .gallery_list .hit .sns .link_tw:hover { background-color:#222; } .gallery_list .hit .sns .link_fb::before { background-image:url(../images/bbs/icon_facebook.svg); } .gallery_list .hit .sns .link_tw::before { background-image:url(../images/bbs/icon_twitter.svg); } .gallery_list .hit .sns .link_fb:hover::before { filter:brightness(100); } .gallery_list .hit .sns .link_tw:hover::before { filter:invert(1); } @media all and (max-width:1368px){ /* 갤러리 좌우 스타일 */ .gallery_list .flex>li>a .gl_info>dd.con { -webkit-line-clamp:1; } .gallery_list>ul>li .gl_info>dd.part { gap:5px; } .gallery_list>ul>li .gl_info>dd.part span+span::before { margin-right:5px; } } @media all and (max-width:1268px){ /* 갤러리 출력수 */ .gallery_list>ul.num5>li { width:calc((100% - 60px) / 4); } } @media all and (max-width:1024px){ .gallery_list>ul>li .gl_info>dt>strong { font-size:19px; } .gallery_list>ul>li .gl_info>dd { margin-top:.5em } .gallery_list>ul>li .gl_info>dd.con {min-height:39px;} .gallery_list>ul>li .gl_info>dd.more span { font-size:.8rem; } .gallery_list>ul>li .gl_info2>dd {margin-top:.75em;} /* 갤러리 좌우 스타일 */ .gallery_list .flex>li>a .gl_thumb { padding-top:22.66%; width:35%; } .gallery_list .flex>li>a .gl_info { margin-left:30px; max-width:calc(100% - (35% + 30px)); } /* 문화관광용 */ .gallery_list .hit .add { width:100%; } } @media all and (max-width:968px){ .gallery_list>ul>li .gl_info>dd.part span { width:100%; } .gallery_list>ul>li .gl_info>dd.part span+span::before { display:none; } .gallery_list>ul>li .gl_info>dd.part span+span { margin-top:-.5em; } .gallery_list .hit .sns { position:relative; right:inherit; top:inherit; transform:inherit;} } @media all and (max-width:868px){ .gallery_list>ul>li { width:calc((100% - 40px) / 3); } .gallery_list>ul>li .gl_info>dt>strong { font-size:18px; } /* 갤러리 출력수 */ .gallery_list>ul.num5>li { width:calc((100% - 20px) / 2); } /* 문화관광용 */ .gallery_list .hit .add { width:auto;} } @media all and (max-width:768px){ /* 갤러리 좌우 스타일 */ .gallery_list .flex>li>a .gl_thumb { padding-top:11rem; width:40%; } .gallery_list .flex>li>a .gl_info { margin-left:20px; max-width:calc(100% - (40% + 20px)); } } @media all and (max-width:668px){ .gallery_list>ul { gap:15px 10px; } .gallery_list>ul>li { width:calc((100% - 10px) / 2); } .gallery_list>ul>li .gl_info>dt>strong { font-size:17px; } .gallery_list .line>li .gl_info { padding:1em; } /* 갤러리 출력수 */ .gallery_list>ul.num3>li { width:calc((100% - 10px) / 2); } .gallery_list>ul.num5>li { width:calc((100% - 10px) / 2); } } @media all and (max-width:397px){ .gallery_list>ul>li { width:100% } .gallery_list>ul>li .gl_info>dd.con {min-height:auto;} } @media all and (max-width:568px){ /* 문화관광용 */ .gallery_list .hit .add { width:100%; } } @media all and (max-width:468px){ .gallery_list>ul>li .gl_info>dt>strong { font-size:16px; } .gallery_list>ul>li .gl_info>dd.date .mnone { display:none; } .gallery_list>ul>li .gl_info>dd.more span { padding:7px; } /* 갤러리 좌우 스타일 */ .gallery_list .flex>li>a { flex-wrap:wrap; } .gallery_list .flex>li>a .gl_thumb { padding-top:66.66%; width:1000%; } .gallery_list .flex>li>a .gl_info { flex:100%; margin-left:0; max-width:100%; margin-top:1em; } .gallery_list .flex>li:not(:has(.gl_thumb)) .gl_info { margin-top:2em } .gallery_list .flex>li:not(:has(.gl_thumb)) label { top:0; left:0; } /* 갤러리용 다운로드 버튼 */ .gallery_list .download_btn .icon { width:26px; height:26px; } } /* faq 게시판 */ #boardWrap .faq_list { margin-top:2em; border-top:2px solid #222; } #boardWrap .faq_list>li { border-bottom:1px solid rgba(0,0,0,.1); } #boardWrap .faq_list>li .question { position:relative; display:flex; width:100%; padding:1em; align-items:center; font-weight:400; justify-content:flex-start; } #boardWrap .faq_list>li .question::before { display:inline-block; width:32px; height:32px; border-radius:100%; content:'Q'; border:1px solid #2581d7; color:#2581d7; margin-right:10px; text-align:center;line-height:30px; font-size:1.1em; font-weight:bold} #boardWrap .faq_list>li .question .tit { width:calc(100% - 54px); text-align:left } #boardWrap .faq_list>li .question>.arr::before { position:absolute; right:1em; top:50%; width:9px; height:9px; border-style:solid; border-width:0 2px 2px 0; border-color:#888; content:''; transform:translateY(-50%) rotate(45deg); transition:all ease 0.2s } #boardWrap .faq_list>li .question.active>.arr::before { transform:translateY(-50%) rotate(225deg); } #boardWrap .faq_list>li .faq_list_con { display:none; padding:1.5em; background:#fafafa; margin-top:1em; } #boardWrap .faq_list>li .faq_list_con::before { display:inline-block; width:32px; height:32px; border-radius:100%; content:'A'; background:#222; color:#fff; text-align:center; line-height:30px; font-size:1.1em; font-weight:bold } #boardWrap .faq_list>li .faq_list_con.active { display:block; position:relative } #boardWrap .faq_list>li .faq_list_con .faq_list_con_txt { margin-top:.25em; } #boardWrap .faq_list>li .faq_list_con .adm_btn { margin-top:.75em; } @media all and (max-width:1024px){ #boardWrap .faq_list>li .question::before, #boardWrap .faq_list>li .faq_list_con::before { width:28px; height:28px; line-height:26px; } } /* 비밀번호 확인 */ .secretCheck { position:fixed; left:0; top:0; width:100%; height:100vh; background-color:rgba(0,0,0,0.8); z-index:999;} .secretCheck .sc_infoBox { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:94%; max-width:700px; background-color:#fff; border:1px solid #fff; box-shadow:3px 3px 5px 0px rgba(0,0,0,0.2); text-align:center; padding:3em} .secretCheck .sc_infoBox dl dt { font-size:1.75rem; color:#222; font-weight:500; margin-bottom:10px; line-height:1} .secretCheck .sc_infoBox dl dd { font-size:1.03rem;} .secretCheck .sc_infoBox .scform { width:90%; margin:2em auto 0; padding:2em; border-top:2px solid #222; border-bottom:1px solid rgba(0,0,0,.1); display:flex; align-items:center; justify-content:center;} .secretCheck .sc_infoBox .scform label { font-weight:400; margin-right:20px;} .secretCheck .sc_infoBox .scform span input { border:1px solid #ccc;} .secretCheck .sc_infoBox .scform span button { font-size:16px;} .secretCheck .sc_close { position:absolute; right:20px; top:20px; width:35px; height:35px; display:flex; align-items:center; justify-content:center;} .secretCheck .sc_close::after { position:absolute; left:50%; top:50%; content:''; width:25px; height:1px; background:#222; transform:translate(-50%,-50%) rotate(45deg);} .secretCheck .sc_close::before { position:absolute; left:50%; top:50%; content:''; width:25px; height:1px; background:#222; transform:translate(-50%,-50%) rotate(-45deg);} @media all and (max-width:668px){ .secretCheck .sc_infoBox dl dt { font-size:1.5rem } .secretCheck .sc_infoBox .scform { width:100%; padding:2em 1em; flex-wrap:wrap } } @media all and (max-width:568px){ .secretCheck .sc_infoBox { padding:2em; } .secretCheck .sc_infoBox .scform { gap:4px; } .secretCheck .sc_infoBox .scform * { width:100%; } .secretCheck .sc_infoBox .scform label { display:none; } } /* 글쓰기 */ #boardWrap .write_table { width:100%; border-top:2px solid #000; box-sizing:border-box; } #boardWrap .write_table th, #boardWrap .write_table td { position:relative; padding:.75rem; box-sizing:border-box; font-size:1rem; text-align:left; vertical-align: middle; border-bottom:1px solid rgba(0,0,0,.1);} #boardWrap .write_table th { color:#222; font-weight:500 } #boardWrap .write_table .flex { display:flex; gap:10px; flex-wrap:wrap; align-items:center; } #boardWrap .write_table .flex span { position:relative; flex:0 1 auto; display:flex; align-items:center; } #boardWrap .write_table .flex.tel * { width:5em; } #boardWrap .write_table .flex.date input { width:9em} #boardWrap .write_table .flex.email * { width:20%; } #boardWrap .write_table .flex.email input[type="email"]:last-child { width:30%;} #boardWrap .write_table td .small_txt { display:block; margin-top:.25rem; font-size:.98rem; color:rgba(0,0,0,.64); } #boardWrap .write_table .flex.add { flex-wrap:wrap; } #boardWrap .write_table .flex.add .add1 { flex:0 1 17em; } #boardWrap .write_table .flex.add .add1 input { width:calc(100% - 50%);} #boardWrap .write_table .flex.add .add2 { flex:0 1 calc(100% - (17em + 10px)); } #boardWrap .write_table .icon-calendar { width:35px; height:100%; position:absolute; right:0; top:50%; transform:translateY(-50%); } #boardWrap .write_table input, #boardWrap .write_table select, #boardWrap .write_table textarea { border-radius:3px;} #boardWrap .write_table select {background-position:right 10px center;} #boardWrap .write_table .title { width:calc(100% - 7em); } #boardWrap .write_table .regist_file { display:flex; gap:5px 25px; margin-bottom:1em; flex-wrap:wrap; width:calc(100% - 3em); } #boardWrap .write_table .regist_file>li { display:flex; gap:0 10px; align-items:center; flex-wrap:wrap;word-break: break-all; } #boardWrap .wr_cont { margin-top:1em; padding:.75rem; border-bottom:1px solid rgba(0,0,0,.1); } /* 파일첨부 */ .filebox { display:flex; gap:0 4px; align-items:center;} .filebox .upload_name { display:inline-block; height:40px; max-width:500px; width:70%; padding:0 .5rem; vertical-align:middle; border:1px solid #ddd;color:#aaa;} .filebox + .filebox { margin-top:5px;} .filebox sapn { position:relative; } .btn_del, .btn_add { height:40px; width:40px; border:1px solid rgba(0,0,0,.1); border-radius:3px; display:flex; align-items:center; justify-content:center;} .btn_add { position:absolute; top:.7rem; right:.5rem; font-size:1.5rem; line-height:1; } .btn_add>i { line-height: 1; display:inline-block; vertical-align:middle; margin-top:-3px;color:#222; } .btn_del { background:#e5e5e5 url(../images/bbs/icon_del.svg) no-repeat 50% 45% / 50% auto; border-color:#e5e5e5 } /* Input radio */ .input_file { position:absolute; width:1px !important; height:1px !important; opacity:0; } .file_label { position:relative; } .file_label::before { position:relative; content:'파일찾기'; display:inline-block; height:40px; margin-left:3px; padding:0 1em; color:#fff; line-height:40px; vertical-align:middle; background:#222; cursor:pointer; border-radius:3px; font-size:1rem; color:#fff; } .input_file:focus + .file_label::before { outline-offset:2px; outline:2px dotted #222} @media all and (max-width:868px){ #boardWrap .write_table th, #boardWrap .write_table td { display:block; width:100%; } #boardWrap .write_table th { border-bottom:none; padding-bottom:0 } #boardWrap .write_table tr { position:relative; } #boardWrap .write_table td { position:initial; padding-top:.25em; } #boardWrap .write_table .flex.email * { width:calc(50% - 1.05em); } #boardWrap .write_table .flex.email input[type="email"]:last-child { width:100%;} #boardWrap .write_table colgroup { display:none; } .btn_add,.btn_del {width:30px;height:30px;} } @media all and (max-width:668px){ /* 마이페이지 - 정보입력 */ #boardWrap .write_table .flex.add .add1 { flex:0 1 100%; } #boardWrap .write_table .flex.add .add2 { flex:0 1 100%; } #boardWrap .write_table .title { width:100%; } #boardWrap .write_table th, #boardWrap .write_table td{font-size:0.938rem;} .filebox label { /*padding:0 .75em;*/ font-size:.938rem; } .filebox .upload_name { width:60%; } .file_label::before {font-size:0.938rem;} } @media all and (max-width:468px){ /* 마이페이지 - 정보입력 */ #boardWrap .write_table .flex.tel input { width:4em; } .btn_add {top:.5rem;} .filebox {margin-top:15px;} .filebox label { font-size:.9rem; } } /* 상세페이지 */ #boardWrap .view_table { width:100%; border-top:2px solid #000; box-sizing:border-box; border-bottom:1px solid rgba(0,0,0,.1);word-break:break-all;} #boardWrap .view_table th.title { padding:1.5em 1.5em 0; text-align:center; } #boardWrap .view_table th.title .cate { display:inline-block; border-radius:2em; line-height:1; padding:7px 15px; font-size:.95rem; border:1px solid rgba(0,0,0,.1); color:var(--color-point-blue) } #boardWrap .view_table th.title strong { display:block; font-size:1.7rem; color:#222; font-weight:500; line-height:1.6 } #boardWrap .view_table td.info { padding:1em; border-bottom:1px solid rgba(0,0,0,.1); text-align:center } #boardWrap .view_table tbody th { font-weight:500; color:#222; } #boardWrap .view_table th, #boardWrap .view_table td { font-size:1.03rem } #boardWrap .view_table td.view_con>*:has(img), #boardWrap .view_table td.view_con>*:has(video){text-align:center;} #boardWrap .view_table .view_con { text-align: initial; font-size: initial;} #boardWrap .view_table .info_list { display:flex; align-items:center; justify-content:center; gap:2px 0; flex-wrap:wrap; } #boardWrap .view_table .info_list li { display:flex; align-items:center; gap:0 10px; position:relative; margin:0 1em } #boardWrap .view_table .info_list li+li:before { position:absolute; left:-1.15em; top:50%; transform:translateY(-50%); width:4px; height:4px; border-radius:100%; background:rgba(0,0,0,.3); content:''; } #boardWrap .view_table .info_list li strong { font-weight:500; color:#222; } #boardWrap .view_table td.view_con { padding:2em 0; } #boardWrap .view_table td.view_con>* { max-width: 100% !important; word-break: break-all !important;text-wrap-mode: wrap !important;} #boardWrap .view_table td.view_con table {width:100% !important;} #boardWrap .view_table tr.file>th, #boardWrap .view_table tr.file>td { padding:1em 0; border-top:1px solid rgba(0,0,0,.1);} #boardWrap .view_table tr.line>th, #boardWrap .view_table tr.line>td { padding:1em; border-bottom:1px solid rgba(0,0,0,.1);} #boardWrap .view_table tr.line>th { background:#fafafa; } #boardWrap .view_table tr.file .file_list>li { position:relative; padding-left:10px; display:flex; flex-wrap:wrap; } #boardWrap .view_table tr.file .file_list>li+li { margin-top:5px; } #boardWrap .view_table tr.file .file_list>li::before { position:absolute; width:4px; height:4px; border-radius:100%; left:0; top: 50%;transform: translateY(-50%); content:''; background:#999 } #boardWrap .view_table tr.file .file_list>li span { margin-left:.5em; padding-left:.7em; position:relative; color:rgba(0,0,0,.54); } #boardWrap .view_table tr.file .file_list>li span::before { position:absolute; left:0; top:4px; width:1px; height:12px; background:rgba(0,0,0,.1); content:''; } #boardWrap .view_table tr.file .file_list>li>a { display:inline-block; position:relative;} #boardWrap .view_table tr.file .file_list>li>a::before { position:absolute; width:0; height:1px; background:#222; content:''; left:0; bottom:0; transition:all ease 0.3s } #boardWrap .view_table tr.file .file_list>li>a:hover::before, #boardWrap .view_table tr.file .file_list>li>a:focus::before { width:100%; } #boardWrap .view_table .answer-group { padding:1.5em; background:#fafafa; border-top:1px solid #222 } #boardWrap .view_table .answer-group .asrTit { border-bottom:1px dashed #ccc; display:flex; align-items:center; justify-content:space-between; padding-bottom:1em; flex-wrap:wrap; } #boardWrap .view_table .answer-group .asrTit strong { font-size:1.167rem; font-weight:500; color:#222; } #boardWrap .view_table .answer-group .asrTit .icon-reply { display:inline-block; vertical-align:middle; width:17px; height:17px; margin-right:10px; margin-top:-2px; background:url(../images/bbs/icon_answer.svg) no-repeat 50% 50% / auto auto; } #boardWrap .view_table .answer-group .asrTit .answer-info { display:flex; align-items:center; flex-wrap:wrap;} #boardWrap .view_table .answer-group .asrTit .answer-info>li { position:relative; display:flex; align-items:center; gap:0 4px;} #boardWrap .view_table .answer-group .asrTit .answer-info>li+li { margin-left:1em; padding-left:1em; } #boardWrap .view_table .answer-group .asrTit .answer-info>li+li:before { position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:4px; border-radius:100%; background:rgba(0,0,0,.7); content:''; } #boardWrap .view_table .answer-group .answer-list { padding:1em; background:#fff; } #boardWrap .view_footer { display:flex; flex-wrap:wrap; /* margin-top:2em; */ border-top:1px solid #222; border-bottom:1px solid rgba(0,0,0,.1); padding:2em; } #boardWrap .view_footer>li { width:50%; display:flex; align-items:center; justify-content:flex-start; font-size:1.03rem } #boardWrap .view_footer>li:last-child { justify-content:flex-end; } #boardWrap .view_footer>li a { width:calc(100% - 7em); display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #boardWrap .view_footer>li span { width:6em; color:#222; font-weight:500 } #boardWrap .view_footer>li:last-child a { text-align:right; } #boardWrap .view_footer>li:last-child span { text-align:right; } #boardWrap .view_footer>li .prev::before { transform:rotate(-135deg); margin-right:10px; display:inline-block; width:9px; height:9px; border-style:solid; border-width:1px 1px 0 0; border-color:#999; content:''; vertical-align:middle; margin-top:-2px; } #boardWrap .view_footer>li .next::after { transform:rotate(45deg); margin-left:10px; display:inline-block; width:9px; height:9px; border-style:solid; border-width:1px 1px 0 0; border-color:#999; content:''; vertical-align:middle; margin-top:-2px; } /* 댓글 */ .comment-group { padding:2em; background:#fafafa; } .comment-group h5 { font-size:17px; font-weight:300; color:#343434; padding:20px 0 7px 0;} .comment-group h5 span { color:var(--color-point-blue); font-weight:400;} .comment-group .cbox_guide { position:relative; width:100%; display:flex; flex-wrap:wrap; align-items:center;} .comment-group .cbox_guide textarea { width:calc(100% - 8.2rem); height:100px;} .comment-group .cbox_guide button { width:8rem; height:100px !important; margin:0 !important; } .comment-group .cbox_guide .cm_txt { width:100%; margin-top:5px; display:block;} .comment-group .cbox_list ul li { position:relative; border-bottom:1px solid #e0e0e0; padding-top:15px;} .comment-group .cbox_list ul li dl dt { color:#343434; font-weight:400; display:block;} .comment-group .cbox_list ul li dl dt span { font-size:14px; color:#949494; font-weight:300; letter-spacing:0; margin-left:10px;} .comment-group .cbox_list .cm_write { padding-bottom:15px;} .comment-group .cbox_list .cm_write a, .comment-group .cbox_list .cm_write_re a, .comment-group .cbox_list .cm_write_re_re a, .comment-group .cbox_list .cm_write_re_re_re a, .answer-group .answer-list a { padding:2px 10px; margin-top:10px; font-size:14px; color:#343434; border-radius:.2em; background-color:#f4f6f8; border:1px solid #d4d4d4; display:inline-block;} .comment-group .cbox_list .cm_write_re { border-top:1px dashed #e0e0e0; padding:15px 0 15px 40px; background:url(../images/bbs/icon_comment.svg) no-repeat 10px 16px / 18px auto;} .comment-group .cbox_list .cm_write_re_re { border-top:1px dashed #e0e0e0; padding:15px 0 15px 70px; background:url(../images/bbs/icon_comment.svg) no-repeat 40px 16px / 18px auto;} .comment-group .cbox_list .cm_write_re_re_re { border-top:1px dashed #e0e0e0; padding:15px 0 15px 100px; background:url(../images/bbs/icon_comment.svg) no-repeat 70px 16px / 18px auto;} .comment-group .cbox_guide_reply { position:relative; width:100%; display:flex; flex-wrap:wrap; padding-bottom:15px} .comment-group .cbox_guide_reply textarea { width:calc(100% - 8.2rem); height:60px;} .comment-group .cbox_guide_reply button { width:8rem; border-left:0; margin:0 !important;} /* view st3 */ .view_st3 { position:relative; width:100%;} .view_st3 .st3_tit { font-size:2rem; font-weight:500; color:#282828; line-height:1.5; margin-bottom:20px;} .view_st3 .st3_tit em { font-size:18px; color:var(--color-point-blue); font-weight:400; display:block;} .view_st3 .info_list { display:flex; flex-wrap:wrap; gap:5px 30px; } .view_st3 .info_list li span { position:relative; color:#343434; padding-right:10px; margin-right:5px;} .view_st3 .info_list li span i { margin-right:5px;} .view_st3 .info_list li span::after { content:''; position:absolute; right:0; top:3px; width:1px; height:13px; background-color:#e0e0e0;} .view_st3 .info_list li:last-child { margin-right:0;} .view_st3 .info_list li:last-child a { text-decoration:underline;} .view_st3 .info_list li:last-child span::after { display:none;} .view_st3 .view_st3_con { margin:3% 0; padding:2em 0; border-top:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1); } .view_st3 .view_st3_con img { max-width:100%;} /* 별점 */ .icon_star { fill:none; stroke:#121212; stroke-linecap:round; stroke-linejoin:round; stroke-width:1px; margin:-2px 1px 0; width:14px; height:14px; } .icon_star.on { fill:#e43f18; stroke:#e43f18; } /* 네티즌평가 */ .tour_view .tour_bottom { margin-top:2em; } .tour_view .tour_bottom .writeWap { display:flex; flex-wrap:wrap; align-items:center; padding:30px; background:#F2F4F6; border-radius:5px; justify-content:space-between; } .tour_view .tour_bottom .writeWap .icon { width:150px; height:150px; background:#ceeaf7; border-radius:100%; display:flex; align-items:center; justify-content:center;} .tour_view .tour_bottom .writeWap .icon>i { width:100%; height:100%; display:block; background:url(../images/bbs/icon_netisn.svg) no-repeat 50% 50% / cover} .tour_view .tour_bottom .writeWap form { width:calc(100% - 200px); } .tour_view .tour_bottom .writeWap .state { padding:10px 15px; background:#fff; border-radius:5px; display:flex; flex-wrap:wrap; align-items:center; gap:5px 0; } .tour_view .tour_bottom .writeWap label { margin-right:2em;} .tour_view .tour_bottom .writeWap .state input[type="radio"] { margin-right:5px; margin-top:-2px; } .tour_view .tour_bottom .writeWap .wrf { display:flex; flex-wrap:wrap; margin-top:1em; padding-top:1em; border-top:1px dashed #ccc;} .tour_view .tour_bottom .writeWap .wrf textarea { height:100px; width:calc(100% - 7em); border-radius:5px 0 0 5px } .tour_view .tour_bottom .writeWap .wrf input[type="submit"] { width:7em; background:#222; color:#fff; height:100px; border:none; border-radius:0 5px 5px 0} .tour_view .tour_bottom .writeWap .wrf p { width:100%; margin-top:.25em; text-align:right; font-size:.9rem; color:rgba(0,0,0,.74); } @media all and (max-width:868px){ #boardWrap .view_table th.title strong { font-size:1.5rem; line-height:1.3 } .view_st3 .st3_tit { font-size:1.7rem; line-height:1.4; } } @media all and (max-width:668px){ #boardWrap .view_table th, #boardWrap .view_table td { font-size:0.938rem } #boardWrap .view_table th.title strong { font-size:1.5rem; line-height:1.3 } #boardWrap .view_table tr.file>th, #boardWrap .view_table tr.file>td { display:block; width:100%; } #boardWrap .view_table tr.file>th { padding-bottom:0; text-align:left; } #boardWrap .view_table tr.file>td { border-top:none; padding-top:.25em; } #boardWrap .view_table tr.file .file_list>li::before {top:9px;} #boardWrap .view_footer { padding:1.5em 1em; } #boardWrap .view_footer>li { font-size:0.938rem; } #boardWrap .view_footer>li span { width:20px; font-size:0; } #boardWrap .view_footer>li a { width:calc(100% - 2em) } #boardWrap .view_footer>li .prev::before {margin-top:0;} #boardWrap .view_table colgroup { display:none; } #boardWrap .view_table tr.line>th, #boardWrap .view_table tr.line>td { display:block; width:100%; } #boardWrap .view_table tr.line>th { background:none; padding-bottom:0; text-align:left; border-bottom:none } #boardWrap .view_table tr.line>td { padding-top:.25em; } /* 댓글 */ .comment-group { padding:1.5em; } .comment-group .cbox_guide button, .comment-group .cbox_guide_reply button { font-size:1rem!important } } @media all and (max-width:468px){ /* 댓글 */ .comment-group .cbox_guide textarea, .comment-group .cbox_guide_reply textarea { width:100%; } .comment-group .cbox_guide button, .comment-group .cbox_guide_reply button { width:100%; height:50px !important} } /* 페이지 만족도 */ .pageInfoBox { position:relative; width:100%; border:1px solid rgba(0,0,0,.1); padding:1em } .pageInfoBox .charge_info { padding:15px 25px; background-color:#fafafa; } .pageInfoBox .charge_info dl { display:flex; align-items:center; gap:0 15px; } .pageInfoBox .charge_info dl dt { color:#222; font-weight:600; } .pageInfoBox .charge_info dl dt i.icon-mb { display:inline-block; width:19px; height:19px; background:url(../images/bbs/icon_mb.svg) no-repeat 50% 50% / auto auto; margin-right:5px; vertical-align:middle; margin-top:-2px} .pageInfoBox .charge_info dl dd { margin-left:20px; display:inline-block;} .pageInfoBox .charge_info dl dd em { color:#222; font-weight:500} .pageInfoBox .satisfaction { padding:20px 25px;} .pageInfoBox .satisfaction .survey strong { font-weight:400; color:#222; display:flex; align-items:center;} .pageInfoBox .satisfaction .survey strong i.icon-up { display:inline-block; width:19px; height:19px; background:url(../images/bbs/icon_up.svg) no-repeat 50% 50% / auto auto; margin-right:5px; vertical-align:middle; margin-top:-2px} .pageInfoBox .satisfaction .survey ul { display:flex; gap:0 15px; align-items:center;} .pageInfoBox .satisfaction .otherBox { display:flex; gap:0 3px; align-items:center; } .pageInfoBox .satisfaction .otherBox input { width:70%; min-width:30em} .pageInfoBox .satisfaction .btn_survey { width:100px; height:40px; color:#fff; background-color:var(--color-point-blue); vertical-align:middle;} /* 통합검색 */ #AllSearch * { box-sizing: border-box; } #AllSearch .topSearchBox { padding:1.5em; border-top:2px solid #222; border-bottom:1px solid rgba(0,0,0,.1); } #AllSearch .topSearchBox fieldset { display:flex; justify-content:center; align-items:center; --sizeHig:50px; height:var(--sizeHig); } #AllSearch .topSearchBox .scBox { border:2px solid #222; border-radius:3px; padding:3px 0 5px; height:var(--sizeHig) } #AllSearch .topSearchBox .scBox select { border-width:0 1px 0 0; } #AllSearch .topSearchBox .scBox input { border-width:0; min-width:25em } #AllSearch .topSearchBox .btn { padding:10px 25px; background:#222; color:#fff; height:calc(var(--sizeHig) - 4px); margin-top:-3px;} #AllSearch .topSearchBox .research { margin-left:20px; border-radius:2em; border:1px solid rgba(0,0,0,.1); padding:7px 15px 7px 10px; display:flex; justify-content:center; align-items:center;} #AllSearch .allSearchCon { display:flex; flex-wrap:wrap; border:1px solid rgba(0,0,0,.1); margin-top:2rem; } #AllSearch .allSearchCon .searchLeft { width:20%; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a { position:relative; display:block; padding:15px; border-bottom:1px solid rgba(0,0,0,.1); font-size:1.067em; transition:all ease 0.3s } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a span { position:relative; z-index:2; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a::before { position:absolute; width:0; height:100%; left:0; top:0; background:var(--color-point-blue); content:''; transition:all ease 0.3s} #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a::after { position:absolute; width:10px; height:10px; right:15px; top:50%; border-style:solid; border-width:1px 1px 0 0; border-color:#666; content:''; transition:all ease 0.3s; transform:translateY(-50%) rotate(45deg); } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:hover::before, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:focus::before, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li.scActive>a::before { width:100%; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:hover span, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:focus span, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li.scActive>a span { color:#fff; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:hover::after, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:focus::after, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li.scActive>a::after { border-color:#fff; } #AllSearch .allSearchCon .searchCon { width:65%; border-style:solid; border-width:0 1px 0 1px; border-color:rgba(0,0,0,.1); min-height:35em; padding:2em; } #AllSearch .allSearchCon .searchCon .sc_result { border-bottom:1px solid #e0e0e0; padding-bottom:15px;} #AllSearch .allSearchCon .searchCon .sc_result p { font-size:17px; color:#4a4a4a; font-weight:400;} #AllSearch .allSearchCon .searchCon .sc_result p span, #AllSearch .allSearchCon .searchCon .resultList .scWord { color:#cf0014;} #AllSearch .allSearchCon .searchCon .resultList { position:relative; padding:20px 0 60px 0; border-bottom:1px dashed #e0e0e0;} #AllSearch .allSearchCon .searchCon .resultList:last-child { border-bottom:0;} #AllSearch .allSearchCon .searchCon .resultList h4 { font-size:20px; font-weight:400; color:#282828; margin-bottom:20px;} #AllSearch .allSearchCon .searchCon .resultList h4 span { font-size:18px; font-weight:300; color:#646464;} #AllSearch .allSearchCon .searchCon .resultList ul li { margin:5px 0;} #AllSearch .allSearchCon .searchCon .resultList ul li a { color:#4a4a4a; text-decoration:underline;} #AllSearch .allSearchCon .searchCon .resultList ul li dl { margin-bottom:15px;} #AllSearch .allSearchCon .searchCon .resultList ul li dl { margin-bottom:3px;} #AllSearch .allSearchCon .searchCon .resultList ul li dl dd { color:#747474;} #AllSearch .allSearchCon .searchCon .resultList ul li i { font-size:14px; color:var(--color-point-blue); margin-right:8px;} #AllSearch .allSearchCon .searchCon .resultList ul li i.icon-file { display:inline-block; width:12px; height:12px; background-image:url(../images/bbs/icon_file.png); background-repeat:no-repeat; background-position:50% 50%; background-size:cover;} #AllSearch .allSearchCon .searchCon .resultList .list_info, #AllSearch .allSearchCon .searchCon .resultList .list_info a { font-size:14px; color:#949494; text-decoration:none; display:block;} #AllSearch .allSearchCon .searchCon .resultList .list_info a:hover { text-decoration:underline;} #AllSearch .allSearchCon .searchCon .resultList .list_info span { letter-spacing:0; display:block;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList { width:100%; display:flex; flex-wrap:wrap; gap:20px;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li { width:calc((100% - 60px) / 4); border:1px solid #e0e0e0; text-align:center;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li a, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li a { display:block; text-decoration:none;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li dl, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li dl { width:90%; margin:10px auto;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li dl dt, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li dl dt { white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li dl dd, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li dl dd { font-size:14px; color:#949494; letter-spacing:0;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList .sc_img, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList .sc_img { position:relative; width:100%; height:0; padding-top:68%; overflow:hidden; border-bottom:1px solid #e0e0e0;} #AllSearch .allSearchCon .searchCon .resultList .sc_imgList .sc_img img, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList .sc_img img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; object-fit:cover; -o-object-fit:cover; transform:translate(-50%,-50%) scale(1,1) rotate(0.001deg); transition:0.5s ease 0s; transition-property:transform;} #AllSearch .allSearchCon .searchCon .resultList .bulst { background:url(../images/bbs/dott.png) left 13px no-repeat; padding-left:10px; margin:5px 0;} #AllSearch .allSearchCon .searchCon .resultList .result_more { position:absolute; right:0; bottom:20px; } #AllSearch .allSearchCon .searchCon .resultList .result_more a { display:flex; justify-content:center; position:relative; font-size:15px; color:var(--color-point-blue); line-height:1; } #AllSearch .allSearchCon .searchCon .resultList .result_more a::after { display:inline-block; margin-left:5px; width:7px; height:7px; border-style:solid; border-width:1px 1px 0 0; border-color:var(--color-point-blue); content:''; transition:all ease 0.3s; transform:rotate(45deg); vertical-align:middle; margin-top:3px;} #AllSearch .allSearchCon .searchRight { width:15%; } #AllSearch .allSearchCon .searchRight .sc_word { padding:2em; } #AllSearch .allSearchCon .searchRight .sc_word strong { display:block; color:#222; font-size:1.067em; border-bottom:2px solid #222; line-height:1; padding-bottom:10px; font-weight:bold; } #AllSearch .allSearchCon .searchRight .sc_word>ol { counter-reset:num; } #AllSearch .allSearchCon .searchRight .sc_word>ol>li { border-bottom:1px dashed rgba(0,0,0,.1)} #AllSearch .allSearchCon .searchRight .sc_word>ol>li>a { position:relative; display:block; padding:7px 0 7px 25px;} #AllSearch .allSearchCon .searchRight .sc_word>ol>li>a::before { position:absolute; left:0; top:10px; width:17px; height:17px; line-height:15px; text-align:center; border:1px solid rgba(0,0,0,.2); border-radius:3px; counter-increment:num; content:counter(num); font-size:.8rem; } #AllSearch .allSearchCon .searchRight .sc_word>ol>li:nth-child(1)>a::before { background:var(--color-point-blue); color:#fff; border-color:var(--color-point-blue) } #AllSearch .allSearchCon .searchRight .sc_word>ol>li:nth-child(2)>a::before { background:#5b9ce6; color:#fff; border-color:#5b9ce6 } #AllSearch .allSearchCon .searchRight .sc_word>ol>li:nth-child(3)>a::before { background:#94c0f1; color:#fff; border-color:#94c0f1 } @media all and (max-width:1168px){ #AllSearch .allSearchCon .searchCon { width:60%; } #AllSearch .allSearchCon .searchRight { width:20%; } } @media all and (max-width:868px){ #AllSearch .topSearchBox fieldset { flex-flow:column; height:inherit } #AllSearch .topSearchBox .scBox { width:80%; display:flex; justify-content: space-between;} #AllSearch .topSearchBox .scBox input { min-width:inherit; width:-webkit-fill-available; } #AllSearch .topSearchBox .btn { min-width:5em; padding:10px; } #AllSearch .topSearchBox .research { margin-left:0; margin-top:10px; flex:100%; } #AllSearch .allSearchCon { border:none; } #AllSearch .allSearchCon .searchCon { width:100%; border-width:1px; margin-top:1em } #AllSearch .allSearchCon .searchRight { border-width:0 1px 1px; border-style:solid; border-color:rgba(0,0,0,.1); } #AllSearch .allSearchCon .searchLeft, #AllSearch .allSearchCon .searchRight { width:100%; } #AllSearch .allSearchCon .searchLeft .sc_Gnb { display:flex; flex-flow:row; flex-wrap: wrap; border-top:1px solid rgba(0,0,0,.1); border-left:1px solid rgba(0,0,0,.1) } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li { flex:0 1 auto; min-width:25%; border-right:1px solid rgba(0,0,0,.1); } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a { padding:10px; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a::after { width:8px; height:8px; right:10px; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:hover::after, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a:focus::after, #AllSearch .allSearchCon .searchLeft .sc_Gnb>li.scActive>a::after { transform: translateY(-60%) rotate(135deg); } } @media all and (max-width:668px){ #AllSearch .topSearchBox .scBox { width:100%; } #AllSearch .allSearchCon .searchCon .resultList h4 { font-size:19px; } #AllSearch .allSearchCon .searchCon .resultList .sc_imgList, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList { gap:10px; } #AllSearch .allSearchCon .searchCon .resultList .sc_imgList li, #AllSearch .allSearchCon .searchCon .resultList .sc_videoList li { width:calc((100% - 10px) / 2) } } @media all and (max-width:468px){ #AllSearch .topSearchBox fieldset { display:inherit; --sizeHig:inherit } #AllSearch .topSearchBox .scBox { display:flex; flex-wrap:wrap; border:none; padding:0; } #AllSearch .topSearchBox .scBox select { width:100%; border-width:1px; margin-bottom:5px; } #AllSearch .topSearchBox .scBox input { width:calc(100% - 5em);border-width:1px; } #AllSearch .topSearchBox .btn { margin-top:0; } #AllSearch .topSearchBox .research { max-width:fit-content; margin-left:auto; margin-right:auto; } #AllSearch .allSearchCon .searchCon .resultList h4 { font-size:18px; } #AllSearch .allSearchCon .searchCon, #AllSearch .allSearchCon .searchRight .sc_word { padding:1.5em; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li { min-width:33.333%; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a { font-size:1em; padding:10px 5px; } #AllSearch .allSearchCon .searchLeft .sc_Gnb>li>a::after { width:7px; height:7px; right:7px; } } /* 마이페이지 - 로그인 */ .Membership .text { font-size:1.03rem; color:rgba(0,0,0,.74); font-weight:400 } .Membership .loginBox { width:80%; max-width:600px; margin-left:auto; margin-right:auto; } .Membership .loginBox strong { display:block; font-size:2.2rem; font-weight:bold; color:#222; } .Membership .loginBasic { margin-top:2em; } .Membership .loginBasic>li { position:relative; display:flex; justify-content:space-between; align-items:center;} .Membership .loginBasic>li+li { margin-top:.75em; } .Membership .loginBasic>li:last-child { margin-top:1.25em; } .Membership .loginBasic>li input[type="text"], .Membership .loginBasic>li input[type="password"] { padding:12px 10px; width:100%; font-size:16px; border-radius:3px; } .Membership .loginBasic>li .btn { width:100%; border-radius:3px;} .Membership .loginBasic>li>a { color:#999; text-decoration:underline; font-weight:400 } .Membership .loginBox .loginSns>ul { margin-top:2em; display:flex; flex-wrap:wrap; gap:7px 15px;} .Membership .loginBox .loginSns>ul>li { flex:auto; min-width:calc(50% - 7.5px); } .Membership .loginBox .loginSns>ul>li>.btn { width:100%; } .Membership .loginBox .btnArea { margin-top:2em; padding-top:2em; border-top:2px solid #222; } .Membership .loginBox .btnArea .btn { width:100%; } #boardWrap .Membership .loginSns>ul>li .btn { height:45px; background-position:10px 50%; background-size:30px; background-repeat:no-repeat } #boardWrap .Membership .loginSns>ul>li .btn.white>span { color:rgba(0,0,0,.64);} #boardWrap .Membership .loginSns>ul>li .btn.white:hover, #boardWrap .Membership .loginSns>ul>li .btn.white:focus { background-color:#fff; border-color:#222; } #boardWrap .Membership .btn.google { background-image:url(../images/bbs/icon_google.svg); } #boardWrap .Membership .btn.kakao { background-image:url(../images/bbs/icon_kakao.svg); } #boardWrap .Membership .btn.naver { background-image:url(../images/bbs/icon_naver.svg); } #boardWrap .Membership .btn.facebook { background-image:url(../images/bbs/icon_facebook.svg); } #boardWrap .Membership .btn.twitter { background-image:url(../images/bbs/icon_twitter.svg); } .Membership .re { margin-top:.5em; font-size:.95rem; color:rgba(0,0,0,.64); } /* 마이페이지 - 아이디/비밀번호 찾기 */ .Membership .idFind, .Membership .pwFind { width:80%; max-width:600px; margin-left:auto; margin-right:auto; } .Membership .idFind .loginBasic, .Membership .pwFind .loginBasic { margin-top:1em; padding-top:1em; border-top:1px solid #222; } .Membership .pwFind { margin-top:2em; } .Membership .idFind h5, .Membership .pwFind h5 { font-size:2.2rem; font-weight:bold; color:#222; } /* 마이페이지 - 회원가입 */ .Membership .join_sortation { margin-top:2em; --sizeHig:120px;} .Membership .join_sortation>ul { display:flex; gap:0 1em; flex-wrap:wrap; justify-content: center;} .Membership .join_sortation>ul>li { width:calc((100% - 1em) / 2) } .Membership .join_sortation>ul>li>a { display:block; padding:2.5em 2em; /*height:100%;*/ border:1px solid #ddd; transition:0.5s ease 0s; border-radius:1.5em; } .Membership .join_sortation .title_wrap {margin-bottom:1em; } .Membership .join_sortation .title_wrap>strong { font-size:1.75rem; font-weight:bold; color:#222; } .Membership .join_sortation .title_wrap>span { width:var(--sizeHig); height:var(--sizeHig); position:relative; display:table; background-color:#f7f7f7; border-radius:100%; margin:0 auto 1em auto; filter:grayscale(1); background-size:70% auto; background-position:50%; background-repeat:no-repeat;} .Membership .join_sortation .title_wrap>span.icon1 { background-image:url(../images/bbs/icon_membersort01.svg); } .Membership .join_sortation .title_wrap>span.icon2 { background-image:url(../images/bbs/icon_membersort02.svg); } .Membership .join_sortation>ul>li>a:hover, .Membership .join_sortation>ul>li>a:focus { border-color:#222; box-shadow:5px 5px 5px rgba(0,0,0,.1);} .Membership .join_sortation>ul>li>a:hover span, .Membership .join_sortation>ul>li>a:focus span { filter:initial } .Membership .join_sortation .btn_wrap { margin-top:1.5em; } .Membership .join_sortation .btn_wrap span.btn {line-height:40px;background-color:var(--color-point-blue) !important;} /* 마이페이지 - 본인인증 */ .Membership .mb_tit { font-size:1.033rem; } .Membership .progress_bar { margin-top:3em; border-radius:3px; background:rgba(40,120,211,.05); padding:1.5em; --sizeHig:90px;} .Membership .progress_bar ol { display:flex; width:100%; counter-reset:num; height:var(--sizeHig); flex-wrap:wrap } .Membership .progress_bar ol>li { position:relative; width:25%; display:flex; align-items:center; justify-content:center; gap:0 1.5em} .Membership .progress_bar ol>li+li::before { position:absolute; width:14px; height:14px; border-style:solid; border-width:1px 1px 0 0; border-color:#2581d7; left:0; top:50%; transform:translateY(-50%) rotate(45deg); content:'';} .Membership .progress_bar ol>li+li::after { position:absolute; width:14px; height:14px; border-style:solid; border-width:1px 1px 0 0; border-color:#c2c2c2; left:-8px; top:50%; transform:translateY(-50%) rotate(45deg); content:'';} .Membership .progress_bar ol>li .icon { width:var(--sizeHig); height:var(--sizeHig); position:relative; display:inline-block; background-color:#fff; border-radius:100%; box-shadow:5px 5px 5px rgba(0,0,0,.05);} .Membership .progress_bar ol>li .icon::before { position:absolute; width:100%; height:100%; left:0; top:0; content:''; background-position:center; background-repeat:no-repeat; background-size:auto; filter:grayscale(1); } .Membership .progress_bar ol>li .icon.icon1::before { background-image:url(../images/bbs/icon_step01.svg); } .Membership .progress_bar ol>li .icon.icon2::before { background-image:url(../images/bbs/icon_step02.svg); } .Membership .progress_bar ol>li .icon.icon3::before { background-image:url(../images/bbs/icon_step03.svg); } .Membership .progress_bar ol>li .icon.icon4::before { background-image:url(../images/bbs/icon_step04.svg); } .Membership .progress_bar ol>li.pgr_on .icon::before { filter:initial } .Membership .progress_bar ol>li strong { color:#343434; } .Membership .progress_bar ol>li strong { color:#222; display:block; font-size:1.167em; font-weight:500} .Membership .progress_bar ol>li strong::before { display:block; counter-increment:num; content:"STEP. 0"counter(num); font-size:.9rem; opacity:.54} .Membership .progress_bar .pgr_on strong { color:#2581d7; } .Membership .progress_bar .pgr_on strong::before { color:#2581d7; } .Membership .progress_bar .pgr_on strong::after { filter:initial} .Membership .join_identify { margin-top:2em; --sizeHig:120px;} .Membership .join_identify>ul { display:flex; gap:0 1em; flex-wrap:wrap; justify-content: center;} .Membership .join_identify>ul>li { width:calc((100% - 1em) / 2) } .Membership .join_identify>ul>li>a { display:block; padding:2.5em 2em; /*height:100%;*/ border:2px solid #ddd; transition:0.5s ease 0s; border-radius:1.5em; } .Membership .join_identify dt { font-size:1.75rem; font-weight:bold; color:#222; margin-bottom:1em; } .Membership .join_identify dt>span { width:var(--sizeHig); height:var(--sizeHig); position:relative; display:table; background-color:#f7f7f7; border-radius:100%; margin:0 auto 1em auto; filter:grayscale(1); background-size:70% auto; background-position:50%; background-repeat:no-repeat;} .Membership .join_identify dt>span.icon1 { background-image:url(../images/bbs/icon_memberidt01.svg); } .Membership .join_identify dt>span.icon2 { background-image:url(../images/bbs/icon_memberidt02.svg); } .Membership .join_identify>ul>li>a:hover, .Membership .join_identify>ul>li>a:focus { border-color:#222; box-shadow:5px 5px 5px rgba(0,0,0,.1);} .Membership .join_identify>ul>li>a:hover span, .Membership .join_identify>ul>li>a:focus span { filter:initial } .Membership .join_identify dd { position:relative; font-size:1rem; padding-top:.5em } .Membership .join_identify dd::before { position:absolute; top:0; left:calc(50% - 4px); width:4px; height:4px; background:#cecece; border-radius:100%; content:''; transform:translateX(-50%)} .Membership .join_identify dd::after { position:absolute; top:0; left:calc(50% + 4px); width:4px; height:4px; background:#cecece; border-radius:100%; content:''; transform:translateX(-50%)} .Membership .join_identify dd+dd { margin-top:.5em; } .Membership .join_identify .btn_wrap { margin-top:1.5em; } .Membership .join_identify .btn_wrap span.btn {line-height:40px;background-color:var(--color-point-blue) !important;} .Membership .join_identify .caution {margin-top:2em;text-align:center;} .Membership .join_identify .caution span {font-size:1.125em;font-weight:700;} .Membership .join_identify .caution p {margin-top:.25em;} .Membership .join_identify .caution p a {display:inline-block;margin-left:.25em;} /* 마이페이지 - 팁 */ .Membership .join_tip { margin-top:2em; padding:2em; background:#f7f7f7; border-radius:.5em; } .Membership .join_tip>li { display:flex; font-size:1rem; line-height:1.4; gap:0 5px; flex-wrap:wrap; } .Membership .join_tip>li+li { margin-top:10px; } .Membership .join_tip>li strong { font-weight:bold; } /* 마이페이지 - 약관동의 */ .Membership .join_agree .titst2 { font-size:1.88em; font-weight:bold; color:#222; margin-bottom:.5em; } .Membership .join_agree .termsCheck + .titst2 {margin-top:2rem; } .Membership .join_agree .termsBox { height:240px; overflow-x:hidden; overflow-y:scroll; border:1px solid #e0e0e0; border-radius:.5em; padding:1.5em; } .Membership .join_agree .termsBox .title_h4:first-child {margin-top:0;} .Membership .join_agree .termsBox .title_h4 {font-size:1.375em;margin-top:1.875em;padding-left:36px;} .Membership .join_agree .termsBox .title_h4::before {width:22px;height:22px;} .Membership .join_agree .termsBox .title_h5 {font-size:1.25em;margin-top:1.25em;} .Membership .join_agree .termsBox .txt {margin-top:14px !important;} .Membership .join_agree .termsList { padding:2%; } .Membership .join_agree .termsCheck { display:flex; justify-content: flex-end; margin-top:1em} .Membership .join_agree .termsCheck label { position:relative; } .Membership .join_agree .termsCheck label span { color:red;} /* 마이페이지 - 정보입력 */ .Membership .join_table { width:100%; margin-top:2em; border-top:2px solid #000; box-sizing:border-box; } .Membership .join_table th, .Membership .join_table td { padding:.75rem; box-sizing:border-box; font-size:1rem; text-align:left; vertical-align:middle; border-bottom:1px solid rgba(0,0,0,.1);} .Membership .join_table th { color:#222; font-weight:500 } .Membership .join_table .flex { display:flex; gap:10px; align-items:center; } .Membership .join_table .flex span { flex:0 1 auto; display:inline-block; } .Membership .join_table .flex.tel * { width:5em; } .Membership .join_table .flex.email * { width:20%; } .Membership .join_table .flex.email input[type="email"]:last-child { width:30%;} .Membership .join_table td .small_txt { display:block; margin-top:.25rem; font-size:.98rem; color:rgba(0,0,0,.64); } .Membership .join_table .flex.add { flex-wrap:wrap; } .Membership .join_table .flex.add .add1 { flex:0 1 15em; } .Membership .join_table .flex.add .add1 input { width:calc(100% - 50%);} .Membership .join_table .flex.add .add2 { flex:0 1 calc(100% - (15em + 10px)); } .Membership .join_table input, .Membership .join_table select, .Membership .join_table textarea { border-radius:3px; font-size:16px; } /* 마이페이지 - 정보입력 */ .Membership .join_complete { margin-top:2em; padding:2em; border-top:2px solid #000; border-bottom:1px solid rgba(0,0,0,.1); --sizeHig:120px;} .Membership .join_complete .icon { position:relative; width:var(--sizeHig); height:var(--sizeHig); display:table; background-color:#fafafa; border-radius:100%; margin:0 auto 1em auto; } .Membership .join_complete .icon::before { position:absolute; width:var(--sizeHig); height:var(--sizeHig); left:0; top:0; background-size:80% auto; background-position:50%; background-repeat:no-repeat; background-image:url(../images/bbs/icon_complete.svg); content:'';} .Membership .join_complete strong { display:block; font-size:1.367em; color:#222; font-weight:600 } .Membership .join_complete>p { margin-top:1em; font-size:1.03rem; } .Membership .tar{margin-top:1.25em;} @media all and (max-width:1568px){ .Membership .join_agree .titst2 {font-size:1.85em;} } @media all and (max-width:1468px){ .Membership .join_agree .titst2 {font-size:1.8em;} } @media all and (max-width:1368px){ .Membership .join_agree .titst2 {font-size:1.75em;} } @media all and (max-width:1268px){ .Membership .join_agree .titst2 {font-size:1.7em;} } @media all and (max-width:1024px){ /* 마이페이지 - 본인인증 */ .Membership .progress_bar { padding:1.5em .5em; } } @media all and (max-width:868px){ /* 마이페이지 - 로그인 */ .Membership .loginBox { width:100%; } .Membership .loginBox .loginSns>ul>li { width:100%; } .Membership .loginBox strong { font-size:2rem; } /* 마이페이지 - 아이디/비밀번호 찾기 */ .Membership .idFind, .Membership .pwFind { width:100%; } .Membership .idFind h5, .Membership .pwFind h5 { font-size:2rem; } /* 마이페이지 - 회원가입 */ .Membership .join_sortation .title_wrap { margin-bottom:1em } .Membership .join_sortation .title_wrap>strong { font-size:1.5rem; } /* 마이페이지 - 본인인증 */ .Membership .mb_tit br { display:none; } .Membership .progress_bar { --sizeHig:80px;} .Membership .progress_bar ol { height:inherit; } .Membership .progress_bar ol>li { flex-flow:column; } .Membership .progress_bar ol>li .icon { display:table; } .Membership .progress_bar ol>li strong { display:block; margin-top:.5em } .Membership .progress_bar ol>li+li::before, .Membership .progress_bar ol>li+li::after { top:calc(40px - 7px); transform:translateY(0) rotate(45deg); } .Membership .progress_bar ol>li+li::after { left:-16px; } .Membership .progress_bar ol>li+li::before { left:-10px; } .Membership .join_identify dt { font-size:1.5rem; margin-bottom:1em } /* 마이페이지 - 정보입력 */ .Membership .join_table th, .Membership .join_table td { display:block; width:100%; } .Membership .join_table th { border-bottom:none; padding-bottom:0 } .Membership .join_table td { padding-top:.25em; } .Membership .join_table .flex.email { flex-wrap:wrap; } .Membership .join_table .flex.email * { width:calc(50% - 1em); } .Membership .join_table .flex.email input[type="email"]:last-child { width:100%;} } @media all and (max-width:668px){ /* 마이페이지 - 회원가입 */ .Membership .join_sortation>ul>li { width:100%; } .Membership .join_sortation>ul>li+li { margin-top:.75em; } /* 마이페이지 - 이용약관 */ .Membership .join_agree .titst2 { font-size:1.6em } .Membership .join_agree .termsBox .title_h4 {font-size:1.25em;margin-top: 1.5em;padding-left:32px;} .Membership .join_agree .termsBox .title_h4:before {width:20px;height:20px;} .Membership .join_agree .termsBox .title_h5 {font-size:1.125em;margin-top:1.125em;} .Membership .join_agree .termsBox .txt {margin-top: 0 !important;} .check_label {line-height:20px;padding-left: 25px;} .check_label::before {width:20px;height:20px;} .check_input:checked + .check_label::before {background-size:14px;} /* 마이페이지 - 정보입력 */ .Membership .join_table .flex.add .add1 { flex:0 1 100%; } .Membership .join_table .flex.add .add2 { flex:0 1 100%; } .Membership .join_table th, .Membership .join_table td { font-size:1.067rem; } /* 마이페이지 - 본인인증 */ .Membership .join_identify>ul>li { width:100%; } } @media all and (max-width:468px){ /* 마이페이지 - 본인인증 */ .Membership .progress_bar { --sizeHig:60px; padding:.5em} .Membership .progress_bar ol { gap:10px; } .Membership .progress_bar ol>li { width:calc(50% - 5px); background:#fff; border-radius:3px; padding:10px; } .Membership .progress_bar ol>li.pgr_on { background:rgba(37,129,215,0.1); } .Membership .progress_bar ol>li .icon { border-radius:0; background:none; box-shadow:inherit; } .Membership .progress_bar ol>li+li::before, .Membership .progress_bar ol>li+li::after { display:none; } .Membership .join_tip { padding:1.5em 1em; } /* 마이페이지 - 정보입력 */ .Membership .join_table .flex { flex-wrap:wrap; gap:5px; } .Membership .join_table .flex.tel input { width:4em; } .Membership .join_table th, .Membership .join_table td { font-size:1.03rem; } } /* 썸네일 */ .thumbnail_wrap { display: block; margin:0 auto; width:70%} .thumbnail { display: block; max-width: 100%; width:100%; margin-bottom:20px} .thumbnail_container { display: flex; justify-content: flex-start; gap: 2%; position: relative; overflow:hidden; width:100%;} .small_image { width: 32%; height: auto; cursor: pointer; } .thumbnail_container .scroll_button { position:absolute; top:50%; width:50px; height:50px; border-radius:10px; background-color: rgba(0, 0, 0, 0.5); transform:translateY(-50%); cursor: pointer;} .thumbnail_container .scroll_left:before, .thumbnail_container .scroll_right:before { content:''; display:block; position:absolute; top:50%; left:50%; border-color:#fff; width:11px; height:11px; transform:translate(-50%, -50%); z-index: 2; border-style:solid;} .thumbnail_container .scroll_button:focus, .thumbnail_container .scroll_button:hover { background-color: rgba(0, 0, 0, 0.8); } .thumbnail_container .scroll_left { left: 10px; } .thumbnail_container .scroll_left:before { border-width:0 0 2px 2px; transform:translate(-35%, -50%) rotate(45deg)} .thumbnail_container .scroll_right { right: 10px; } .thumbnail_container .scroll_right:before { border-width:2px 2px 0 0; transform:translate(-65%, -50%) rotate(45deg)} @media all and (max-width:1024px){ .thumbnail_wrap { width:90%} } @media all and (max-width:425px){ .thumbnail_container .scroll_button { width:30px; height:30px; } } /* 사보 */ .gallery_list ul li .viewData_title { position:absolute; display:inline-block; right:0px; top:0px; height:40px; line-height:40px; padding:0 10px 5px; letter-spacing:0; background:#1b3a86; color:#FFF; z-index:111;} .cursor { cursor:pointer } .databox { opacity: 0; position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(2,37,121,.9);-webkit-transform:translateX(-50%);transform:translateX(-50%);transition:all .5s ease;-webkit-transition:all .5s ease;z-index:110; cursor:pointer} .gallery_list ul li:hover .data_thumb .databox, .gallery_list ul li:focus .data_thumb .databox { opacity: 1; transform:translateX(0); transition:.5s ease-in-out } .gallery_list .data_thumb .databox .datatxt { position:relative; width:60%; z-index:10; display:flex; align-items: center; height:100%; align-content: center; flex-wrap:wrap; margin:0 auto} .gallery_list .data_thumb .databox .datatxt a { height:50px; font-size:15px; color:#fff; line-height:3.4; text-align:center; margin-bottom:6px; border:1px solid rgba(255,255,255,.6); display:block; width:100%;} .gallery_list .data_thumb .databox .datatxt a:nth-child(1) { text-indent:25px; background:url("../images/bbs/icon_data1.png") 20% center no-repeat;} .gallery_list .data_thumb .databox .datatxt a:nth-child(2) { text-indent:25px; background:url("../images/bbs/icon_data2.png") 28% center no-repeat;} .gallery_list .data_thumb .databox .datatxt a.data_modify { background:none; text-indent:0;} .gallery_list .data_thumb .databox .datatxt a:hover { background-color:#fff; color:#282828;} .gallery_list .data_thumb .databox .datatxt a:nth-child(2):hover { background:#ffffff url("../images/bbs/icon_data3.png") 28% center no-repeat;} /*탁구장 안내*/ .table_tennis_court{ } .table_tennis_court .topWrap{display:flex; justify-content:space-between; flex-wrap:wrap;align-items: center;margin-bottom:3.8em;border:1px solid #ddd;border-radius:40px;padding:3em;} .table_tennis_court .topWrap .topImg {width:calc(50% - 2em);max-height:100%} .table_tennis_court .topWrap .topImg .swiper{position:relative;height:100%;} .table_tennis_court .topWrap .topImg .swiper.swiper-wrapper{height: 100%;} .table_tennis_court .topWrap .topImg .swiper .swiper-slide {position: relative;width:100%;overflow: hidden;height: 0; padding-top: 53.812%;border-radius:40px;} .table_tennis_court .topWrap .topImg .swiper .swiper-slide img{width:100%;position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;object-fit: cover;-o-object-fit: cover;transform: translate(-50%, -50%) scale(1, 1) rotate(0.001deg);transition: 0.5s ease 0s;transition-property: transform;} .table_tennis_court .topWrap .topImg .swiper_bottom{ position:absolute; bottom:1.5em;width:100%;left:50%;transform:translateX(-50%);height:45px;z-index:3;text-align:center } .table_tennis_court .topWrap .topImg .control{ display:inline-flex; height:45px; align-items:center; justify-content:center; border-radius:50px; background:#fff; border:1px solid rgba(0,0,0,.1); padding:0 10px;} .table_tennis_court .topWrap .topImg .swiper_bottom button { flex:none; position:relative; width:30px; height:30px; padding:0px; margin:0 3px; } .table_tennis_court .topWrap .topImg .swiper_bottom button:before{ display:block; position:absolute; top:50%; left:50%; content:''; transform: translate(-50%, -50%);} .table_tennis_court .topWrap .topImg .swiper_bottom button.swiper_prev::before{content:'';width:16px;height:16px;background:url(../images/common/icon_prev.svg) no-repeat center center/auto 16px;opacity:.5;} .table_tennis_court .topWrap .topImg .swiper_bottom button.swiper_next::before{content:'';width:16px;height:16px;background:url(../images/common/icon_next.svg) no-repeat center center/auto 16px;opacity:.5;} .table_tennis_court .topWrap .topImg .swiper_bottom .swiper_page{margin-right:0;} .table_tennis_court .topWrap .topImg .swiper_bottom .swiper-pagination-current { font-weight:bold; } .table_tennis_court .topWrap .topImg .swiper_bottom .swiper-pagination-current:after{content:'';background:#ccc;display:inline-block; vertical-align:middle;width:14px;height:1px;margin:-2px 6px 0;} .table_tennis_court .topWrap .topInfo{width: calc(50% - 2em);text-align: left;} .table_tennis_court .topWrap .topInfo .bullet_list{ } .table_tennis_court .topWrap .topInfo .bullet_list > li{display:flex; flex-wrap:wrap; align-items:flex-start;font-size:1.125em;} .table_tennis_court .topWrap .topInfo .bullet_list > li+li{margin-top: 12px;} .table_tennis_court .topWrap .topInfo .bullet_list li strong{ position:relative; padding-left:14px; min-width:6em; margin-right:1em; font-weight:700;} .table_tennis_court .topWrap .topInfo .bullet_list li strong:before { content:'';position:absolute; width:4px; height:4px; background:var(--color-point-red);left:0; top:10px; border-radius:100%; } .table_tennis_court .topWrap .topInfo .bullet_list li span{width:calc(100% - 7em);} .table_tennis_court .info{margin-bottom:3.8em;} .table_tennis_court .info .mapWrap {width:100%;height:0;padding-top:28%;min-height:320px;background:#f1f1f1;border:1px solid #ddd;border-radius:30px;} .table_tennis_court #bo_v_con_branch{width:100% !important;word-break:break-all !important;} /*클럽 현황*/ .club_write .title{display:flex;justify-content: space-between;align-items:center;margin-top: 1.5em;margin-bottom: .75em;} .club_write .title .title_h5{margin-top:0;margin-bottom:0;} .club_write .table tr th .essential{color:#ffe56c;} .club_write .table tr td select{width:100%;background-position-x:96%;} .club_write .table tr td .btn_add{position:initial;} .club_view .table tr td{text-align:center;} .club_view .table tr td:first-child{text-align:center;} @media all and (max-width:1368px) { /* 탁구장 안내 */ .table_tennis_court .topWrap .topImg{width:52%;} .table_tennis_court .topWrap .topImg .swiper .swiper-slide{padding-top:70%;} .table_tennis_court .topWrap .topInfo{width:calc(48% - 2em);} } @media all and (max-width:1168px) { /* 탁구장 안내 */ .table_tennis_court .topWrap{padding:2em;} .table_tennis_court .topWrap .topImg .swiper_control .swiper_page{margin:.8em 0;} .table_tennis_court .topWrap .topInfo .bullet_list li{font-size:1.063em;margin-bottom:0.4em;} } @media all and (max-width:1024px) { /* 탁구장 안내 */ .table_tennis_court .topWrap .topImg .swiper_bottom{bottom:1em;} .table_tennis_court .topWrap .topImg .control{height:42px;padding:0 5px;} .table_tennis_court .topWrap .topInfo .bullet_list li{font-size:1.125em;} .table_tennis_court .topWrap .topInfo .bullet_list li strong{width:22%;} } @media all and (max-width:868px) { /* 탁구장 안내 */ .table_tennis_court .topWrap{padding:1.875em;} .table_tennis_court .topWrap .topImg ,.table_tennis_court .topWrap .topInfo{width:100%;} .table_tennis_court .topWrap .topImg {margin-bottom:2em;} .table_tennis_court .topWrap .topImg .swiper .swiper-slide{padding-top:53%} .table_tennis_court .topWrap .topInfo ul li > *{width:100% !important;} .table_tennis_court .topWrap .topInfo ul li span{padding-left:14px;} .table_tennis_court .info .mapWrap{min-height:280px;} .table_tennis_court .topWrap .topImg .control{height:40px;} /*클럽 현황*/ .club_write .table colgroup col{width:auto;} .club_write .table thead{display:none;} .club_write .table tbody{display:block;border-top:1px solid rgba(0, 0, 0, .1);} .club_write .table tbody + tbody{border-top:transparent;} .club_write .table tr{position:relative;display:block;padding:.75em 0 1.5em;border-bottom:1px solid rgba(0, 0, 0, .1);} .club_write .table tr td{display:block;border:none;padding: .75em .75em 0 .75em;} .club_write .table tr td:last-child{padding:0;} .club_write .table tr td::before{content: attr(data-label);display:block;font-size:1rem;font-weight:500;margin-bottom:.25em;} .club_write .table tr td select{width:auto;background-position:90%;} .club_write .table tr td .btn_add{position:absolute;top:initial;bottom:.95em;right: .5em;} .club_write .table tr td .btn_del{position:absolute;bottom:1.5em;right: .75em;} } @media all and (max-width:668px) { /* 탁구장 안내 */ .table_tennis_court .topWrap .topImg .swiper .swiper-slide{padding-top: 0;min-height: 280px;} .table_tennis_court .topWrap .topInfo .bullet_list li strong,.table_tennis_court .topWrap .topInfo .bullet_list li span{width:100%;} .table_tennis_court .topWrap .topInfo .bullet_list > li+li{margin-top: 10px;} } @media all and (max-width:568px) { /* 탁구장 안내 */ .table_tennis_court .topWrap{border-radius:1.5em;padding: 1.5em;} .table_tennis_court .topWrap .topImg .swiper .swiper-slide{border-radius:1.5em;min-height:240px;} .table_tennis_court .info .mapWrap {border-radius:1.5em;} }