@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

* { margin: 0; padding: 0; box-sizing: border-box; }
li{list-style:none;}
a {text-decoration: none; color: #000;}
body {font-family: 'SCoreDream','Pretendard','SpokaHanSansNeo','Noto Sans KR','GMarketSans','HancomMalangMalang-Regular', sans-serif; word-break: keep-all; min-width: 300px;letter-spacing: -1.5px;}
::selection {background-color: var(--color); color: #ffffff;}
::-moz-selection {background-color: var(--color); color: #ffffff;}

/* 웹접근성: 스킵 네비게이션 - 키보드 포커스 시에만 표시 */
.skip-link {
    position: absolute;
    top: -9999px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    border: none;
    outline: none;
}

.skip-link:focus-visible {
    top: 0;
    opacity: 1;
    pointer-events: auto;
    outline: 5px solid #0066cc;
    outline-offset: 3px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #0066cc, 0 0 10px rgba(0, 102, 204, 0.8);
}

/* 웹접근성: 스크린 리더 전용 텍스트 (시각적으로 숨김) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 웹접근성: 키보드 포커스 스타일 개선 - 키보드 탭 포커스만 표시 */
/* :focus는 제거하고 :focus-visible만 사용하여 마우스 클릭 시에는 포커스 스타일이 나타나지 않도록 함 */

/* 기본 포커스 스타일 제거 (마우스 클릭 시) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
iframe:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* 키보드 포커스만 표시 (:focus-visible) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
iframe:focus-visible {
    outline: 4px solid #0066cc !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.4), 0 0 8px rgba(0, 102, 204, 0.6) !important;
}

/* 웹접근성: 포커스 가능한 모든 요소의 키보드 포커스 표시 */
*:focus-visible {
    outline: 4px solid #0066cc !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.4), 0 0 8px rgba(0, 102, 204, 0.6) !important;
}

/* 링크와 버튼에 추가 시각적 효과 (키보드 포커스만) */
a:focus-visible,
button:focus-visible {
    position: relative;
    outline-width: 5px !important;
}

/* 입력 필드 포커스 시 더 명확한 표시 (키보드 포커스만) */
input:focus-visible, 
select:focus-visible, 
textarea:focus-visible {
    border: 3px solid #0066cc !important; 
    outline-width: 5px !important;
}

/* 검색 입력 필드의 그림자 제거 */
.search input,
.search input:focus,
.search input:focus-visible {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* iOS Safari 셀렉트와 페이징 버튼 텍스트 색상 검은색으로 변경 */
select,
select option,
.page-btn:not(.active),
button.page-btn:not(.active) {
    color: #000000 !important;
    -webkit-tap-highlight-color: transparent !important;
}

select:focus,
select:active,
.page-btn:not(.active):focus,
.page-btn:not(.active):active,
button.page-btn:not(.active):focus,
button.page-btn:not(.active):active {
    color: #000000 !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* 활성화된 페이징 버튼은 흰색 텍스트 유지 */
.page-btn.active,
button.page-btn.active {
    color: #ffffff !important;
    -webkit-tap-highlight-color: transparent !important;
}

.page-btn.active:focus,
.page-btn.active:active,
button.page-btn.active:focus,
button.page-btn.active:active {
    color: #ffffff !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* iOS Safari 전용 스타일 */
@supports (-webkit-touch-callout: none) {
    select,
    select option,
    .page-btn:not(.active),
    button.page-btn:not(.active) {
        color: #000000 !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-appearance: none !important;
    }
    
    select:focus,
    select:active,
    .page-btn:not(.active):focus,
    .page-btn:not(.active):active,
    button.page-btn:not(.active):focus,
    button.page-btn:not(.active):active {
        color: #000000 !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* 활성화된 페이징 버튼은 흰색 텍스트 유지 */
    .page-btn.active,
    button.page-btn.active {
        color: #ffffff !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .page-btn.active:focus,
    .page-btn.active:active,
    button.page-btn.active:focus,
    button.page-btn.active:active {
        color: #ffffff !important;
        -webkit-tap-highlight-color: transparent !important;
    }
}

@font-face {
   font-family: 'Pretendard';
   src: url('/resources/hubiz/common/font/pretendard/Pretendard-Light.subset.woff2') format('woff2'), url('/resources/hubiz/common/font/pretendard/Pretendard-Light.subset.woff') format('woff');
   font-weight: 300;
   font-display: swap;
}

@font-face {
   font-family: 'Pretendard';
   src: url('/resources/hubiz/common/font/pretendard/Pretendard-Regular.subset.woff2') format('woff2'), url('/resources/hubiz/common/font/pretendard/Pretendard-Regular.subset.woff') format('woff');
   font-weight: 400;
   font-display: swap;
}

@font-face {
   font-family: 'Pretendard';
   src: url('/resources/hubiz/common/font/pretendard/Pretendard-Medium.subset.woff2') format('woff2'), url('/resources/hubiz/common/font/pretendard/Pretendard-Medium.subset.woff') format('woff');
   font-weight: 500;
   font-display: swap;
}

@font-face {
   font-family: 'Pretendard';
   src: url('/resources/hubiz/common/font/pretendard/Pretendard-SemiBold.subset.woff2') format('woff2'), url('/resources/hubiz/common/font/pretendard/Pretendard-SemiBold.subset.woff') format('woff');
   font-weight: 600;
   font-display: swap;
}

@font-face {
   font-family: 'Pretendard';
   src: url('/resources/hubiz/common/font/pretendard/Pretendard-Bold.subset.woff2') format('woff2'), url('/resources/hubiz/common/font/pretendard/Pretendard-Bold.subset.woff') format('woff');
   font-weight: 700;
   font-display: swap;
}
@font-face {
   font-family: 'SpokaHanSansNeo';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Thin.woff') format('woff');
   font-weight: 100;
   font-display: swap;
}

@font-face {
   font-family: 'SpokaHanSansNeo';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Light.woff') format('woff');
   font-weight: 300;
   font-display: swap;
}

@font-face {
   font-family: 'SpokaHanSansNeo';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
   font-weight: normal;
   font-display: swap;
}

@font-face {
   font-family: 'SpokaHanSansNeo';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Medium.woff') format('woff');
   font-weight: 500;
   font-display: swap;
}

@font-face {
   font-family: 'SpokaHanSansNeo';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Bold.woff') format('woff');
   font-weight: 700;
   font-display: swap;
}

@font-face {
   font-family: 'SCoreDream';
   src: url('/resources/hubiz/common/font/SCoreDream.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }

@font-face {
   font-family: 'GMarketSans';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
   font-weight: 300;
   font-display: swap;
}

@font-face {
   font-family: 'GMarketSans';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
   font-weight: 500;
   font-display: swap;
}

@font-face {
   font-family: 'GMarketSans';
   src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
   font-weight: 700;
   font-display: swap;
}

@font-face {
	font-family: 'HancomMalangMalang-Regular';
	src: url('/resources/hubiz/common/font/HancomMalangMalang-Regular.otf') format('woff2');
	font-weight: 400;
	font-style: normal;
 }

 @font-face {
	font-family: 'HancomMalangMalang-Bold';
	src: url('/resources/hubiz/common/font/HancomMalangMalang-Bold.otf') format('woff2');
	font-weight: bold;
	font-style: normal;
 }


/* 입력폼 CSS */
form, fieldset {padding: 0; margin: 0; border: 0;}

input,textarea,select,button {
   border: 1px solid #e5e5e5;
   padding: 0px 5px 0px 5px;
   font-family: inherit;
   font-size: 16px;
}

input,select,td,th {
   vertical-align: middle;
}
label {margin-right: 5px; color: #000;}

input[type=submit] {
   padding: 0px 20px;
   cursor: pointer;
   background-color: #2b6db0;
   vertical-align: middle;
   font-weight: normal;
   border-radius: 30px;
   border: 1px solid #2b6db0;
   color: #ffffff;
   height: 35px;	
} 

input[type=button] {
   padding: 0px 20px;
   cursor: pointer;
   background-color: #ffffff;
   vertical-align: middle;
   font-weight: normal;
   border-radius: 30px;
   border: 1px solid #2b6db0;
   color: #2b6db0;
   height: 35px;	
} 
input[type=button]:hover  { opacity:0.8; background-color: #2b6db0; color: #ffffff;}


input[type=reset] {
   padding: 0px 20px;
   cursor: pointer;
   background-color: #ffffff;
   vertical-align: middle;
   font-weight: normal;
   border-radius: 30px;
   border: 1px solid #2b6db0;
   height: 35px;	
}

input[readonly='readonly']:hover, input[readonly='readonly']:focus {
 border: 1px solid #d9d9d9;
 background: #f9f9f9;
}

input[type=radio], input[type=checkbox] { height: 18px; }

input[type=text], select, textarea, input[type=tel], input[type=email], input[type=password] {
   border: 1px solid #d9d9d9;
   -moz-border-radius: 0px;
   -webkit-border-radius: 2px;
   border-radius: 0px;
   padding: 10px 10px;
   min-width: 100px;
}

input[type=tel] {text-align: center;}

input[type="date"], input[type="time"] {border: 1px solid #d9d9d9; background: #f7f7f7; height: 40px !important; z-index: 0; position: relative;}


/* 날짜 입력 필드 스타일 개선 */
input[type="date"] {
   position: relative;
   cursor: pointer;
   padding-right: 40px;
 }
 
 /* 날짜 입력 필드에 달력 아이콘 추가 */
input[type="date"]::-webkit-calendar-picker-indicator {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   cursor: pointer;
 }
 
 /* 날짜 입력 필드에 커스텀 달력 아이콘 추가 */
input[type="date"]::after {
   content: "\f073";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   position: absolute;
   top: 50%;
   right: 15px;
   transform: translateY(-50%);
   pointer-events: none;
   color: #131313;
   font-size: 16px;
   z-index: 1;
 }

input[type="time"]:after {
   content: "\f017";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   cursor: pointer;
   position: relative; top: -24px; left: 95px; z-index: -1;
}


input[type="time"] {
   position: relative;
   cursor: pointer;
   padding-right: 40px;
 }
 
 
 /* 시간 입력 필드에 시간 선택기 추가 */
input[type="time"]::-webkit-calendar-picker-indicator {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   cursor: pointer;
 }
 
 /* 시간 입력 필드에 커스텀 시계 아이콘 추가 */
 input[type="time"]::after {
   content: "\f017";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   position: absolute;
   top: 50%;
   right: 15px;
   transform: translateY(-50%);
   pointer-events: none;
   color: #666;
   font-size: 16px;
   z-index: 1;
 }

.toastui-editor-popup-body input[type=button] {padding: 0;}
.tui-colorpicker-palette-hex{height: 32px;}
.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-palette-preview{margin-top: 1px; margin-left: -27px;}

select {
  background: #f9f9f9;
  cursor: pointer;
  height: 40px;
  padding: 0px 15px;
  background: #ffffff url(/resources/hubiz/common/image/select_arrow_1.jpg) no-repeat 100% 50% !important;
  -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; /* IE 10, 11의 네이티브 화살표 숨기기 */
}
option{cursor: pointer;}
input:selected {
   background-color: #f9efda;
   border: 1px solid #e5e5e5;
}
select::-ms-expand { display: none;}

textarea { width: 100%; line-height: 180%;background: #ffffff;border: 1px solid #e4e4e4;}

textarea [readonly='readonly'] {
   background: #f9f9f9;
   border: 1px solid #e5e5e5;
   cursor: text;
}

.textarea_box {
   background: #f9f9f9;
   padding: 20px;
   margin-bottom: 20px;
   border: 1px solid #ccc;
   text-align: center;
   border-top: 3px solid #363636;
   clear: both;
   min-width: 1000px;
}
/*form CSS 추가 */
:focus, a:focus {outline: none !important;}
/* button:focus {border: none !important;outline: none;} */

input[required='required'], textarea[required='required'] {border: 1px solid #bbb !important;  background-color: #ededed;}
input[readonly='readonly'], input[readonly], textarea[readonly='readonly'], textarea[readonly] {
 background: #ededed !important;
 border: 1px solid #d1d5db !important;
 color: #535353;
 cursor: auto !important;
}
input[disabled='disabled'], input[disabled], textarea[disabled='disabled'], textarea[disabled] {
 background: #ededed !important;
 border: 1px solid #d1d5db !important;
 cursor: auto !important;
}
select[disabled], select[disabled='disabled'], select[required='required'], select[readonly='readonly'], select[readonly] {
   background: #ededed url(/resources/hubiz/common/image/select_arrow_1.jpg) no-repeat 100% 50% !important;
   border: 1px solid #d1d5db !important;
   color: #535353 !important;
   opacity: 1;
   cursor: auto !important;
}
button[disabled='disabled'], button[disabled] {
 background-color: #ededed !important;
 border: 1px solid #d1d5db !important;
 cursor: auto !important;
}
input[type=number] {text-align: right;}

input[type=reset] {
   padding: 0px 20px;
   cursor: pointer;
   background-color: #ffffff;
   vertical-align: middle;
   font-weight: normal;
   border-radius: 30px;
   border: 1px solid #2b6db0;
   height: 24px;	
}

input[readonly='readonly']:hover, input[readonly='readonly']:focus, textarea[readonly='readonly']:hover, textarea[readonly='readonly']:focus, 
select[readonly='readonly']:hover, select[readonly='readonly']:focus, select[disabled='disabled']:hover, select[disabled='disabled']:focus,
textarea[disabled='disabled']:hover, textarea[disabled='disabled']:focus {
 border: 1px solid #e5e5e5;
 background: #f9f9f9;
}
/* 마우스 클릭 시 포커스 스타일 제거 */
input:focus:not(:focus-visible), 
input[type=text]:focus:not(:focus-visible), 
select:focus:not(:focus-visible), 
textarea:focus:not(:focus-visible) {
    border: 1px solid #d9d9d9 !important; 
    background: #ffffff !important;  
    outline: none !important;
}

/* 키보드 포커스만 스타일 적용 */
input:focus-visible, 
input[type=text]:focus-visible, 
select:focus-visible, 
textarea:focus-visible {
    border: 1px solid var(--color) !important; 
    background: #ffffff !important;  
    outline: none !important;
}
textarea {border:  1px solid var(--color);resize:none;/*background: #f8fbff;*/ /* 크기고정 */ }

input::-webkit-calendar-picker-indicator { opacity: 0;}  

input[list], input[list]:hover { background: #ffffff url(/resources/hubiz/common/image/select_arrow_1.png) no-repeat 100% 50% !important;}



/*edit*/
table.table_style1 td.edit_sum{font-size: 20px;  text-align: center;}
textarea.agreePolicy{width: 100%; height: 200px; padding: 20px;}
.agreePolicy_agree{padding: 20px 0 30px 0; font-size: 15px;}
table.support input,
table.support select{    margin: 5px 0; padding: 10px; vertical-align: middle;}
table.support label{margin: 0 10px 0 5px; vertical-align: middle;}
table.table_style1 .btn_radius{vertical-align: middle; font-size: 12px; padding: 5px 15px;}



/* 서브 탭부분 */
.tab{height: 53px; display: block;margin-bottom: 40px;}
.tab li a{display:block; border: 1px solid #ccc; border-right: none; padding: 15px; text-align: center;}
.tab li:last-child a{border-right: 1px solid #ccc;}
.tab li{float: left; display: inline-block;width:33.1%;}
.tab .current{background: #f6f6f6;}
.tabcontent {display: none;}
.tabcontent.current {display: block;}

/*테이블*/
.table_style1 tbody.tb_none_line td{ border: 0; padding: 10px;  text-align: center;}
.table_style1 tbody.tb_none_line{ border-bottom: 1px solid #ccc;}
.table_style1 tbody.tb_none_line tr th{padding: 18px 0; font-size: 13px; font-weight: 500; background: #fff; border: 0;  margin: 0 5px; border-right: 1px solid #ccc;}
table.table_style1{width:100%;border-collapse:collapse;}
/* makeda-container 내부의 table_style1은 반응형으로 크기 조절 */
.makeda-container table.table_style1,
.makeda-container .table_scroll table.table_style1,
.makeda-container .margin_bottom.table_scroll table.table_style1 {
    min-width: 0 !important;
    max-width: 100% !important;
}
table.table_center{text-align: center;}
table.table_style1 th{background: #f7f7f7; border: 1px solid #ccc; border-top: 2px solid #323232; padding: 20px;text-align: center;white-space: nowrap;}
table.table_style1 th:first-child{border-left: none;}
table.table_style1 th:last-child{border-right: none;}
table.table_style1 td {font-size: 16px; border: 1px solid #ccc; padding: 20px; text-align: center;  white-space: normal !important;}
table.table_style1 td:first-child{border-left: none;}
table.table_style1 td:last-child{border-right: none;}
table.table_style1 td.left {text-align: left;}
table.table_style1 th.row_th{ border-top: 1px solid #ccc;}
table.table_style1 .top_border{ border-top: 2px solid #323232;}

table.cart_table{width:100%;border-collapse:collapse; }
table.cart_table{text-align: center;}
table.cart_table th{background: #f7f7f7; border: 1px solid #ccc; border-top: 2px solid #323232; padding: 20px;    white-space: nowrap;}
table.cart_table th:first-child{border-left: none;}
table.cart_table th:last-child{border-right: none;}
table.cart_table td {font-size: 14px; border: 1px solid #ccc; padding: 20px; text-align: center;     white-space: nowrap;}
table.cart_table td:first-child{border-left: none;}
table.cart_table td:last-child{border-right: none;}
table.cart_table td.left {text-align: left;}
table.cart_table th.row_th{ border-top: 1px solid #ccc;}
table.cart_table .top_border{ border-top: 2px solid #323232;}

/* table style */
.board_list {width:100%;  border-spacing: 0; border-top: 0px solid #323232; }
.board_list caption { display:none; }
.board_list thead th, .board_list tbody th { border-bottom: 1px solid #d9d9d9;
   background: #f7f7f7;
   border: 1px solid #ccc;
   border-top: 2px solid #323232;
   padding: 20px;
   }
.board_list thead th:first-child, .board_list tbody th:first-child { border-left: none;}
.board_list thead th:last-child, .board_list tbody th:last-child { border-right: none; } 
.board_list tbody tr.odd {  }
.board_list tbody.ov tr:hover { background:#f9f9f9; }
.board_list tbody th {  text-align: center; padding-left:14px; }
.board_list tbody th.vtop { vertical-align:top; }
.board_list tbody th span.pilsu { color:#d0270b; font-weight:500; margin-left:3px; }
.board_list tbody td { text-align:center; padding:14px 5px; border-bottom:1px solid #d9d9d9; 
						   word-break:break-all; white-space:-moz-pre-wrap; overflow:hidden; text-overflow:ellipsis;}
.board_list tbody td:nth-child(2) {text-align:left; }
.board_list tbody td.left { text-align:left; padding:6px 8px; }
.board_list tbody td.leftElli { text-align:left; padding:6px 8px; overflow:hidden;text-overflow:ellipsis;
-o-text-overflow:ellipsis;
white-space:nowrap;
width:100%;
}
.board_list tbody td.cnt { text-align:left; padding:12px 10px 20px; line-height:160%; }
.board_list tbody td.nopd { text-align:left;}
.board_list tbody td.bold { text-align:left; font-size:14px; font-weight :bold;}
.board_list tbody td a:hover { text-decoration:underline; }
.board_list tbody td input.bbs_Nm { width:99%; }
.board_list tbody td input.link {color:#666; }
.board_list tbody td input.tmp { width:160px; }
.board_list tbody td textarea { width:90%; height:50px; min-height: 150px;}
.board_list tbody td textarea.txt { width:96%; height:300px; margin:8px; padding:5px; }
.board_list tbody td textarea.re_txt { width:100%; float:left; margin-right:8px; height:50px;  }
.board_list tbody td a.re_btn { float:right;     margin: 10px 0 0 0;
   padding: 7px 20px;
   cursor: pointer;
   background-color: #2b6db0;
   vertical-align: middle;
   font-weight: normal;
   border-radius: 30px;
   border: 1px solid #2b6db0;
   color: #ffffff;
   height: 35px;
   }
.board_list tbody td a.re_btn:hover { text-decoration:none; }
.board_list tbody td select { padding:2px 0 3px 2px; border:1px solid #dedede; }
.board_list tbody td img { margin-left:7px; }


/*페이지 네비*/
.page_nav{display: block; text-align: center; margin-top: 20px;} 
.page_nav li a.on{background:#226cd2; border:#226cd2; color: #fff;}
.page_nav li a.on:hover{background:#226cd2; border:#226cd2; color: #fff;}
.page_nav li{margin: 0 1px; display: inline-block; vertical-align: top;}
.page_nav ul a {border: 1px solid #ccc; font-size: 18px; display: inline-block; width:40px; height: 40px; line-height: 37px;letter-spacing: -8px;    padding-right: 7px;}
.page_nav ul a:hover{border: 1px solid #226cd2; color:#226cd2;}
.page_nav li a{border: 1px solid #ccc; font-size: 18px; display: block; width:40px; height: 40px; line-height: 37px;}
.page_nav li a b {border:#226cd2; font-weight: bold;}
.page_nav li a img{margin-top: 12px;}
.page_nav li a:hover{border: 1px solid #226cd2; color:#226cd2;}
.sub_menu_li_festival li{width: 19.5%;}


/*캡션 숨기기*/
caption { overflow: hidden; font-size: 0; line-height: 0; }

/* 카카오지도 주소,전화번호 숨김 */
.root_daum_roughmap .cont .section.lst {display: none;}
.root_daum_roughmap .wrap_btn_zoom { z-index: 1 !important;}
/*---------------------------common---------------------------*/

/*달력*/
#ui-datepicker-div{padding:20px; background: #fff; border: 1px solid #ccc; display: none;}
#ui-datepicker-div .ui-datepicker-calendar td{border-bottom: 1px solid #eee;text-align: center;}
#ui-datepicker-div .ui-datepicker-calendar td a{border: 1px solid #fff;  width: 30px; height: 30px; display: block; border-radius: 100%;}
#ui-datepicker-div .ui-datepicker-calendar td a:hover{border: 1px solid #ccc;}
#ui-datepicker-div .ui-datepicker-calendar tr td:first-child a,
#ui-datepicker-div .ui-datepicker-calendar tr th:first-child{color: #dc0000;}
#ui-datepicker-div .ui-datepicker-calendar tr td:last-child a,
#ui-datepicker-div .ui-datepicker-calendar tr th:last-child{color: #1a76ff;}
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active{background: #f44336; color: #fff !important;border: 1px solid #f44336;}

#ui-datepicker-div .ui-datepicker-title{text-align: center; font-size: 20px; margin-bottom: 30px;}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next{cursor: pointer;}
#ui-datepicker-div .ui-datepicker-prev{ background:url("/resources/hubiz/common/image/prev.png") no-repeat left center; float: left; padding-left: 0px;    background-position: -1000px;}
#ui-datepicker-div .ui-datepicker-next{ background:url("/resources/hubiz/common/image/next.png") no-repeat right center; float: right; padding-right: 0px; background-position: -1000px;}

/*tab*/
.tab_type {background: #f6f6f6; box-shadow: inset 0px -3px 4px 0px rgba(0, 0, 0, 0.1); }
.tab_type > .inner{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;}
.tab_type li{  padding:0 1%; position:relative; box-sizing: border-box; margin-left: -1px;cursor: pointer;transition: 0.2s;}
.tab_type li.on {border-top: 2px solid #0080cc;border-left: 1px solid #d6d6d6; border-right: 1px solid #d6d6d6; border-bottom: none; background:#ffffff;}
.tab_type li:hover a {font-weight: 500;}
.tab_type a{font-size: 23px;min-width: 170px;padding: 12px 18px;line-height: 1;display: flex;align-items: center;justify-content: center;text-align: center;line-height: 1.6; color:#828282;}
.tab_type .on a{color: #222; font-weight:500;}
.tab_area h2 {font-size: 2.0em !important;  margin: 80px 0px;text-align: center;}
.tab_area h2::after { content: "⋯⋯";  font-size: 20px;  display: block; margin-top: 20px;  color: rgb(158 158 158);}

@media screen and (max-width: 1600px){
	.tab_type li{  padding:0 1%;}
	.tab_type a {font-size: 18px;  padding: 12px 10px;}
	}
	
@media screen and (max-width: 1200px){
	.tab_type li{  padding:0 0.5%;}
	.tab_type a {font-size: 16px; min-width: auto; padding: 12px 5px;}
	}
	
@media screen and (max-width: 850px){
	.tab_type {padding: 20px;}
	.tab_area h2 {font-size: 1.8em !important;  margin: 20px 0px;}
    .tab_type > .inner{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;}
    .tab_type li{width: 100%;padding: 0;position:relative;box-sizing: border-box; border-radius: 500px;background: #fff;margin-bottom: 4px;}    
    .tab_type li:hover a {border: 1px solid var(--color);}
    .tab_type a{font-size: 17px;min-width: 100%;padding: 12px 18px;line-height: 1;display: flex;align-items: center;justify-content: center;border: 1px solid #9e9e9e;border-radius: 500px;text-align: center;line-height: 1.4;}
    .tab_type li.on {border-color: var(--color); border: 0px solid var(--color);}
    .tab_type .on a{color: var(--color);border: 1px solid var(--color);}
}

.tab_type1 > .inner{display: flex;align-items: center;justify-content: center; margin-bottom: 20px;}
.tab_type1 li{  padding: 0 20px; position:relative; box-sizing: border-box; }
.tab_type1 li:after{ position:absolute; left:0; top:calc(50% - 10px); width:1px; height:20px; background:#ddd; content:""; }
.tab_type1 li:first-child:after{display:none;}
.tab_type1 a{font-size: 20px;min-width: 170px;padding: 12px 18px;line-height: 1;display: flex;align-items: center;justify-content: center;border: 1px solid transparent;border-radius: 500px;text-align: center;line-height: 1.4; color:#828282;}
.tab_type1 .on a{color: #222; font-weight:600;}

@media (hover: hover) {
.tab_type1 a:hover{color: var(--color);}    
}

@media screen and (max-width:1024px){
	.tab_type1 a {font-size: 20px; min-width: auto;}
	.tab_type1 li {font-size: 21px; padding: 0 0px;}
}

@media screen and (max-width: 650px){
    .tab_type1 li{width: 50%;padding: 0;position:relative;box-sizing: border-box;}
    .tab_type1 li:after{position:absolute;left:0;top:calc(50% - 10px);width:2px;height:20px;background:#ddd;content:"";display: none;}
    .tab_type1 li:first-child{ padding-left:0;; }
    .tab_type1 li:first-child:after{display:none;}
    .tab_type1 a{font-size: 14px;min-width: 100%;padding: 12px 10px;line-height: 1;display: flex;align-items: center;justify-content: center;border: 1px solid transparent;border-radius: 0px;text-align: center;line-height: 1.4;}
    .tab_type1 .on a{border-color: var(--color);color: var(--color);font-weight: 600;}
}

.tab_type2 {margin: 50px 0px;}
.tab_type2 > .inner{display: flex;align-items: center;justify-content: center;}
.tab_type2 li{position:relative; box-sizing: border-box; width: 100%;}
.tab_type2 a{font-size:20px; min-width: 170px;padding:10px 15px;line-height: 1;display: flex;align-items: center;justify-content: center;border:1px solid #afafaf00;border-radius:0px;text-align: center;line-height: 1.4; color:#828282;background: #fbfbfb;}
.tab_type2 .on a{color:#2ba3a3; font-weight:600; border:1px solid #2ba3a3; background: #ffffff;}
.tab_area2 h2 {font-size: 2.0em !important;  margin: 40px 0px;text-align: center;}
.tab_area2 h2::after { content: "⋯⋯";  font-size: 20px;  display: block; margin-top: 20px;  color: rgb(158 158 158);}

@media (hover: hover) {
	.tab_type2 a:hover{color: #2ba3a3;}    
}

@media screen and (max-width: 900px){
    .tab_type2 > .inner{display: flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;}
	.tab_type2 li{width: 33%;}
}
@media screen and (max-width: 650px){
	.tab_type2 {margin: 20px 0px;}
    .tab_type2 li{width: 33%;padding: 0;position:relative;box-sizing: border-box;}
    .tab_type2 a {font-size: 14px; min-width: auto;padding: 10px 5px;}
    .tab_area2 h2 {font-size: 1.8em !important;  margin: 20px 0px;}
}


/* 모달 스타일 */
.modal-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 1000;
}

.modal-container {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   width: 90%;
   max-width: 1000px;
   max-height: 90vh;
   overflow-y: auto;
   z-index: 1001;
}

.modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px 20px;
   border-bottom: 1px solid #eee;
}

.modal-title {
   font-weight: 600;
   margin: 0;
}

.modal-close {
   background: none;
   border: none;
   cursor: pointer;
   color: #999;
 padding: 0px;
  font-family: inherit;
}

.modal-close i {font-size: 24px;}

.modal-body {
   padding: 20px;
}

.modal-footer {
   padding: 15px 20px;
   border-top: 1px solid #eee;
   text-align: right;
}

.toastui-editor-contents table { min-width: auto;}


@media screen and (max-width: 1024px){
   .ui-widget.ui-widget-content {width: 100% !important;}
}


/* 공통 CSS */
.h1 {font-size: 30px; font-weight: bold; margin-bottom: 30px;}
.h2 {font-size: 26px; font-weight: bold; margin-bottom: 30px;}
.h3 {font-size: 20px; font-weight: bold; margin-bottom: 30px;}
.h4 {font-size: 18px; font-weight: 700;  margin-bottom: 30px;}
.h5 {font-size: 14px; font-weight: 700;  margin-bottom: 30px;}

@media screen and (max-width: 650px){
   .h1 {font-size: 20px; font-weight: bold; margin-bottom: 30px;}
   .h2 {font-size: 18px; font-weight: bold; margin-bottom: 30px;}
   .h3 {font-size: 16px; font-weight: bold; margin-bottom: 30px;}
   .h4 {font-size: 14px; font-weight: 700;  margin-bottom: 30px;}
   .h5 {font-size: 12px; font-weight: 700;  margin-bottom: 30px;}
}

.margin-t50 {margin: 50px 0px;}
.margin-w50 {margin: 0px 50px;}
.margin-top100 {margin-top: 100px;}
.margin-bottom100 {margin-bottom: 100px;}

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

.color-red {color: var(--primary-color);}
.color-blue {color: var(--color);}
.color-green {color: #3bb77e;}
.color-yellow {color: #ffcc00;}
.color-gray {color: #888888;}
.color-black {color: #000000;}
.color-white {color: #ffffff;}