@charset "utf-8";

/* 달력 예약페이지 */
.calendar_wrap {margin-top: 60px;}
.calendar_wrap .column {display: inline-block; position: relative; box-sizing: border-box; width: 100%; margin: 0 -0.25em 0 0; padding: 20px; vertical-align: top;}
.calendar_wrap .cal_left {width: 64%;}
.calendar_wrap .cal_left .toolbar {display: flex; justify-content: space-between;}
.calendar_wrap .cal_left .toolbar button { width: 40px; height: 40px;}
.calendar_wrap .cal_left .toolbar button:nth-of-type(1) {background: url(../images/cal_arrowL.png);}
.calendar_wrap .cal_left .toolbar button:nth-of-type(2) {background: url(../images/cal_arrowR.png);}

.calendar_wrap .cal_left .cal_view {background: rgb(255 251 243); width: 100%;}

.calendar_wrap .cal_right {width: 36%;}
.calendar_wrap .cal_right .title_line {}
.calendar_wrap .cal_right .title_line button {width: 55px; height: 55px; background: url(../images/reset.png); text-indent: -99999px; border-radius: 5px; border: 1px solid rgb(167, 167, 167); margin-bottom: 16px; float: right; }

/* 예약 선택 박스 */
.calendar_wrap .cal_right .cal_detail {clear: both;border: 3px solid #dfdfdf; border-radius: 6px; padding: 20px;}
.calendar_wrap .cal_right .cal_detail .detail_title {text-align: center; font-size: calc(0.26vw + 19.08px); font-weight: bold;}
.calendar_wrap .cal_right .cal_detail .detail_list {width: 100%; height: 574px; display: flex; flex-direction: column; justify-content: space-between;}
.calendar_wrap .cal_right .cal_detail .detail_list ul {display: flex; flex-flow: wrap; justify-content: flex-start;}
.calendar_wrap .cal_right .cal_detail .detail_list ul li {    position: relative; line-height: 2.25; justify-content: space-between; height: 100px; border-radius: 10px; margin-bottom: 10px; text-align: center; background: #fff; overflow: hidden; box-sizing: border-box;  margin-right: 5px;    flex: 0 0 31%;}

.calendar_wrap .cal_right .cal_detail .detail_list ul li span.re_possible {width: 100%;}

.calendar_wrap .cal_right .cal_detail .detail_list ul li span {position: absolute; top: 65%; left: 50%; transform: translate(-50%,-50%); font-size: 16px; color: #f15a22; cursor: pointer; font-weight: 700;}

.calendar_wrap .cal_right .cal_detail .detail_list .btn-set button {width: 80%; height: 42px; background-color: #f15a22; font-size: 16px; color: #fff; border-radius: 10px; margin: 0 auto; display: block;}

input[class*="check_full"] {display:none; position:relative;}
input[class*="check_full"] + label em {display:inline-block;width:100%;height:100%;position:absolute;top:0;left:0;vertical-align: middle;cursor:pointer;font-weight: 700;font-size: 16px;box-sizing: border-box;}
input[class*="check_full"]:checked + label em {background: #f15a22;color: #fff;}
input[class*="check_full"] + label em,
input[class*="check_full"]:checked + label em {padding: 15px;}
input[class*="check_full"]:checked + label span {color:#fff !important;}
input[class*="check_full"] + label span {color:#f15a22 !important;}

.cal_detail {border:1px solid #DDDDDD;background: #f5f5f5;min-height: 615px;position: relative;border-radius: 15px;padding: 30px;box-sizing: border-box;}
.cal_detail .detail_title {height:80px;}
.cal_detail .detail_title  p {color: #111;line-height:80px;font-size: 1.412rem;text-align: center;font-weight: 600;}
.cal_detail .detail_list .sel_area {width: 80%; margin: 0 auto;margin-top:150px; }
.cal_detail .detail_list .sel_area select {width:48%;margin-right:1%}
.cal_detail .detail_list ul {display: flex;flex-flow: wrap;justify-content: flex-start;}
.cal_detail .detail_list ul li {position:relative;line-height: 2.25;flex: 0 0 32%;justify-content: space-between;height: 100px;border-radius: 10px;margin-bottom: 10px;text-align: center;background: #fff;overflow: hidden;box-sizing: border-box;margin-right: 5px;}
.cal_detail .detail_list ul li:nth-child(3n) {margin-right:0;}
.cal_detail .detail_list ul li input[type="caheckbox"] {border:3px solid}

.cal_detail .detail_list ul li span {position:absolute;top: 65%;left: 50%;transform: translate(-50%,-50%);font-size: 16px;color: #f15a22;cursor: pointer;font-weight: 700;}
.calendar_wrap .cal_detail .detail_list ul li span.re_possible {width: 100%;}
.cal_detail .detail_list ul li span.re_impossible {background:#231916;}
.cal_detail .detail_list .btn-set {padding: 30px;position: absolute;width: 100%;bottom: 0;left: 0;right: 0;margin: 0;box-sizing: border-box;}

/* 달력 */
.cal_view table {border-collapse: collapse; width: 100%;}
.cal_view th {text-align: center; font-weight: bold; height: 40px; line-height: 40px; border : 1px solid gray; }
.cal_view td {border : 1px solid gray; padding: 3px; width: 120px; height: 120px; padding: 6px;}
.cal_view td .next_monthDay span {color: rgb(157, 157, 157);}
.cal_view thead {background-color: #282828; font-weight: bold; color: #fff;}

.cal_altxt {margin-top: 10px;}
.cal_altxt p:first-child {margin-bottom: 10px;}
.fcR {color: rgb(217, 3, 3);}

.calDay_msg span {display: block; width: 90%; height: 30px; line-height: 30px; color: #fff; border-radius: 15px; text-align: center; margin: 0 auto;font-size: calc(0.26vw + 11.08px); }
.cal_holiday {background: rgb(178, 0, 0);}
.re_complete {background: rgb(0, 0, 0);}


#calendar_div td.active {
    border: 3px solid #f15a22;
}



@media only screen and (max-width:980px){
    /* 달력 월 이동 방향버튼 */
    .calendar_wrap .cal_left .toolbar button { width: 26px; height: 26px;}
    .calendar_wrap .cal_left .toolbar button:nth-of-type(1) {background: url(../images/cal_arrowL.png) no-repeat center;}
    .calendar_wrap .cal_left .toolbar button:nth-of-type(2) {background: url(../images/cal_arrowR.png) no-repeat center;}

    /* 반응형 레이아웃 변경 */
    .calendar_wrap {margin-top: 0px;}
    .calendar_wrap .column { margin: 0; padding: 0px;}
    .calendar_wrap .cal_left {width: 100%;}
    .calendar_wrap .cal_right {width: 100%;}
}

@media only screen and (max-width:720px){
    .cal_view td {padding: 0;height: 80px;}
}


/* list header */
.list_header{gap: 0 10px; height:60px;}
.list_header:has(.list_header_left){padding-bottom:var(--rem-20); border-bottom: 1px solid var(--color-gray2);}
.list_header + .pro_flex{margin-top:var(--rem-40);}
.pro_flex ul li {flex-basis: inherit; width: calc((100% - (var(--rem-40) * 3)) / 4);}
.list_footer{margin-top:var(--rem-50); padding-top:var(--rem-50); border-top: 1px solid #dadada;}
@media(max-width:1100px){
	.pro_flex ul li {width: calc((100% - (3.4rem * 2)) / 3);}
}
@media (max-width: 800px) {
	.pro_flex ul li {width: calc((100% - (var(--rem-30) * 1)) / 2);}
}
@media screen and (max-width: 640px) {
	.pro_flex ul li {width: calc((100% - (var(--rem-20) * 1)) / 2);}
}
@media screen and (max-width: 400px) {
	.list_header:has(.list_header_left) {flex-direction: column; gap: 8px; align-items: flex-start;}
}

/* list search */
.search_wrap{display: flex; justify-content: center; align-items: center; gap: 0 3.5rem;}
.search_wrap label{font-size: var(--rem-24); font-weight: var(--font-lg);}
.search_wrap label strong{font-weight: var(--font-sb);}
.search_inner{display: flex; gap: 0 5px;}
.search_inner label{font-size: var(--rem-20); width:80px; flex-shrink: 0; font-weight: var(--font-md);}
.search_inner input{padding:1.2rem var(--rem-20); width: 450px; border: 1px solid #dadada; border-radius: 5px; font-size: var(--rem-20); }
.search_inner button{padding:15px var(--rem-24); border-radius:5px; background-color: var(--brand-color-main); font-size: 1em; color: #ffffff; }
@media(max-width:1024px){
  .faq_search_inner input{width:auto; }
}
@media(max-width:768px){
  .search_wrap { flex-direction: column; gap:8px;}
  .search_inner input {padding: 1rem var(--rem-20); font-size: var(--rem-18);}
  .search_inner button {padding: 12px var(--rem-24);}
}
@media(max-width:540px){
  .search_wrap { flex-direction: column; gap:8px;}
  .search_inner{width:100%;}
  .search_inner input {width: 100%;} 
}

/* table */
.table_wrap {position: relative;}
.table_wrap table{width: 100%; table-layout: fixed; }
.table_wrap table th,
.table_wrap table td{padding:16px 30px;}
.table_wrap table thead{border-top: 1px solid var(--color-gray5); border-bottom: 1px solid var(--color-gray2); }
.table_wrap table thead th{font-weight: bold;  }
.table_wrap table tbody tr{border-bottom: 1px solid var(--color-gray2);}
.table_wrap table tbody th{font-weight: bold;}
.table_wrap table thead th.gray_tbg,
.table_wrap table tbody td.gray_tbg{background-color: #EBEEF0;}
@media(max-width:1100px){
	.table_wrap table td{padding:14px 24px;}
}
@media(max-width:768px){
	.table_wrap table td {padding: 10px 16px;}
}
@media(max-width:450px){
	.table_wrap table td {padding: 8px 12px;}
}

/* ==================================================
	고객샌터 공지사항
================================================== */
.cs_notice .list_header .list_header_right { margin-bottom:20px; }
.cs_notice .cs_body{margin:50px auto; max-width:1360px;}
.cs_notice .list_title{font-size: var(--rem-25);}
.cs_notice .search_inner input{  width: 280px; border:1px solid; border-radius: 5px; font-size: 1em; padding: 8px var(--rem-20);}
.cs_notice .search_inner button{padding:6px var(--rem-13)}
.cs_notice .cs_notice_list_wrap table col:first-child,
.cs_notice .cs_notice_list_wrap table col:last-child{width:160px;}
.cs_notice .cs_notice_list_wrap table tbody td:first-child{text-align: center;}
.cs_notice .cs_notice_list_wrap table tbody td:last-child{text-align: center;}
.cs_notice .cs_notice_list_wrap table td{vertical-align: middle;}
.cs_notice .cs_notice_list_wrap table td:has(a){padding:0; }
.cs_notice .cs_notice_list_wrap table td a{padding: var(--rem-20); display: block; overflow: hidden;}
.cs_notice .pagination{margin-top:60px;}
.cs_notice .pagination .paging_inner_wrap .page_num_group .page_num.active {border-color: #323232; background: #323232;
}
@media(max-width:1024){
  .cs_notice .pagination{margin-top:56px;}
}
@media(max-width:768px){
  .cs_notice .search_inner input {width: 220px;}
  .cs_notice .search_inner button {padding: 8px var(--rem-14);}
  
  .cs_notice .cs_notice_list_wrap table{ border-top: solid 1px var(--brand-color-main);}
  .cs_notice .cs_notice_list_wrap table thead{display: none;}
  .cs_notice .cs_notice_list_wrap table col:first-child,
  .cs_notice .cs_notice_list_wrap table th:first-child,
  .cs_notice .cs_notice_list_wrap table td:first-child{display: none;}
  .cs_notice .cs_notice_list_wrap table,
  .cs_notice .cs_notice_list_wrap table tbody,
  .cs_notice .cs_notice_list_wrap table tr,
  .cs_notice .cs_notice_list_wrap table td{display: block; width:100%; text-align: left;}
  .cs_notice .cs_notice_list_wrap table tbody td:last-child {
    padding:0 var(--rem-16) var(--rem-16) !important; text-align: left;}
  .cs_notice .cs_notice_list_wrap table td a {padding: var(--rem-16); width: 100%;}
  .cs_notice .pagination{margin-top:48px;}
}
@media(max-width:400px){
  .cs_notice .list_header:has(.list_header_left) {align-items: center; gap: 12px;}
  .cs_notice .list_header .list_header_right{width:100%;}
  .cs_notice .search_inner input {width: 100%}
}


/* ==================================================
	고객샌터 공지사항 상세페에지
================================================== */
.cs_notice_view .list_header:has(.list_header_left) {border-bottom: 2px solid;}
.notice_view_header{padding:var(--rem-40) 10px; border-bottom: 1px solid #dadada;}
.notice_view_header h6{font-size: 3.5rem; line-height: 1.25; font-weight: var(--font-sb);}
.notice_view_header span{margin-top:var(--rem-20); display: block; color: #8c8c8c;}
.notice_view_body{padding:5rem var(--rem-30) 8rem;  border-bottom: 1px solid #dadada; line-height: 1.5;}
.notice_view_body img{max-width: 100%;}
.notice_view_file{margin-top:10px; padding:var(--rem-20) var(--rem-30); border: 1px solid #dadada; background-color: #F8F8F8;}
.notice_view_file ul li + li{margin-top:10px;}
.notice_view_file ul li a{display: inline-flex; align-items: center; gap: 0 var(--rem-15); overflow: hidden;}
.notice_view_file ul li a i{flex-shrink: 0;}
.notice_view_file ul li a img{width: 100%;}
.cs_notice_view .notive_view_footer{margin-top:60px;}

@media(max-width:1024px){
  .notice_view_header {padding: var(--rem-30) 10px;}
  .notice_view_header h6 {font-size: 3.2rem;}
  .notice_view_header span {margin-top: var(--rem-16);}
  .notice_view_body {padding: 4rem var(--rem-30) 6rem;}
  .cs_notice_view .notive_view_footer{margin-top:56px;}
}
@media(max-width:768px){
  .notice_view_header {padding: var(--rem-20) 10px;}
  .notice_view_header h6 {font-size: 2.8rem;}
  .notice_view_header span {margin-top: var(--rem-13);}
  .notice_view_body {padding: 3rem var(--rem-20) 4rem;}
  .notice_view_file {padding: var(--rem-13) var(--rem-16);}
  .notice_view_file ul li a {gap: 0 var(--rem-13);}
  .notice_view_file i{width:28px; height:28px;}
  .cs_notice_view .notive_view_footer{margin-top:48px;}
}

/* common */
.submit_btns{display: flex; justify-content: center; align-items: center; margin-top:20px;}
.submit_btns .submit_btn{padding:13px; display: flex; justify-content: center; align-items: center; width:160px; border: 1px solid; border-radius: 8px; box-sizing: border-box; font-size: var(--rem-20); font-weight: var(--font-sb);  }



/* ==================================================
	보도자료 상세페에지 - 썸네일 슬라이드
================================================== */
/* 전체 영역 */
.gallery-viewer {
  max-width: 900px;
  margin: 0 auto 50px;
}

/* 메인 슬라이드 */
.gallery-main {
  position: relative;
  overflow: hidden;
}

.gallery-track {
  display: flex;
  transition: transform 0.4s ease;
}

.gallery-slide {
  flex: 0 0 100%;
}

.gallery-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* 화살표 */
.gallery-arrow {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  background: rgba(0,0,0,.5);
  border: 0;
  cursor: pointer;
  transform: translateY(-50%);
}

.gallery-arrow.prev { left: 10px; }
.gallery-arrow.next { right: 10px; }

.gallery-arrow::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  margin: auto;
}

.gallery-arrow.prev::before { transform: rotate(135deg); }
.gallery-arrow.next::before { transform: rotate(-45deg); }

/* 썸네일 */
.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

.gallery-thumbs li {
  border: 2px solid transparent;
}

.gallery-thumbs li.is-active {
  border-color: #111;
}

.gallery-thumbs img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  display: block;
}

/* 모바일 */
@media (max-width: 768px) {
  .gallery-thumbs img {
    width: 64px;
    height: 48px;
  }
}