/* 관리자 - 공통 ================================================================================== */ .room_m {padding:0 5px !important;line-height:28px !important;min-height:28px !important;min-width:40px !important;margin-left:2px;} .room_text_deco01 {text-decoration:line-through !important;} .room_graybox {font-size:0.9em; padding:1em; background:#f5f5f5; border-radius:5px; } .room_graybox .sub_list01 + .sub_list01 {margin-top:6px;} /* 관리자 - 정렬버튼 ================================================================================== */ .gsearch_box .sort_btn {position:relative; display: inline-block; cursor: pointer; text-align:center; white-space:nowrap; vertical-align:middle; border-radius:2px; padding: 0 14px; line-height:32px; border:1px solid #c5c5c5; background:#fff;color:#959595; font-size:0.9em; } .gsearch_box .sort_btn i {color:#959595; } .gsearch_box .sort_btn.on, .gsearch_box .sort_btn.on i { color:var(--color1);} /* 관리자 - 시설 타임테이블 ================================================================================== */ .room_timetable_wrap {position:relative;background:#ffffff;border:1px solid #ddd;padding:15px 24px;height:180px;} .room_timetable_wrap .groups {position:absolute;height:70px;width:1500px;z-index:66;} .room_timetable_wrap .groups ul {margin-left:-15px;width:100%;} .room_timetable_wrap .groups li {float:left;height:68px;font-weight:500;} .room_timetable_wrap .bars {position:absolute;margin:28px 0 0 0;width:1500px;z-index:33;} .room_timetable_wrap .bars li {float:left;padding:20px 0 0 0;} .room_timetable_wrap .bars p {text-align:center;padding:8px 0;} .room_timetable_wrap .bars .bar_c1 {border-top:1px solid #fa711a;border-bottom:1px solid #fa711a;background:#fc902b;height:20px;} .room_timetable_wrap .bars .bar_c2 {border-top:1px solid #ababab;border-bottom:1px solid #ababab;background:#c2c2c2;height:20px;} .room_timetable_wrap .bars .timetable_border {border-left:1px solid #ddd;} .room_timetable_wrap .bars .timetable_border:last-child {border-right:1px solid #ddd;} .room_timetable_wrap .barbt {position:relative;top:48px;border:1px solid #e5e5e5;background:#f2f2f2;height:20px;} /* 관리자 - 시설 예약현황 ================================================================================== */ .room_daybold {position:relative;top:-6px;margin:0 0 5px 0; } .room_daybold span {padding:8px 18px 11px 18px;line-height:45px; font-size:20px;font-weight:600;border:1px dashed #bbb;border-top:0;border-left:0; } .room_member_daybox {padding:7px 5px;border-top:1px solid #efefef; } .room_member_daybox:after {content:""; display:block; clear:both;} .room_member_wrap li:first-child {border-top:0;} .room_member_bg {margin-bottom: 2px;background: #edeff3;border: 1px solid #96afd8;padding:6px 4px;position:relative; /* display: flex;justify-content: space-between; */ } .room_member_bg:after {content:""; display:block; clear:both;} .room_member_bg .name {flex:2;color: #4776c4;line-height:30px;font-size:1.05rem;font-weight:500;text-indent:0;cursor:pointer;} .room_member_bg .name:hover {text-decoration:underline;} .room_member_bg.end .name {color: #8f8f8f;} .room_member_bg.end { background: #edeff3;border: 1px solid #dadada; } .rcalendar_adminroom {position:absolute;z-index:2;} .rcalendar_adminyear {position:relative;text-align:center; color:#000; height:40px;margin:25px 0 ; } .rcalendar_adminyear span {font-size:2.8em; transition:var(--transition1);} .rcalendar_adminyear select {border:0; cursor:pointer; font-size:2.2em; font-weight:500;} .rcalendar_adminyear select option {text-align:center; font-size: 1.1rem;} .rcalendar_adminyear .arrow {position:absolute;top:4px;left:0;width:100%;z-index:1;} .rcalendar_adminyear .arrow a {position:absolute;display:block; top:0;width:40px; height:40px; border:1px solid #b5b5b5; cursor:pointer; background:#fff; opacity:0.6; border-radius:50px; transition:var(--transition1);} .rcalendar_adminyear .arrow span {position:absolute;top:14px;display:inline-block; width:10px;height:10px;border:solid #333; border-width:2px 2px 0 0; transition:var(--transition1);} .rcalendar_adminyear .arrow a:hover {opacity:1;} .rcalendar_adminyear .arrow .prev {left:calc(50% - 175px); } .rcalendar_adminyear .arrow .prev span {transform: rotate(-135deg); left:16px;} .rcalendar_adminyear .arrow .next {right:calc(50% - 175px); } .rcalendar_adminyear .arrow .next span{transform: rotate(45deg); right:16px;} /* 리스트 ================================================================================== */ .room_listbox {position:relative; display: grid; grid-template-columns:repeat(3, 1fr); gap:1.4em;transition:var(--transition1);} .room_listbox li {position:relative; } .room_listbox li a {display:block; height:100%; overflow:hidden; border:1px solid #cfcfcf; border-radius:0.7em;} .room_listbox li figure {position:relative; width:100%; aspect-ratio:4/2.6; overflow: hidden; } .room_listbox li figure img {width:100%; height:100%; object-fit:cover; transition:var(--transition1); } .room_listbox li:hover figure img {transform: scale(1.12); opacity:0.8; /*filter: brightness(0.6); */ } .room_listbox li .layer {position:absolute;top:50%;left:50%; width:0;height:0; border-radius:100%;box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25);transform:translate(-50%, -50%);background:#444; transition:var(--transition1); opacity:0;z-index:1;} .room_listbox li .layer::before {position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:28px; height:2px; background:#fff; border-radius:5px ;} .room_listbox li .layer::after {position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); height:28px; width:2px; background:#fff;border-radius:5px ;} .room_listbox li:hover .layer { opacity:1;width:80px;height:80px;} .room_listbox .ing {background:#e94d6a;} .room_listbox .acc {color:#e94d6a; border:1px solid #e94d6a; background:#fff;} .room_listbox .end {background:#737171;} .room_listbox .cont {padding:20px ; } .room_listbox .tit {font-size:1.2em; font-weight:600; color:#000; margin-bottom:15px; /* overflow:hidden; text-overflow:ellipsis; white-space:nowrap; */transition:var(--transition1);} .room_listbox dl {position:relative;font-size:0.9em; display: flex; gap:8px; } .room_listbox dl dt {position:relative; padding-left:12px;} .room_listbox dl dt::before { position:absolute; content:''; left:1px; top:10px; width:3px; height:3px; background:#555; border-radius:5px; } .room_listbox dl dt::after {position:relative; content:':'; right:0; top:-1px; margin-left:5px; /* top:5px; width:1px; height:1em; background:rgb(0,0,0,0.15); */ } .room_listbox dl dd { flex:2; color:#808080; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .room_listbox .btn {position:absolute;bottom:0; width:100%;text-align:center; color:#888; border-top:1px solid #ebe8e8; line-height:55px; transition:var(--transition1);} .room_listbox .more {position:relative; display:inline-block; top:6px; margin-left:13px; width:26px; height:26px; background:var(--color1); border-radius:50%;cursor:pointer;} .room_listbox .more:after {position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:13px; height:2px; background:#fff;} .room_listbox .more:before {position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:2px; height:13px; background:#fff;} .room_listbox li:focus a, .room_listbox li:hover a { border:1px solid var(--color1); box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);} .room_listbox li:focus .btn, .room_listbox li:hover .btn {background:var(--color1); color:#fff;} .room_listbox li:focus .more, .room_listbox li:hover .more { background:rgb(255,255,255,0.4); } @media screen and (max-width:1200px) { .room_listbox { grid-template-columns:repeat(2, 1fr); } .room_listbox .tit {font-size:1.15em; margin-bottom:10px; } .room_listbox .btn { line-height:52px; } } @media screen and (max-width:1024px) { .room_listbox { grid-template-columns:repeat(3, 1fr); gap:1.2em; } .room_nolist {padding:60px 0;} } @media screen and (max-width:768px) { .room_listbox { grid-template-columns:repeat(2, 1fr); } .room_listbox .tit {font-size:1.1em; } } @media screen and (max-width:480px) { .room_listbox { grid-template-columns:repeat(1, 1fr); } } /* 뷰페이지 ================================================================================== */ .room_view_wrap { position: relative; } .room_view_wrap .info_top {position:relative;padding:1.7em ; margin-bottom:40px; border-radius:1em; display: grid; grid-template-columns:43% auto; gap:4%; } .room_view_wrap .info_top::before {position:absolute;content:''; top:0; left:0; width:100%; height:100%; background:var(--color1); opacity:0.05;border-radius:1em;z-index:-1; } .room_view_wrap .info_top::after {position:absolute;content:''; top:0; left:0; width:100%; height:100%; border:1px solid var(--color1); opacity:0.27;border-radius:1em;z-index:-1;} .room_view_wrap .info_top .img {position:relative; display: flex; transition:var(--transition1); } .room_view_wrap .info_top .img figure { display: flex; border:1px solid #dfdfdf; } .room_view_wrap .info_top .img img {width:100%; } .room_view_wrap .info_top .inner { position:relative; } .room_view_wrap .info_top .tit {position:relative; font-size:1.5em; line-height:1.4; font-weight:700; color:#000;border-bottom:1px solid rgb(0,0,0,0.1);padding-bottom:10px; margin-bottom:20px; } .room_view_wrap .info_top .cate {position:relative; top:-2px;display:inline-block;font-size:0.7em;line-height:1.2; padding:5px 10px 6px 10px; color:#fff; background:var(--color2); margin-right:10px; border-radius:5px; } .room_view_wrap .info_top .cont { display: flex; flex-direction: column; gap:10px; } .room_view_wrap .info_top .cont dl {position:relative; display: grid; grid-template-columns:100px auto; gap:12px; font-size:0.95em; line-height:1.3; } .room_view_wrap .info_top .cont dl dt { position:relative; padding-left:12px; color:#111; } .room_view_wrap .info_top .cont dl dt::before {position:absolute; content:''; left:2px; top:6px; width:3px; height:3px; background:var(--color1); border-radius:50%;} .room_view_wrap .info_top .cont dl dt::after {position:absolute; content:''; right:0; top:1px; width:1px; height:1em; background:rgb(0,0,0,0.1); } .room_view_wrap .info_top .cont dl dd {position:relative; } .room_view_wrap .info_top .cont dl .site {padding-right:35px; } .room_view_wrap .info_top .cont .site_link {position:absolute;display:inline-block; right:0;top:-5px; width:28px; height:28px; border-radius:50px; background:var(--color2); color:#fff; cursor:pointer; display: flex; justify-content:center; align-items:center; text-align:center; } .room_view_wrap .info_top .cont .site_link i {font-size:0.7em; } @media screen and (max-width:1024px) { .room_view_wrap .info_top {padding:1.4em; gap:1.5em; } .room_view_wrap .info_top .tit {font-size:1.4em; padding-bottom:10px; margin-bottom:15px; } } @media screen and (max-width:768px) { .room_view_wrap .info_top {padding:1.2em; margin-bottom:30px; grid-template-columns:1fr; gap:15px; } .room_view_wrap .info_top .tit {font-size:1.3em; } .room_view_wrap .info_top .cont { gap:6px; } .room_view_wrap .info_top .cont dl { grid-template-columns:85px auto; gap:10px; font-size:0.9em;} .room_view_wrap .info_top .cont .site_link { top:-5px; width:24px; height:24px; } .room_view_wrap .info_top .cont .site_link i {font-size:0.65em; } } .room_view_calendar {position:relative; margin-bottom:40px ; display:grid;grid-template-columns:46% auto; border-top:2px solid #333;border-bottom:1px solid #ddd; } .room_view_calendar .lt2 { } .room_view_calendar .rt2 { border-left:1px solid #ddd; } .room_view_calendar .lt2 .cont {padding:0 1em 1em 0;} .room_view_calendar .rt2 .cont {padding:0 0 1em 1em;} .room_view_wrap h6 { background:#f5f5f5; padding:14px; text-align:center;color:#222; font-weight:600;font-size:0.95em; } .room_view_calendar .select_date {padding-bottom:10px; font-size:1.05em;font-weight:700; color:var(--color1); } .room_view_calendar .select_date .icon {display:inline-block; width:32px; height:32px; line-height:30px; border-radius:50%; background:var(--color1); color:#fff; text-align:center; font-size:0.85rem; margin-right:8px;} .room_calendar_top {text-align:center;overflow:hidden; padding-bottom:10px; } .room_calendar_top span {padding:0 5px;font-size:1.1em; color:#333;line-height:150%; vertical-align:middle; font-weight:600;} .room_calendar_top i {vertical-align:middle; padding:0 5px;} @media screen and (max-width:1200px) { .room_view_calendar {font-size:0.95em; } .room_view_calendar .lt2 .cont {padding:0 0.8em 0.8em 0;} .room_view_calendar .rt2 .cont {padding:0 0 0.8em 0.8em;} } @media screen and (max-width:1024px) { .room_view_calendar {display:block;} .room_view_calendar .lt2 .cont {padding:0 0;} .room_view_calendar .rt2 { border-left:0; margin-top:20px; border-top:2px solid #333; } .room_view_calendar .rt2 .cont {padding:0 0 20px 0;} } @media screen and (max-width:768px) { .room_view_wrap .wrap {margin-bottom:20px;} .room_view_photo {grid-template-columns:auto;gap:0px;} } @media screen and (max-width:400px) { .room_view_wrap h6 span {float:none; display:block; margin-top:0.5em; } } .room_table {border-collapse:collapse; width:100%; table-layout:fixed; } .room_table thead th {background:#ffffff;border:1px solid #dddddd; color:#4e4e4e; line-height:42px; font-weight:500; font-size:0.85em; } .room_table thead th:first-child {color:#f64a1b;} .room_table thead th:last-child {color:#397fe7;} .room_table tbody td {background:#ffffff; border:1px solid #dddddd; line-height:46px; text-align:center; padding:0px 5px; cursor:pointer;} .room_table tbody td.adm {vertical-align:top; line-height:30px !important;} .room_table i {display:none;} .room_table tbody td:hover {background:#fef7c0;} .room_table .selday, .room_table .selday:hover {background:#006edd;} .room_table .selday p {display:inline-block; color:#fff; line-height:32px; padding:0 5px;} .room_table .selday i {display:inline-block; margin-right:5px; font-size:12px; vertical-align:middle;} .room_table .notday {background:#f8f8f9;} .room_table .notday p {color:#ccc; text-decoration:line-through;} .room_table .notday:hover {background:#f8f8f9; cursor:auto;} .room_table .today {background:#fff;} .room_table .today p {color:#f66000;} .room_table .today i {display:none;} .room_table .redday {color:#f64a1b;} .room_table .blueday {color:#397fe7;} .room_table .usedday {background:#ffcccc !important;} .room_table_btm {border:1px solid #ddd; border-top:0; padding:12px 10px; font-size:0.9em; color:#333;text-align:center;} .room_table_btm span {background:#fff; display:inline-block; width:13px; height:13px; border:1px solid #ccc; margin:0 5px 0 0; vertical-align:middle;} .room_table_btm span.disable {background:#f4f4f4; margin-left:10px;} .room_table_btm span.already {background:#006edd; border-color:#006edd; margin-left:10px;} .room_table_time {overflow:hidden; position:relative; display:grid; grid-template-columns:repeat(2, 1fr);gap:5px 5px; margin-bottom:10px;} .room_table_time li {position:relative; background:#fff; border:1px solid #dbdbdb; border-radius:3px; font-weight:500; padding:12px 14px; height:52px; font-size:0.95em; cursor:pointer;} .room_table_time li span {font-size:0.85em; color:#2780ed;} .room_table_time li i {position:absolute; right:10px; display:inline-block; font-size:11px; color:#999; width:24px;height:24px; line-height:22px; border-radius:100%; text-align:center; border:1px solid #d1d1d1;} .room_table_time li:hover, .room_table_time .on {background:#eaeef5; border-color:#4d95dd;} .room_table_time li:hover i, .room_table_time .on i {background:#006edd; color:#fff; border-color:#006edd;} .room_table_time .off {text-decoration:line-through; color:#bbb; background:#f8f8f9; } .room_table_time .off span {color:#bbb; text-decoration:auto; } .room_table_time .off i {display:none;} .room_table_time .off:hover {background:#f8f8f9; cursor:auto; color:#bbb; } @media screen and (max-width:1200px) { .room_table_time li { padding:10px; height:50px; } .room_table_time li i { top:14px; right:8px; width:20px;height:20px; line-height:18px; } } @media screen and (max-width:1024px) { .room_table tbody td {line-height:42px; font-size:0.95em;} } @media screen and (max-width:580px) { .room_table_time {grid-template-columns:none; gap: 5px 0;} .room_table tbody td {padding:0px;} } /* 동의화면 ================================================================================== */ .room_agreebox {position:relative;border:1px solid #dfdfdf; background:#fff;} .room_agreebox .textarea_form {border-color:#fff; font-size:0.95em;padding:20px; height:230px;} .room_agreebox .bottom { position:relative;background:#f4f5f7; text-align:center; padding:12px; color:#000; } .room_agreebox .bottom input[type="checkbox"] {display: none; } /* 체크박스 이미지 설정 */ .room_agreebox .bottom input[type="checkbox"] + label {position: relative;padding-left:40px; cursor: pointer;display: inline-block; } .room_agreebox .bottom input[type="checkbox"] + label:before {content: '';position: absolute;left: 0;top:-1px;border:1px solid #ddd; border-radius:50%; width:30px; height:30px; background: url('../img/checkbox.png') no-repeat #fff; background-size: contain;} .room_agreebox .bottom input[type="checkbox"]:checked + label:before {background: url('../img/checkbox_on.png') no-repeat #3d89f6; border-color:#3d89f6; background-size:contain; } @media screen and (max-width:1024px) { .room_agreebox .textarea_form {height:200px;} .room_agreebox .bottom input[type="checkbox"] + label {padding-left:37px;} .room_agreebox .bottom input[type="checkbox"] + label:before {width:28px; height: 28px;} } /* 개인정보 동의 ================================================================================== */ .program_agree_box {position:relative;} .program_agree_box .box {position:relative;border:1px solid #dfdfdf; background:#fff;} .program_agree_box .textarea_form {border-color:#fff; font-size:0.9em;padding:25px; height:230px; line-height:1.4; } .program_agree_box .box dl {} .program_agree_box .box dl dt {font-weight:600; padding-bottom:6px; } .program_agree_box .box dl dd {padding-left:14px;} .program_agree_box .box dl dd:not(:last-of-type) {padding-bottom:1em; } .program_agree_box .bottom {position:relative;background:#f4f5f7; text-align:center; font-size:0.9em; padding:15px; color:#000;} .program_agree_box .bottom input[type="checkbox"] {position:relative; cursor:pointer; border:1px solid #ccc; width:28px; height: 28px; border-radius:50px;background: url('../img/checkbox.png') no-repeat #fff; background-size: contain; margin-right:10px; appearance:none ;} .program_agree_box .bottom input[type="checkbox"]:checked {background: url('../img/checkbox_on.png') no-repeat var(--color1); border-color:var(--color1); background-size: contain;} /* .program_agree_box .bottom input[type="checkbox"] {display: none;} .program_agree_box .bottom input[type="checkbox"] + label {position: relative;padding-left:45px; cursor: pointer;display: inline-block;} .program_agree_box .bottom input[type="checkbox"] + label:before {content: '';position: absolute;left: 0;top:-4px;border:1px solid #ddd; width: 30px; height: 30px; border-radius:50px; background: url('../img/checkbox.png') no-repeat #fff; background-size: contain;} .program_agree_box .bottom input[type="checkbox"]:checked + label:before {background: url('../img/checkbox_on.png') no-repeat var(--color1); border-color:var(--color1); background-size: contain;} */ @media screen and (max-width:768px) { .program_agree_box .textarea_form {padding:20px;} } /* 사용자 상세화면 ================================================================================== */ .room_memberview_infobox {position:relative;display:grid; grid-template-columns:60% auto; gap:40px;} @media screen and (max-width:580px) { .room_memberview_infobox {grid-template-columns:auto;gap:20px;} }