@charset "utf-8";

/*board01.css*/
.confirm > ul { background:#fff; border:1px solid rgba(0,0,0,0.4); }
.bod_guide {background:rgba(255,255,255,0.5); border:1px solid rgba(0,0,0,0.2);}
.bod_list th { font-size:16rem; font-weight:600; background:transparent; border-color:rgba(0,0,0,0.4); }
.bod_list td { font-size:15rem; border-color:rgba(0,0,0,0.2);}
.bod_list .list_tit a { display:block; width:calc(100% - 30rem); padding-top:0;}
.bod_list .list_date {width:15%; }
.bod_list tbody tr:nth-of-type(odd), .bod_list tbody tr:nth-of-type(odd) th {background:rgba(255,255,255,0.2); }
.bod_list tbody tr:nth-of-type(even), .bod_list tbody tr:nth-of-type(even) th {background:transparent; }
.bod_page .first {background-color:#fff; }
.bod_view > h4 { font-size:20rem !important; font-weight:600; background:rgba(255,255,255,0.2) !important; border-color:rgba(0,0,0,0.3); }
.bod_view > h4::after {display:none !important; }
.bod_view .view_cont { border-color:rgba(0,0,0,0.2); }
.bod_btn a { border-color:rgba(0,0,0,0.2) !important; background:#fff;}
.bod_btn a.btn_list,
.bod_btn a.btn_blue02 { background:var(--p_color) !important; color:#fff; }
.bod_btn input[type='submit'] {font-family:'NanumSquareNeo', sans-serif; font-size:16rem; cursor:pointer; }
.bod_gallery {border-bottom:1px solid rgba(0,0,0,0.2)}
.bod_gallery .subject {font-size:16rem;}
.bod_gallery .date {font-size:0.9em;}
.tbl_form dl {border-color:rgba(0,0,0,0.2); }
.tbl_form dd.file {display:flex; align-items:center; flex-wrap:wrap; }
.tbl_form dd.file label {width:40rem; margin:3rem 0;}
.tbl_form dd.file label:nth-of-type(2n) {width:100rem; text-align:right; padding-right:5rem;}
.tbl_form dd.file input {width:calc((100% - 140rem)/2); }
.tbl_form dd input[type='file'] {background:#fff;}
@media all and (max-width:768px){
	.tbl_form dd.file label,
	.tbl_form dd.file label:nth-of-type(2n) {width:100rem; text-align:left;}
	.tbl_form dd.file label:nth-of-type(2n),
	.tbl_form dd.file input:nth-of-type(2n){ margin-bottom:10rem; }
	.tbl_form dd.file input {width:calc(100% - 100rem); }
}


/*common*/
.table thead th::after {opacity:0.2 !important; z-index:-1; }
.table thead th {border-color:rgba(0,0,0,0.4) !important; font-weight:600;}
.table tbody th,
.table tbody td {border-color:rgba(0,0,0,0.2) !important;}


/*content*/
.location_map .info {background:rgba(255,255,255,0.5); border-radius:10rem; }


.reserve_info .cont1 {display:flex; flex-wrap:wrap; justify-content:space-between; }
.reserve_info .cont1 dl {width:calc((100% - 40rem)/3); background:rgba(255,255,255,0.3); padding:20rem; border-radius:20rem;  }
.reserve_info .cont1 dt {display:flex; align-items:center; justify-content:center;  font-size:22rem; font-weight:600; margin-bottom:15rem; }
.reserve_info .cont1 dt span { display:flex; flex-shrink:0; align-items:center; justify-content:center; background:var(--p_color); width:45rem; height:45rem; border-radius:50%; margin-right:13rem; }
.reserve_info .cont1 dt span::before {content:''; display:block; width:28px; height:28px; background:var(--sprite_m) -75px -25px; }
.reserve_info .cont1 dl:nth-of-type(2) dt span::before { width:26px; height:25px; background-position-x:-113px; }
.reserve_info .cont1 dl:nth-of-type(3) dt span::before { width:28px; height:20px; background-position-x:-149px; }
.reserve_info .cont1 dd p.time { font-size:25rem; font-weight:600; color:var(--p_color); margin-bottom:5rem; }
.reserve_info .cont1 dd p.check_txt { font-size:0.85em; margin-top:10rem; }
.reserve_info .pay tbody tr:nth-child(even) td {background:rgba(0,0,0,0.05); }
@media (max-width:1500px) and (min-width:1201px), all and (max-width:768px) {
	.reserve_info .cont1 dl { display:flex; flex-wrap:wrap; width:100%; margin-bottom:20rem; }
	.reserve_info .cont1 dt {width:180rem; justify-content:flex-start; }
	.reserve_info .cont1 dd {width:calc(100% - 180rem);}
}
@media all and (max-width:480px){
	.reserve_info .cont1 dt {width:100%;}
	.reserve_info .cont1 dd {width:100%;}
}

.facility .map { background:rgba(255,255,255,0.4); padding:30rem; border-radius:20rem; }
.facility .map img { display:block; max-width:650rem; width:100%; margin:0 auto 30rem; }
.facility .map .list { display:flex; flex-wrap:wrap; }
.facility .map .list li { display:flex; width:calc(25% - 10rem); margin:7rem 5rem; word-break: break-all; line-height:1.4; }
.facility strong { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:30rem; height:30rem; border-radius:50%; color:#fff; margin:-3rem 7rem 0 0; font-size:0.9em; }
.facility .color1 {background:#8a72b3;} 
.facility .color2 {background:#fec10d;} 
.facility .color3 {background:#f6a3a9;} 
.facility .color4 {background:#acd58a;} 
.facility .color5 {background:#f7931d;} 
.facility .color6 {background:#2ab573;} 
.facility .color7 {background:#ef403d;} 
.facility .color8 {background:#bdb532;} 
.facility .color9 {background:#a6ce38;} 
.facility .color10 {background:#898b8e;} 
.facility .color11 {background:#5da8dd;} 
.facility .detail_list div { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; margin:40rem 0; }
.facility .detail_list div > * { width:48%; }
.facility .detail_list dt { display:flex; align-items:center; font-size:25rem; font-weight:600; margin:20rem 0 15rem;}
.facility .detail_list dt strong { width:40rem; height:40rem; }
@media (max-width:1500px) and (min-width:1201px), all and (max-width:768px) {
	.facility .map .list li { width:calc(33.33% - 10rem); }
}
@media all and (max-width:480px) {
	.facility .map {padding:20rem;}
	.facility .map .list li { width:calc(50% - 10rem); }
	.facility .detail_list div > * { width:100%; }
}


/* 예약하기 */
.reserve_caution { position:relative; background:#fff; padding:30rem; margin-bottom:40rem;  }
.reserve_caution::before {content:''; position:absolute; left:0; top:-20px; width:100%; height:20px; background:url('/design2024/science/img/cont_memo_bg.png') repeat-x ;}
.reserve_caution .title {text-align:center; margin-bottom:30rem; }
.reserve_caution .title p { position:relative; text-align:left; display:inline-flex; flex-wrap:wrap; align-items:center; background:#d30a0a; color:#fff; font-weight:600; font-size:1.3em; padding:10rem 25rem; border-radius:25rem; }
.reserve_caution .title p::after {content:''; position:absolute; right:30rem; bottom:-20rem; width:30rem; height:30rem; background:linear-gradient(-45deg, transparent 50%, #d30a0a 50%); transform:rotate(15deg); }
.reserve_caution dl {position:relative; padding-left:20rem; margin:15rem 0; }
.reserve_caution dl::before { content:''; position:absolute; left:0; top:7rem; width:5rem; height:10rem; border-bottom:3px solid var(--p_color); border-right:3px solid var(--p_color); transform:rotate(45deg); margin:0 7rem 3rem 0; }
.reserve_caution dt { display:inline-flex; align-items:center;  font-size:1.2em; font-weight:600; border-bottom:1px dashed var(--p_color); margin-bottom:5rem; }

/* 예약하기 - 달력 */
.reserList .monthTab { margin-bottom:30rem; }
.reserList .monthTab div { display:flex; align-items:center; justify-content:space-between; margin-bottom:20rem; }
.reserList .monthTab div a {display:flex; align-items:center;}
.reserList .monthTab div a::before {content:''; display:block; width:7rem; height:7rem; border-top:3px solid #444; border-left:3px solid #444; transform:rotate(-45deg); margin:0 5rem; }
.reserList .monthTab div a.next {flex-direction:row-reverse; }
.reserList .monthTab div a.next::before { transform:rotate(135deg); }
.reserList .monthTab div p {font-size:25rem; font-weight:600; }
.reserList .monthTab ul { display:flex; flex-wrap:wrap; }
.reserList .monthTab ul li { width:calc(100% / 12); padding:2rem; }
.reserList .monthTab ul li a { position:relative; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.4); height:40rem; border-radius:5rem; }
.reserList .monthTab ul li.on a { font-weight:600; }
.reserList .monthTab ul li.on a::after { content:''; position:absolute; left:0; bottom:0; width:100%; height:3rem; background:var(--p_color); }
.reserList .cal { position:relative; width:100%; border-radius:20rem; }
.reserList .cal > p { font-size:30rem; font-weight:600; margin-bottom:5rem; }
.reserList .cal > p span { color:#555; letter-spacing:0; font-size:0.6em; font-weight:400; padding-left:10rem; }
.reserList .cal table {width:100%; table-layout:fixed; }
.reserList .cal table th { position:relative; padding:10rem 0; width:calc(100% / 7); color:#fff; font-weight:600; text-align:center;}
.reserList .cal table th::after,
.reserList .cal table td::after { content:''; position:absolute; left:3rem; top:3rem; width:calc(100% - 6rem); height:calc(100% - 6rem); border-radius:10rem; background:var(--p_color); z-index:-1; }
.reserList .cal table td { position:relative; height:100rem; vertical-align:top; padding:30rem 10rem 10rem; }
.reserList .cal table td::after {background:rgba(255,255,255,0.3); }
.reserList .cal table tr:first-child td {border-top:0;}
.reserList .cal table tr td:first-child {border-left:0;}
.reserList .cal table td > span {position:absolute; left:10rem; top:10rem; font-size:0.9em; }
.reserList .cal table td a { position:relative; display:block; margin:10rem 0; text-align:center; padding:5rem; background:rgba(255,255,255,0.4); border-radius:5rem; }
.reserList .cal table td a:hover {background:var(--p_color); color:#fff; }
.reserList .cal table td a.end {background:rgba(0,0,0,0.1); color:#666; }
.reserList .cal table td a.holiday {background:none; color:#222; }
.reserList .cal table td a span { display:block; font-weight:600; }
.reserList .cal table td a:not(.end,.holiday) span { font-size:0.85em; }
@media all and (max-width:610px){
  .reserList .cal {overflow-x:scroll;}
  .reserList .cal table {width:610px;}
}
@media all and (max-width:480px){
	.reserList .monthTab ul li { width:calc(100% / 6); }
}
/* 예약하기 - 쓰기 */
.reserWrite legend {font-size:23rem; font-weight:600; margin-bottom:10rem;}
.reserWrite .agree { background:rgba(255,255,255,0.4); padding:20rem 30rem; border-radius:10rem; margin-bottom:40rem; }
.reserWrite .agree .check { display:flex; align-items:center; justify-content:center; gap:5rem; font-size:0.95em; margin-top:10rem; border-top:1px solid rgba(0,0,0,0.1); margin-top:10rem; padding-top:10rem; }
.reserWrite .agree .check .agreeMaxNum {font-weight:600; color:#cc3333; }
.reserWrite p.info {text-align:right; }
.reserWrite dl {display:flex; border-top:1px dashed rgba(0,0,0,0.2); padding:10rem 0; }
.reserWrite dl:first-of-type {border-top:1px solid rgba(0,0,0,0.3); margin-top:10rem; }
.reserWrite dl:last-of-type {margin-bottom:30rem; }
.reserWrite dt { align-content:center; width:130rem; font-weight:600; }
.reserWrite dd { width:calc(100% - 130rem); }
.reserWrite dd input[type="text"],
.reserWrite dd select { border:0; max-width:200rem; width:calc(100% - 25rem); background:rgba(255,255,255,0.5); border-radius:10rem; padding:0 5rem; height:40rem; }
.reserWrite .boardBtn { display:flex; align-items:center; justify-content:center; gap:10rem; }
.reserWrite .boardBtn a { display:flex; align-items:center; padding:0 20rem; height:40rem;  background:#Fff; border:1px solid rgba(0,0,0,0.1); }
.reserWrite .boardBtn *:first-child {background:var(--p_color); color:#fff;}
.reserWrite .check_txt {margin-top:10rem; }
#detail_dd {margin-top:10rem; }
#detail_dd > div { display:flex; flex-wrap:wrap; justify-content:space-between; margin:7rem 0; }
#detail_dd > div input { max-width:none; width:calc((100% - 15rem)/4); margin:2.5rem 0; }
.reserve_check_layer { display:none; position:fixed; left:50%; top:0; width:50%; height:100%; z-index:10;}
.reserve_check_layer > div {position:absolute; left:50%; top:50%; max-width:500rem; width:80%; transform:translate(-50%, -50%); z-index:10; background:#fff; box-shadow:2rem 2rem 10rem rgba(0,0,0,0.2); border-radius:20rem; padding:30rem;  }
.reserve_check_layer p {font-weight:600; margin-bottom:20rem; }
.reserve_check_layer .btn a {display:inline-flex; align-items:center; justify-content:center; width:90rem; height:40rem; background:#333; color:#fff; border-radius:10rem; margin:3rem; }
.reserve_check_layer .btn a:first-of-type {background:var(--p_color); }
.reserve_check_layer::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); }
@media all and (max-width:1200px){
	.reserve_check_layer {left:0; width:100%;}
}
@media all and (max-width:480px){
	.reserWrite dt {width:100rem;}
	.reserWrite dd { width:calc(100% - 100rem); }
	#detail_dd > div input { width:calc((100% - 5rem)/2); }
}

/*예약확인*/
.reserCheckList .empty { justify-content:center; padding:40rem; font-size:30rem; font-weight:600; }
.reserCheckList {display:flex; flex-wrap:wrap; justify-content:space-between; }
.reserCheckList > div { position:relative; width:calc((100% - 40rem)/2); background:#fff; box-shadow:5rem 5rem 5rem rgba(0,0,0,0.1); border-radius:20rem; overflow:hidden; padding:10rem 20rem 10rem 60rem; margin:15rem 0; }
.reserCheckList > div::before { content:''; position:absolute; left:0; top:0; width:40rem; height:100%; background:var(--orange);  }
.reserCheckList > div.type2::before {background:var(--p_color);}
.reserCheckList > div.type4::before {background:#777;}
.reserCheckList .apply_status { position:absolute; left:-10rem; top:50%; transform:rotate(-90deg) translateX(20%); color:#fff; font-weight:600; }
.reserCheckList li {display:flex; flex-wrap:wrap;}
.reserCheckList li strong {width:80rem;}
.reserCheckList li > *:not(strong) {width:calc(100% - 80rem); }
.reserCheckList li p {font-size:0.95em; }
.reserCheckList li p span {display:block; font-weight:600; color:#c1291a;}
.reserCheckList .btn {display:flex; justify-content:center; margin:10rem 0; }
.reserCheckList .btn a { display:flex; background:#c1291a; color:#fff; font-weight:600; border-radius:10rem; padding:5rem 20rem; }
@media (max-width:1500px) and (min-width:1201px), all and (max-width:768px) {
	.reserCheckList > div { width:100%; }
}