@charset "utf-8";

/* 공통 컴포넌트 스타일 */

/* 타이틀 */
h3.s-tit {margin-bottom: 40px; font-size: 4rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.3; word-break: keep-all;}
h4.page-tit {margin-bottom: 2rem;}
h4.page-tit {font-size: 2.8rem; font-weight: 600; line-height: 1.6; letter-spacing: -0.04rem;}
h5.cont-tit {margin-bottom: 2rem; font-size: 2rem; font-weight: 500; line-height: 1.6; }
h5.cont-tit::before {display: inline-block; content: ''; width: 6px; height: 16px;margin-right: 10px; background: url(../images/h5_ico.svg);}

@media (max-width: 768px) {
    h3.s-tit {font-size: 3.2rem;}
    h5.page-tit {font-size: 2.4rem;}
    h5.cont-tit {font-size: 1.8rem;}
}
@media (max-width: 480px) {
    h3.s-tit {font-size: 2.8rem;}
}


/* 버튼 */
button {font-family: 'Pretendard';background: none; border: none; padding: 0;}

.btn_wrap.btn-center {text-align: center;}
.btn_wrap.btn-left {text-align: left;}
.btn_wrap.btn-right {text-align: right;}

.btn {display: inline-block; border: 0; padding: 0; margin: 0 4px; background: none; border-radius: 4px; font-size: 1.8rem; text-align: center; transition: all .3s ease;font-family: 'Pretendard';}
.btn.xlarge {height: 52px; line-height: 52px; padding: 0 40px; font-size: 1.8rem;}
.btn.large {height: 48px; line-height: 48px; padding: 0 40px; font-size: 1.8rem;}
.btn.medium {height: 42px; line-height: 42px; padding: 0 40px; font-size: 1.8rem;}
.btn.small {height: 38px; line-height: 38px; padding: 0 20px; font-size: 1.6rem;}
.btn.xsmall {height: 32px; line-height: 32px; padding: 0 20px; font-size: 1.6rem;}

@media (max-width: 480px) {
    .btn.single {width: 100%;}
    .btn.xlarge, .btn.large, .btn.medium {padding: 0 20px;font-size: 1.6rem}
    .btn.small, .btn.xsmall {padding: 0 12px;}
}

.btn:has(i) i {position: relative;}
.btn:has(i) i.left {padding-left: 24px;}
.btn:has(i) i.right {padding-right: 24px;}
.btn:has(i) i::after {content: '';display: block; width: 20px; height: 20px; position: absolute;top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-position:50%; background-size:100%}
.btn:has(i) i.left::after {left: 0;}
.btn:has(i) i.right::after {right: 0;}

.btn-gray {background-color: #eee; color: var(--color-primary); border: 1px solid var(--color-primary);}
.btn-skyblue {background-color: var(--color-skyblue); color: var(--color-primary); border: 1px solid var(--color-primary);}
.btn-skyblue:hover {background-color: var(--color-primary); color: #fff; border: none;}
.btn-navy {background-color: var(--color-primary); color: #fff;}
.btn-navy:hover {background-color: #222;}
.btn-black {background-color: #444; color: #fff;}
.btn-black:hover {background-color: #222;}

i.ico_go::after {background: url(/ocsport/images/nextPage.svg);}
i.ico_prev::after {background: url(/ocsport/images/prevPage.svg);}
i.ico_next::after {background: url(/ocsport/images/nextPage.svg);}


/* .btn-medium {height: 40px; padding: 0 80px; line-height: 40px; font-size: 1.6rem; border-radius: 4px;} */
button.search-btn {padding: 20px; font-family: 'Pretendard'; font-size: 2rem; font-weight: 400; color: #fff; border-radius: 8px; background-color: var(--color-primary); box-shadow: 0 4px 0 rgba(255, 255, 255, 0.25);}
button.search-btn i {gap: 4px;}
button.search-btn i::after {display: block; content: ''; width: 20px; height: 20px;  background: url(../images/search.svg) no-repeat; background-size: contain;}
button.close-btn {text-indent: -9999em;}

/* 
button {background: none; border: none; padding: 0; font-family: 'Pretendard';}
button.btn-style,a.btn-style {border-radius: 4px; transition: all 0.3s ease;}
a.btn-style {display: inline-block;}
button.btn-style i ,a.btn-style i {display: flex; align-items: center; justify-content: center;}
.btn_wrap {width: 100%; display: flex; gap: 12px;}
.btn_wrap.btn-center {justify-content: center;}
.btn_wrap.btn-left {justify-content: flex-start;}
.btn_wrap.btn-right {justify-content: flex-end;}
button i {display: flex; justify-content: center; align-items: center;}
button.medium, a.medium {height:44px; line-height: 44px; padding:0 40px; font-size:1.8rem; font-weight: 500;}
button.small, a.small {height:32px; line-height: 32px; padding: 0 20px; font-size:1.6rem; font-weight: 500;} 
*/

button.search-btn {padding: 20px; font-family: 'Pretendard'; font-size: 2rem; font-weight: 400; color: #fff; border-radius: 8px; box-shadow: 0 4px 0 rgba(255, 255, 255, 0.25);}
button.search-btn i {gap: 4px;}
button.search-btn i::after {display: block; content: ''; width: 20px; height: 20px;  background: url(../images/search.svg) no-repeat; background-size: contain;}
.reservation-info .reservation-btn {color: #fff; text-align: center; padding: 12px 40px; background-color: var(--color-orange); font-size: 2rem; font-weight: 600; border-radius: 4px;}


@media (max-width: 480px) {
    button.search-btn {font-size: 1.8rem;}
}

/*==== 라디오 버튼 ====*/

/* 정책 및 약관 동의 라디오 버튼 */
.agree-box input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-stroke);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    position: relative;
}

.agree-box input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    background: url(../images/radio_checked.svg) no-repeat center ;
}

/* 버튼 스타일 라디오 버튼 */
.buttonRadio {display: none;}

/* 셀렉트박스 */
select {
    -webkit-appearance: none; /*크롬 화살표 없애기*/
    -moz-appearance: none; /*파이어폭스 화살표 없애기*/
    appearance: none; /* 화살표 없애기 */
    border: none;
}
select:focus {outline: none;}

/* table */
table {width: 100%;border-collapse: collapse; }

.table-tc {text-align: center;}
.table-tl {text-align: left;}
.table-tr {text-align: right;}
.table_wrap {width: 100%; height: 100%;}
.table_wrap .txt {font-size: 1.6rem; line-height: 1.6;} 
.table thead th,
.table tbody th,
.table tbody td,
.table tfoot td {padding: 16px 20px; font-size: 1.6rem; line-height: 1.6; word-break: keep-all; vertical-align: middle;}
.table .table-tc {text-align: center;}
.table .table-tl {text-align: left;}
.table .table-tr {text-align: right;}
.table.table-border {border-collapse: separate; border-spacing: 0; /* 셀 간격 제거 */ border-top: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary);}
.table th, .table td, .table tbody th {word-break: break-all;}
.table tbody td {word-break: normal;}
.table .border-none {border-right: none;}
.table .border-line {border-left: 1px solid var(--color-stroke);}
.table td, .table th {border-bottom: 1px solid var(--color-stroke);}
.table tr th:not(:last-of-type) {border-right: 1px solid var(--color-stroke);}
.table tr td:not(:last-of-type) {border-right: 1px solid var(--color-stroke);}
.table tbody tr th {border-right: 1px solid var(--color-stroke);}

.table thead {background: var(--color-skyblue);}
.table thead th {font-weight: 500;}
.table_responsive td {padding: 20px 16px; color: var(--font-black20); font-size: 1.6rem; line-height: 1.3; border-bottom: 1px solid var(--color-stroke);}
table td .map_linked {display: inline-flex; gap: 4px; align-items: center; padding-right: 0;}
table td .map_linked i {font-size: 0; display: inline-block; width: 16px; height: 16px; background: url(../images/open_in_new.svg) no-repeat center;}
.table td {text-align: center;}
.table-border {border-top: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary);}

.border-right {border-right: 1px solid var(--color-stroke)}
.ellipsis-table td {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; /* 필요에 따라 적절한 너비 설정 */}

@media (max-width: 768px) {
    .table.scroll, .type2.scroll {display: block; width: 100%; overflow-x: auto; border-collapse: collapse; position: relative;}
    .table.scroll thead, .table.scroll tbody,
    .type2.scroll thead, table.type2.scroll tbody { display: table;width: 100%;table-layout: fixed;min-width: 768px;max-width: 100%;}
}

/* 반응형 테이블 */
.table_responsive {width: 100%; border-collapse: collapse; table-layout: fixed;}
.table_responsive.table-border {border-collapse: separate; border-spacing: 0; /* 셀 간격 제거 */ border-top: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary);}
.table_responsive th,
.table_responsive td {vertical-align: middle;}
.table_responsive thead th {padding: 20px 16px; font-weight: 500; font-size: 1.6rem; line-height: 1.3; background-color: var(--color-skyblue);}
.table_responsive tbody tr:not(:last-of-type) {border-bottom: 1px solid var(--color-stroke);}
.table_responsive td {padding: 20px 16px; color: var(--font-black20); font-size: 1.6rem; line-height: 1.3; border-bottom: 1px solid var(--color-stroke);}
.table_responsive tr th:not(:last-of-type) {border-right: 1px solid var(--color-stroke);}
.table_responsive tr td:not(:last-of-type) {border-right: 1px solid var(--color-stroke);}


@media (max-width: 768px) {
    .table_responsive {display: block;}
    .table_responsive thead {border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
    .table_responsive tbody {display: block;}
    .table_responsive tr {display: block;}
    .table_responsive tr:nth-child(even) {background-color: #f9f9f9;}
    .table_responsive td {display: flex; padding: 16px 10px 16px 24px; border-bottom: none;}
    .table_responsive td::before {content: attr(data-label); flex: 0 0 80px; font-weight: 600; text-align: left;}
    .table_responsive tr th:not(:last-of-type) {border-right:none;}
    .table_responsive tr td:not(:last-of-type) {border-right:none;}
}


/* table  th에 배경 있는 테이블 정의 */
/* 설명 : 예약정보 입력 왼쪽  th, 오른쪽 td로 구성된 테이블에 사용하세요 */
.table.type2 tbody tr th {background: #f9f9f9;}
.table.type2 tbody tr td {text-align: left;}


.table tr td input[type="text"],
.table tr td input[type="email"]{min-width: 100px; width: 100%; padding: 1rem;font-size: 1.6rem; border-radius: 4px; border: 1px solid #dcdcdc;}
.table tr td input.inp_num{width: fit-content;}
.table tr td select {position: relative; width: 40%; border: 1px solid #dcdcdc; padding: 1rem 3.5rem 1rem 1.5rem; font-family: 'Pretendard'; font-size: 1.5rem; border-radius: 0.4rem;}
.table tr td select {background: url(../images/select-arrow.svg) no-repeat 95% 50%; background-size: 10px; }

@media (max-width: 768px) {
    table.type2 thead {border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
    table.type2 th {display: block;}
    table.type2 tr {display: block;}
    table.type2 td {display: block;}
    table.type2 td::before {content: attr(data-label); /*data-label을 가상요소 표출*/ float: left; font-weight: bold; text-transform: uppercase;}
    table.type2 colgroup {display: none;}

    table.type2 th {font-size: 1.8rem; font-weight: 500; border-right: none;}
    table.type2 th, table.type2 td {text-align: start;}
}

/* table 체육시설 상세보기 테이블 정의 */
.table.type3 th, .table.type3 td, .table.type3 tbody th {border-right: none;}
.table.type3 tbody th {background-color: var(--color-gray10);}
.table.type3 tbody td {text-align: left;}

@media (max-width: 480px) {
    .type3.scroll {display: block; width: 100%; overflow-x: auto; border-collapse: collapse; position: relative;}
    .type3.scroll thead, table.type3.scroll tbody { display: table;width: 100%;table-layout: fixed;min-width: 480px;max-width: 100%;}
}

/* 게시판 */
.table.board img {max-width: 100%; height: auto;}

/*==== list ====*/
/* 설명: 앞에 '-'가 붙어있는 리스트 */
.list_style01 li {padding-left: 12px; position: relative;}
.list_style01 li::before {display: inline-block; content: '-'; color: inherit; margin-right: 4px;}

/* 페이지네이션 */
.pagging {width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px;}
.pagging a {display: flex; justify-content: center; align-items: center; font-size: 1.5rem; width: 32px; height: 32px; background: #F7F7F7; border-radius: var(--border-radius);}
.pagging strong {display: flex; justify-content: center; align-items: center; font-size: 15px; width: 36px; height: 36px; background-color: #ECF6FF;  border: 1px solid var(--color-secondary); color: var(--color-secondary);}
.pagging a:hover {background-color: #ECF6FF; border: 1px solid var(--color-secondary);}
.pagging .prev,
.pagging .first,
.pagging .next,
.pagging .last {font-size: 0; width: 32px; height: 32px;}
.pagging .prev {background: url(../images/left_arrow.svg) no-repeat center center;}
.pagging .first {background: url(../images/first_arrow.svg) no-repeat center center;}
.pagging .next {background: url(../images/right_arrow.svg) no-repeat center center;}
.pagging .last {background: url(../images/last_arrow.svg) no-repeat center center;}

.page_wrap { display: flex; margin: 20px 0; gap: 0 10px;}
.page_cnt {position: relative;}
.page_cnt select {position: relative; min-width: 90px; padding: 12px 8px 12px 12px; margin-right: 8px; border: 1px solid #D8D8D8; border-radius: var(--border-radius); -webkit-appearance:none; /* for chrome */ -moz-appearance:none; /*for firefox*/ appearance:none; box-sizing: border-box; /*select 박스의 크기 방식 지정.*/ background:#fff;}
select::-ms-expand{display:none;}
.page_cnt .select_arrow {position: absolute; top :14px; left: calc(100% - 88px); width :16px; height :16px; pointer-events: none; background: url(../images/select_icon.png) no-repeat center center;}

@media (max-width: 480px) {
    .pagging a {width: 24px; height: 24px;}
    .pagging strong { width: 24px; height: 24px;}
}

/*==== 공지사항 리스트 ====*/
.list_style02 {width: 100%; display: flex; flex-direction: column; margin-bottom: 60px; border-top: 2px solid #222;}
.list_style02 li {display: flex; gap: 20px 0; flex-direction: row; justify-content: space-between; flex-wrap: wrap; width: 100%; padding: 36px 16px; border-bottom: 1px solid var(--color-stroke);}
.list_style02 li.fixed {background-color: var(--color-gray10);}
.list_style02 .list_tit {display: flex; gap: 8px 20px; width: 70%; align-items: center;}
.list_style02 .list_tit .num {flex: 0 0 60px; text-align: center; color: var(--font-gray); font-family: 'Montserrat'; font-size: 1.7rem; font-weight: 500;}
.list_style02 .list_tit .tit {font-size: 1.7rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 필요에 따라 적절한 너비 설정 */}
.list_style02 .list_info {display: flex; gap: 16px; flex-direction: row; justify-content: flex-end; color: var(--font-gray); font-size: 1.5rem; text-align: center;}
.list_style02 .list_info .writer,
.list_style02 .list_info time,
.list_style02 .list_info .view_cnt {flex: 0 0 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.list_style02 .list_info .writer {flex: 0 0 80px;max-width: 80px; /* 필요에 따라 적절한 너비 설정 */}
.list_style02 .list_info time {flex: 0 0 100px;font-family: 'Montserrat';}
.list_style02 .list_info .view_cnt {flex: 0 0 80px;display: block;font-family: 'Montserrat';}


.ico_fixed {display: inline-block; width: 20px; height: 20px; background: url(../images/ico_fixed.svg) no-repeat center; text-indent: -9999em; overflow: hidden;}

@media (max-width: 1024px) {
	.list_style02 li {flex-direction: column; padding-left: 24px;}
	.list_style02 .list_tit {width: 100%; flex-direction: column; align-items: start;}
	.list_style02 .list_tit .num {flex: 1;}
	.list_style02 .list_tit .tit {width: 100%;}
	.list_style02 .list_info{width: 100%; justify-content: flex-start; text-align: left;}
	.list_style02 .list_info .writer,
	.list_style02 .list_info time,
	.list_style02 .list_info .view_cnt {flex: 0 1 auto;}
}

/* 게시판 글쓰기 */
.list_board {width: 100%; margin-bottom: 60px; display: flex; flex-direction: column; border-top: 2px solid #222; border-bottom: 2px solid #222; }
.list_board .board_header {display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: center; padding: 40px 12px;}
.board_header .tit {width: 100%; text-align: center; font-size: 2.8rem; font-weight: 600; line-height: 1.3; transition: .3s ease;}
.list_board .list_info {display: flex; flex-direction: row; gap: 8px; width: 100%; justify-content: center; }
.list_board .list_info div {display: flex; align-items: center; flex-direction: row; gap: 8px; font-size: 1.6rem; transition: .3s ease;}
.list_board .list_info div:not(:last-of-type)::after {display: inline-block; content: ''; width: 1px; height: 10px; margin-left: 4px; background-color: var(--color-stroke);}
.list_board .list_info dt {color: var(--font-gray);}
.list_board .board_body {min-height: 400px; font-size: 1.6rem; padding: 32px 20px; border-top: 1px solid var(--color-stroke); border-bottom: 1px solid var(--color-stroke);}
.list_board .board_attach {padding: 20px 20px; font-size: 1.6rem;} 
.list_board .board_attach .attach::before {display: inline-block; vertical-align: middle; margin-right: 4px; content: ''; width: 20px; height: 20px; background: url(../images/ico_clip.svg) no-repeat center;}

.list_board .board_body img {display: block; margin: 0 auto; max-width: 80%; height: auto;}

@media (max-width: 768px) {
    .list_board .board_header {padding: 40px 12px; background: var(--color-gray10);}
    .list_board .board_header .tit {font-size: 2.2rem; text-align: left;}
    .list_board .list_info {justify-content: left; flex-direction: column;}
    .list_board .list_info div {align-items: baseline; font-size: 1.4rem;}
    .list_board .list_info div:not(:last-of-type)::after {display: none;}
    .list_board .list_info dt {flex: 0 0 40px;}
    .list_board .board_body {padding: 28px 12px;}
    .list_board .board_attach {background: var(--color-gray10);}
    .list_board .board_body img {max-width: 100%;}
}



/* 안내사항 */
.info_wrap {display: flex; align-items: center; justify-content: space-between; padding: 40px 80px 40px 170px; position: relative;}
.info_wrap::before {position: absolute; top: 50%; left: 40px; transform: translateY(-50%); display: block; content: ''; width: 100px; height: 100px; border-radius: 100%; background-color: #fff; background-image: url(../images/book-icon.svg); background-repeat: no-repeat; background-position: center;}
.info_wrap .txt-box {display: flex; flex-direction: column; gap: 16px;}
.info_wrap .txt-box strong {display: block; font-size: 2.2rem; font-weight: 500;}
.info_wrap .txt-box ul li {color: var(--font-black20); line-height: 1.6; word-break: keep-all;}

/* 정책, 약관 */
.policy {width: 100%; height: auto; padding: 32px; background-color: var(--color-gray10); border-radius: 4px; margin-bottom: 40px;}
.policy:not(:last-of-type) {margin-bottom: 80px;}
.policy .normal-box {height: 100%; padding: 20px 32px; background-color: #fff;}
.policy .normal-box .policy-tit {line-height: 1.6; font-size: 1.8rem; font-weight: 600; margin-bottom: 20px;}
.policy .scroll-box {max-height: 220px; overflow-y: scroll; margin-bottom: 24px; padding: 20px 32px; background-color: #fff;}
.policy .scroll-box .policy-tit {line-height: 1.6; font-size: 1.8rem; font-weight: 600; margin-bottom: 20px;}
.policy .policy-txt {display: flex; justify-content: space-between;}


@media (max-width: 1200px) {
    .info_wrap {flex-direction: column; align-items: flex-start; gap: 20px;}
    .info_wrap .reservation-btn {width: fit-content; padding: 10px 32px; font-size: 1.6rem;}
}

@media (max-width: 1024px) {
    .info_wrap::before {display: none;}
    .info_wrap {padding:40px;}
}

@media (max-width: 768px) {
    .info_wrap {padding: 40px;}
    .info_wrap .list_style01 li {padding-left: 0;}
    .info_wrap .reservation-btn {width: 100%;}
}

/* 검색창 */
.searchBar {width: 100%; padding: 20px 28px; margin-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: space-between;align-items: center; background: var(--color-gray10); border-radius: 12px;}
.searchBar .f_orange {font-weight: 600; color: var(--color-orange);}
.searchBar .page-status {color: var(--font-black20);}
.searchBar .page-status span {font-size: 1.7rem;}
.searchBar strong.total {margin-right: 12px;font-size: 1.7rem;}
.searchBar .select-srh, .searchBar .input-srh {display: flex; align-items: center; gap: 8px;}
.searchBar .select-srh select {height: 44px; padding: 12px 60px 12px 20px; font-size: 1.5rem; font-family: 'Pretendard'; background: #fff; border-radius: 4px; border: 1px solid var(--color-gray10);}
.searchBar .select-srh select {border:1px solid var(--color-stroke); background-image:url('../images/select-arrow2.svg'); background-size: 10px auto;; background-repeat: no-repeat; background-position: 95% 50%;}
.searchBar .input-srh input {height: 44px; padding: 12px 60px 12px 20px; font-size: 1.5rem; font-family: 'Pretendard'; background: #fff; border-radius: 4px; border: 1px solid var(--color-stroke);}
.searchBar .select-srh .search-btn,
.searchBar .input-srh .search-btn {height: 44px; padding: 12px 32px; background: #222; color: #fff; font-size: 1.7rem;  border-radius: 4px;}


@media (max-width: 768px) {
    .searchBar {flex-direction: column; align-items: flex-start; gap: 20px; padding: 30px 24px;}
    .searchBar .select-srh, .searchBar .input-srh {flex-direction: column; gap: 12px; width: 100%;}
    .searchBar .select-srh select, .searchBar .input-srh label, .searchBar .input-srh input {width: 100%;}
    .searchBar .select-srh .search-btn, .searchBar .input-srh .search-btn {width: 100%;}
}

/* ul li 스타일 */
.conList_type01 li {font-size: 1.6rem; line-height: 1.6;}
.conList_type01>li::before {content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 4px; vertical-align: middle; background: var(--color-primary);}
.conList_type01 li ul {padding-left: 4px;}
.conList_type01 li ul li::before {content: ''; display: inline-block; width: 4px; height: 1px;margin-right: 6px; vertical-align: middle;  background-color: #222;}


.conList_type02 {font-size: 1.6rem; line-height: 1.6;}
.conList_type02 li ul {padding-left: 4px;}
.conList_type02 li ul li::before {content: ''; display: inline-block; width: 4px; height: 1px;margin-right: 6px; vertical-align: middle;  background-color: #222;}


/* 팝업창 */
.popup {width: fit-content; height: auto; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden;}
.popup .popup_img {width: 100%; height: 100%; display: block;}
.popup .popup_img img {display: block; width: 100%; object-fit: cover;}
.popup .popup_bottom {display: flex;justify-content: space-between;}
.popup_bottom button {width: 50%; height: 52px; color: #fff; font-size: 1.6rem; text-align: center;}
.popup_bottom button.nomore {background-color: #555;}
.popup_bottom button.close {background-color: #222;}

/* 제목 그룹 */
.tit_group{}

/* 브레드크럼 */
.path_page{}




/* 탭 */
.tab{}

/* 테이블 관련 */
.tbl{}

/* 리스트 관련 */
.lst_dot{}
.lst_thumb{}

/* 페이지네이션 */
.paginate{}

/* 페이지 내 검색(게시글 검색, 디테일 검색 등) */
.srch_detail{}
.srch_board{}

/* 팝업, 레이어 등  */
.pop_modal{}
.pop_layer{}

/* 캘린더 */
.calendar{}

/* 도움말 */
.help_box{}

/* 코치마크 */
.bubble{}