@charset "utf-8"; 
@import url("../../common/css/alert.css");

:root { 
    --dataTable-padding-th: 0.8rem 1.2rem;
    --dataTable-padding-td: 0.8rem 1.2rem;
    
    --detailInfo-padding-dt: 0.8rem 1.2rem;
    --detailInfo-padding-dd: 0.8rem 1.2rem;
    --detailInfo-padding-input : 8px;
    
    --detailInfo-color-border: var(--border);
 }
 
input::placeholder { color:#333 !important }
/* .btn:focus, input[type="checkbox"].deco-chk + label.deco-chk:focus { outline:2px dotted red; outline-offset:1px } */
/* .btn.orange:focus, .btn.standardButton:focus, .btn.delete:focus { outline:2px solid #000 } */
/* .tab ul li.current a:focus { outline:2px dotted red; outline-offset:1px } */

/* font style */
.highlight { display: inline; box-shadow: inset 0 -10px 0 #ffc4ff8f }
.strong, .strong_st02 { color: var(--point-color-red); font-weight: 700; padding-left: 20px; position: relative }
.strong:before { content: ""; width: 18px; height: 18px; display: block; position: absolute; top: 5px; left: 0; background: url(/resources/jbsc/images/common/ico_desc.png) no-repeat center }

.strong_st02 { color: #000 }
.strong_st02:before { content:""; width:18px; height:18px; display:block; position:absolute; top:5px; left:0; background:url(/resources/jbsc/images/common/ico_desc_black.png) no-repeat center }


/* button box */
.buttonBox { padding: 1.2rem 0; box-sizing: border-box; text-align: right }
.buttonBox a, .buttonBox button { display: inline-block; font-weight: 500 }

/* outlined buttons */
a.outlinedButton, button.outlinedButton { border: 0.1rem solid var(--border); font-weight: 500 }
a.outlinedButton:hover, a.outlinedButton:active, button.outlinedButton:hover, button.outlinedButton:active { background-color: var(--button-color-active) }
/* a.outlinedButton:disabled, button.outlinedButton:disabled {  } */

/* outlined icon buttons */
a.outlinedIconButton, button.outlinedIconButton { display: inline-flex; align-items: center; padding-left: 1rem; border: 0.1rem solid var(--border); font-weight: 500 }
a.outlinedIconButton:before, button.outlinedIconButton:before { margin-right: .5rem; content: "\f058" }
/* a.outlinedIconButton:hover, a.outlinedIconButton:active, button.outlinedIconButton:hover, button.outlinedIconButton:active {  } */
/* a.outlinedIconButton:disabled ,button.outlinedIconButton:disabled {  } */

/* standard buttons */
a.standardButton, button.standardButton { background-color: var(--font-color-blue); color: #fff; font-weight: 500 }
a.standardButton:hover, a.standardButton:active, button.standardButton:hover, button.standardButton:active { background-color: var(--button-color-active) }
/* a.standardButton:disabled, button.standardButton:disabled {  } */

input.standardButton { background-color: var(--font-color-blue); color: #fff; border: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 6.4rem; height: 3.5rem; padding: 0 0.8rem; box-sizing: border-box; border: none; border-radius: var(--btn-border-radius); cursor: pointer; /* outline: none; */ font-size: var(--font-size-button); /* letter-spacing: var(--letter-spacing-15); */line-height: 100% }
input.standardButton:hover { background-color: var(--button-color-active) }

/* basic buttons */
a.basicButton, button.basicButton { background-color: var(--basic-color); color: #fff; font-weight: 500 }
a.basicButton:hover, a.basicButton:active, button.basicButton:hover, button.basicButton:active { background: var(--button-color-active) !important }
/* a.basicButton:disabled, button.basicButton:disabled {  } */

/* standard icon buttons */
a.standardIconButton, button.standardIconButton { display: inline-flex; align-items: center; padding-left: 1rem }
a.standardIconButton:before, button.standardIconButton:before { margin-right: .5rem; content: "\f058" }
/* a.standardIconButton:hover, a.standardIconButton:active, button.standardIconButton:hover, button.standardIconButton:active {  } */
/* a.standardIconButton:disabled, button.standardIconButton:disabled {  } */

/* round buttons */
a.roundButton, button.roundButton { padding: 1.2rem 3rem; box-sizing: border-box; border: 0.1rem solid #107AF2; border-radius: var(--btn-border-radius); color: #107AF2 }
/* a.roundButton:hover, a.roundButton:active, button.roundButton:hover, button.roundButton:active {  } */
a.roundButton:disabled, button.roundButton:disabled { color: #fff; background-color: var(--button-color-active) }
a.roundButton i, button.roundButton i { margin-left: .5rem }

a.btn_cancel, button.btn_cancel { border: 0.1rem solid var(--gc-gray-3); color : var(--gc-gray-9); background: var(--gc_white) }
.btn, .btn_line{padding: var(--padding-lg);}
.btn_line.btn_primary {border:1px solid var(--color-primary);}

.btnbtnNew {background: var(--system-color-orange); color: var(--text-invert); border: 1px solid var(--system-color-orange);}
.btnDelete {background: var(--system-color-red); color: var(--text-invert); border: 1px solid var(--system-color-red);}
.btnSave {background: var(--system-color-blue); color: var(--text-invert); border: 1px solid var(--system-color-blue);}
.itsButton.popsearch {background:var(--color-primary);color:var(--text-invert);display:inline-flex;width: 3.6rem !important;height:3.6rem;justify-content: center;align-items: center;border-radius: var(--radius-sm); font-size: 0;}
.itsButton.popsearch:before {margin: 0;}

/* fontawesome 기본정의 */
.caution:before, .icon:before, .outlinedIconButton:before, .standardIconButton:before { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }

/* 텍스트 앞에 아이콘 넣을 때 */
.caution { display: flex; padding-left: 2rem; white-space: break-spaces; font-size: var(--fs-base); text-align: left;} /* 주의 */
.caution:before { margin-left: -2rem; margin-right: .5rem; content: "\f5cf" }


/* fontawesome 단독 사용 */
.icon { font-size: 2.4rem }

.chk.icon:before { color: var(--bc-indigo, #3f51b5); content: "\f058" } /* 체크 */
.x.icon:before { color: var(--bc-dk-red, #e03131); content: "\f057" } /* x */


/* 라디오&체크 */
.detail_info dd input[type=checkbox]:not(.cke *), .detail_info dd input[type="radio"]:not(.cke *) { width: auto }

/* .chk_list label::before { -webkit-font-smoothing: antialiased; font-family: "Material Symbols Outlined"; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-variant: normal; text-rendering: auto; font-weight: 900; line-height: 1 } */
.chk_list label { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; margin-right: 10px; line-height: 120% }
.chk_list label::before { overflow: hidden;  margin-right: 6px; background: #ffffff; border: 0.1rem solid var(--gc-gray-6); border-radius: 3px; color: var(--gc-gray-6); font-size: 24px; content: "\e837"; }
.chk_list input[type="radio"], .chk_list input[type="checkbox"] { position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap }  
.chk_list input[type="radio"] + label::before { border-radius: 999px; overflow: hidden; width: 24px; height: 24px; border: 0; margin-right: 6px; background: #ffffff; font-size: 24px; font-weight: 500 !important; content: "\e836";  }
.chk_list input:checked + label::before { border-color: tomato; color: tomato }
.chk_list input[type="radio"]:checked + label::before { content: "\e837" }
.chk_list input[type="checkbox"] + label::before  {content:'\e835'}
.chk_list input[type="checkbox"]:checked + label::before { content: "\e834" }
.chk_list input:focus + label::before { outline: 0px solid #000; outline-offset:-2px }

.chk_list.row {display: flex; flex-direction: row;}
.chk_list li{flex-grow:1;  display: flex; flex-direction: row; flex-wrap: nowrap; }
.chk_list.row  li {flex-grow:inherit;}
.chk_list.span2, .chk_list.span3, .chk_list.span4 {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;}
.chk_list.span2 li{ width:calc(100%/2);}
.chk_list.span3 li{ width:calc(100%/3);}
.chk_list.span4 li{ width:calc(100%/4);}
.chk_list .etc {display: flex;}
.chk_list li label { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start;}

/* input[data-itstype="datepicker"] { background:#fff url(/resources/jbsc/images/common/bg_calendar.png) no-repeat 96% 50%; padding-right:20px } */
input.date { background-image: url(../../../images/common/bg_calendar.png); padding-right:20px; background-repeat: no-repeat; background-position: 98% 50% }

/* 토글 슬라이드 */
.toggle label { display: flex; align-items: center; gap: var(--gap-sm); cursor: pointer;}
.toggle input { display: none;}
.toggle_slider { width: 40px; height: 20px; background: var(--gray-200); border-radius: 20px; position: relative; transition: background 0.3s;}
.toggle_slider:before {content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--color-white); border-radius: 50%; transition: transform 0.3s;}
.toggle input:checked + .toggle_slider { background: var(--color-primary); }
.toggle input:checked + .toggle_slider:before {transform: translateX(20px); }

/* 카운트 */
.countBox { display: flex !important; align-items: stretch; justify-content: space-between; background: #fff }
.countBox p { width: calc(100% - 100px); text-align: center; border: 0.1rem solid var(--border); border-right: 0; min-height: 35px; display: flex; align-items: center; padding-left: 10px }
.countBox > div { display: flex; align-items: center; width: 100px }
.countBox > div > div { width: 35px;  height: 100%; line-height: 35px; border-top: 0.1rem solid var(--border); border-bottom: 0.1rem solid var(--border); text-align: center; display: flex; align-items: center; justify-content: center }
.countBox input { border: 0.1rem solid var(--border); width: 35px; height: 100% }

/* 파일업로드 */
.file_upload {display: flex; width: 100%; gap:var(--gap-md); flex-direction: column;}
.file_upload .file_btn_area {display: flex; gap:var(--gap-sm); flex-direction: row;}
.file_upload select {padding:var(--padding-md) !important;}
.file_upload .file_box {border:1px solid var(--border); border-radius: var(--radius-md); padding: var(--padding-lg);}
.file_upload .progress {height: auto;}

/* 리스트 스타일 */
h4+.list_dot, h4+.list_num { padding-top: 0; margin-top: -10px }

.list_dot { padding:20px }
.list_dot li { padding-left:10px; padding-bottom:2px }
.list_dot li:before { content: 'ㆍ'; margin-left: -14px }
/* .list_dot li ul { margin-bottom:10px } */
.list_dot li li { padding-left:20px; padding-bottom:0 }
.list_dot li li:before { content: '-'; margin-left: -1.5rem; margin-right: 10px }

.list_num { padding:20px }
.list_num > li { padding-left: 1.5rem; list-style-type: decimal; list-style-position: inside }

.list_dot.flex li { display: flex }
.list_dot.flex li h5 { width: 150px }

.itsRadioSpan label { margin-right: 1rem }


/* 테이블 */
.table { margin-bottom: 2rem }
.scroll { max-width: 100%; overflow: auto }

#dataGrid thead th, #dataGrid2 thead th, #dataGrid3 thead th, #dataGrid4 thead th, #detailGrid thead th, table.dataTable thead th,
#dataGrid thead td, #dataGrid2 thead td, #dataGrid3 thead td, #dataGrid4 thead td, #detailGrid thead td, table.dataTable thead td,
table.dataTable tbody th, table.dataTable tbody td { font-size: 87.5% }

table.dataTable input[readonly="readonly"], input:disabled, select:disabled { background-color: transparent; border-color: transparent }
table.dataTable tr.selected input[readonly="readonly"] {color:var(--text-invert);}

.table_face, table.dataTable { position: relative; border-collapse: collapse; width: 100%; border-top: 0.2rem solid var(--gc-gray-8); border-bottom: 0.1rem solid var(--border) }
.cont .table_face:last-child { margin-bottom: 0 }
.table_face th, .table_face td { padding: var(--dataTable-padding-th); border: 0.1rem solid var(--border); text-align: center }
.table_face thead { background-color: #f1f2f4 }
.table_face thead th, .table_face thead td { border-top: 0.1rem solid var(--border); border-right: 0; border-bottom: 0 }
.table_face thead th { border-bottom: 0.1rem solid var(--border) !important; font-weight: 600 }
.table_face tbody th { background-color: #f1f2f4; font-weight: 600 }
.table_face thead tr:first-child th:first-child { border-left: 0 }
.table_face tbody th:first-child, .table_face tbody td:first-child { border-left: 0 }
.table_face td:last-child, .table_face th:last-child { border-right: 0 }
.table_face tbody tr { background: #ffffff20 }
.table_face .btn { padding: 0.5rem 1rem }

/* table.dataTable td button { background: var(--gc-gray-8); color: #fff; border: 0 } 테이블 내 버튼 문제로 숨김 20250918*/

/* 반응형 테이블 */
.table_normal { width: 100%; word-break: keep-all; border-top: 0.1rem solid var(--table-head-border); border-spacing: 0; border-collapse: collapse; line-height: 1.3 }
.table_normal thead tr th { height: 4rem; padding: 1rem; border-bottom: 0.1rem solid var(--table-thead-border); /* border-right: 0.1rem solid var(--table-thead-border); */ background-color: #f2f3f5; color: #222; font-weight: 400; text-align: center }
.table_normal tbody tr td { height: 4rem; padding: 1rem; border-bottom: 0.1rem solid var(--table-tbody-border); /* border-right: 0.1rem solid var(--table-tbody-border); */ background-color: white; color: #666; text-align: center }
.table_normal thead tr th:last-child, .table_normal tbody tr td:last-child { border-right: 0 }
.table_normal thead tr th.border-right { border-right: 0.1rem solid var(--table-thead-border) }
.table_normal tbody tr:hover td { background: #f5f7f9 }
.table_normal tbody tr.noticeRow td { background-color: #fffef9 }
.table_normal tbody tr.noticeRow td:first-child { color: #f66800; font-weight: 500 }
.table_normal tbody tr td button, .table_normal tbody tr td input.standardButton, .table_normal tbody tr td input { margin: -2rem 0 }
.table_normal tbody tr td .iconBox { display: block; position: relative }
.table_normal tbody tr td .linkBox { display: table; table-layout: fixed; width: 100%; word-wrap: break-word; word-break: break-word }
.table_normal tbody tr td .linkBox > a {  margin: 0 .5rem 0 0; color: #222; vertical-align: middle; word-break: break-all; cursor: pointer }
.table_normal tbody tr td .linkBox > a:hover { color: #1464d9; text-decoration: underline }
.table_normal tbody tr td .linkBox > a:hover .txt { color: #1464d9 }
.table_normal tbody tr td .linkBox > a > .ellipsis { display: inline-block; max-width: calc(100% - 7rem); vertical-align: middle }
.table_normal tbody tr td .linkBox.arrow > a.txt { color: #1464d9; vertical-align: middle }
.table_normal tbody tr td .linkBox.arrow > a:after { display: inline-block;  width: .6rem; height: 11px; background: url("../../../images/template9/resp/blue/icon/icon_board_link_arrow.png") no-repeat; vertical-align: middle; word-break: keep-all; content: "" }
.table_normal tbody tr td .linkBox .txt { display: inline-block; overflow: hidden; max-width: calc(100% - 7rem); vertical-align: middle; white-space: nowrap; text-overflow: ellipsis }
.table_normal tbody tr td .mobBox { display: none }
.table_normal tbody tr td.no_dataBox {  padding: 6rem 1.5rem; background: #f5f7f9; color: #222; font-size: 18px }
.table_normal tbody tr td.no_dataBox .txt { margin: 2.5rem 0 0; line-height: 1 }
.table_normal tbody tr td .txt { min-width:0; color: #222; line-height: 1.5; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: flex; align-items:center }
.table_normal tbody tr td .txt span.ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 90% }
.table_normal tbody tr td .txt_default { margin: 1rem 0 }
.table_normal tbody tr td .num { font-size: 2rem }
.table_normal tbody tr th { padding: 1.6rem; border-bottom: 0.1rem solid var(--table-tbody-border); background: #f1f1f1; color: #000; font-size: 1.6rem; text-align: left }
.table_normal.type02 tbody tr td { color: #222 }
.table_normal tbody tr td.al { text-align: left !important; position: inherit }
.table_normal tbody tr td.al label.deco-chk { margin-bottom:1rem }
.table_normal tbody tr td.al img { border-radius:0.5rem }
.table_normal td.tLeft { padding-left: 1rem }

.table_normal.table_detail th { text-align: right }
.table_normal.table_detail tbody tr:hover td { background: none }
.table_normal.table_detail tbody tr td { border-right: 0 }

.table_normal.list thead tr th { height: auto; padding: 1.5rem 1rem }
.table_normal.list tbody tr td { height: auto; padding: 1.5rem 1rem;  }


/* 테이블 사선 */
.backslash { width: 60px; text-align: left !important;   padding: 0 30px !important; background: url('data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="rgb(221,225,228)" /></svg>') }
.backslash div { text-align: right !important }

.label_title { display: table; width: 100%; padding: .3rem 0; table-layout: fixed }
.label_title .label_titleL { display: table-cell; width: 3.8rem; padding: .2rem 1rem 0 0; vertical-align: middle }
.label_title .label_titleR { display: table-cell; vertical-align: middle }
.label_title .label_titleR .label_titleLink { display: inline-block; overflow: hidden; position: relative; max-width: 100%; padding: .3rem 0; font-size: 1.6rem; vertical-align: middle; white-space: nowrap; word-wrap: normal; text-overflow: ellipsis }
.label_title .label_titleR .label_titleLink .cnt { position: relative; top: .2rem; float: left; margin: 0 0 0 .2rem; color: #2a80dd }
.label_title .label_titleR .label_titleLink:hover { color: #1464d9 }
.label_title .label_titleR .txt { display: inline-block; overflow: hidden; position: relative; max-width: 100%; padding: .5rem 0; font-size: 1.6rem; white-space: nowrap; word-wrap: normal; text-overflow: ellipsis; transition: 0.5s all ease; cursor: pointer }
.label_title .label_titleR .label_titleLink:hover .txt { color: #1464d9 }
.label_title .label_titleR .txt:after { position: absolute; width: 0; height: .1rem; left: 0; bottom: 0; background: #1464d9; content: ''; transition: width .5s cubic-bezier(0.29, 0.18, 0.26, 0.83) }
.label_title .label_titleR .label_titleLink:hover .txt:after { left: 0; width: 100% }
.label_title .label_titleLinkIn { display: block }
.label_title.icon .label_titleLinkIn { margin: 0 6.8rem 0 0 }
.label_title.comment .label_titleLinkIn { margin: 0 4rem 0 0 }
.label_title.comment.icon .label_titleLinkIn { margin: 0 6.5rem 0 0 }

.ready { position: absolute;  z-index: 50;  color: #FFF;  width: 100%;  height: 100%;  background: #000000a1;  display: flex !important;  align-items: center;  justify-content: center;  left: 0; top: 0 }
.done { position: absolute;  z-index: 50;  color: #FFF;  width: 100%;  height: 100%;  background: #c30721ab;  display: flex !important;  align-items: center;  justify-content: center;  left: 0; top: 0 }

.tn_add_style .al { display: none }
.tn_add_style .mobH { padding: 0 1.5rem }

div.w_scroll { width: 100%; overflow-x: auto }


/*defain list */
.defain_normal { display: flex; flex-direction: column; border-bottom: 0.1rem solid var(--defain-bottom-border) }
.defain_normal dt { padding: 1rem; background: #ebeff2; border-top: 0.1rem solid var(--defain-top-border) }
.defain_normal dd { padding: 1rem }

.list_style li { background: #fafafa; margin-bottom: 5px; padding: 1rem }
.list_style p:first-child { width: 15% }


/* box style */
.border_box { padding: var(--padding-lg); border: 0.1rem solid var(--border, #adb5bd) }

.flex_box { display: flex }
.flex_box .head { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 0.1rem solid var(--border, #adb5bd); font-weight: 700 }
.flex_box.three { justify-content: space-between }
.flex_box.three > * { width: calc(100%/3 - 1rem); padding: 3rem; margin-right: 1rem; margin-top: 3rem; border: 0.1rem solid var(--border, #adb5bd) }
.flex_box.three > *:last-child { margin-right: 0 }

.link_box ul { display: flex; flex-direction: row; flex-wrap: wrap }
.link_box li { display: flex; flex-direction: column; justify-content: space-between; position: relative; width: calc(96% / 2); padding: 3rem; margin: 1rem; box-sizing: border-box; border: 18px solid #e3e3e3 }
.link_box li span:first-child { font-size: 2.6rem; font-weight: 500 }
.link_box li a { display: inline-block; position: absolute; right: 2.6rem; padding: 1.8rem 2.5rem; background: #363636; color: #FFF }

.card_box { display: flex; justify-content: space-evenly }
.card_box .box_layout { border: 0.2rem dashed var(--point-color); background: var(--bg-color); border-radius: var(--box-border-radius-lg); padding: 2rem 3rem; min-width: 30rem }
.card_box .title { margin-bottom: 1rem; text-align: center; font-size: 2em; color: var(--point-color) }
.card_box .btn { display: flex; justify-content: center }
.card_box .btn a{ padding: 1rem 2rem; background-color: var(--point-color); color: #ffffff; border-radius: 5px }

@keyframes blink {
  0% { opacity: 1 }
  50% { opacity: 0 }
  100% { opacity: 1 }
}

.select_box { display: flex; gap: 2rem; justify-content: flex-start; padding: 2rem 3rem; border: 0.1rem solid var(--border) }
.process_box { display: flex; gap: 3rem; justify-content: center; padding: 2rem 3rem; border: 0.1rem solid var(--border) }
.select_box .box_layout, .process_box .box_layout { display: flex; align-items: center; border: 0.2rem solid var(--gc-gray-6); border-radius: var(--box-border-radius-lg); padding: 2rem; position: relative }
.select_box .box_layout { min-width: 25rem; cursor: pointer }
.process_box .box_layout { flex: 1 }
.select_box .box_layout:before, .process_box .box_layout:before { content:"\e86c"; color: var(--border); margin-right: 1rem }
.select_box .box_layout.on, .select_box .box_layout:hover, .process_box .box_layout.on { border: 0.2rem solid var(--point-color); background: var(--bg-color) }
.select_box .box_layout.on:before, .select_box .box_layout:hover:before, .process_box .box_layout.on:before { color: var(--point-color) }
.select_box .box_layout .title, .process_box .box_layout { font-size: 112.5% }
.select_box .box_layout.on .title, .process_box .box_layout.on .title { color: var(--point-color) }
.process_box .box_layout.on .title, .process_box .box_layout.on:after { animation: blink 1s infinite }
/* .process_box .box_layout:not(.process_box .box_layout:last-child):after { content: "\eac9"; position: absolute; right: -3rem } */


.survey_box { display: flex; gap: 2rem; flex-direction: column }
.survey_box:has(.ctgry_nm) { border-top: 0.1rem solid var(--bg-color) }
.survey_box .ctgry_nm { padding: 1rem 2rem; background: var(--point-color) url(/resources/jbsc/images/common/bg_pattern_w.svg) 100% 50%/60% auto no-repeat; color: #FFF; border-radius: 2rem 2rem 0.5rem 0.5rem; margin-top: 2rem; display: none }
.survey_box .desc_info { margin-bottom: 0 }
.tab_face > div:nth-of-type(1) .ctgry_nm { margin-top: 0 }
.tab_face > div:nth-of-type(1) .survey_box { border-top: 0 }
.survey_box .box_layout { position:relative; border: 0.2rem solid var(--gc-gray-6); border-radius: var(--box-border-radius-md); overflow: hidden }
.survey_box .box_layout .num { display: inline-flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; bottom: 0; background: var(--point-color); color: #fff; border-bottom-right-radius: var(--box-border-radius-md); width: 4rem }

.survey_box .box_layout .question { position:relative; font-size: 112.5%; line-height: 120%; padding: 0.5rem 0.5rem 0 5rem }

.survey_box .box_layout .answer { padding: 0.5rem 1rem 1rem 1rem }
.survey_box .box_layout .answer.row { display: flex; gap: 0.5rem }
.survey_box .box_layout .answer.row li { width: 100% }
.survey_box .box_layout .answer label { position:relative; display: flex; border: 0.2rem solid var(--gc-gray-1); border-radius: 1rem; margin-top: 0.5rem; padding: 0.5rem 1rem }
.survey_box .box_layout div.answer label { padding: 0.5rem }
.survey_box .box_layout .answer input[type="text"] { width: 100%; outline: 0; border: solid 0.1rem rgb(0 0 0 / 5%); border-radius: 0.5rem }
.survey_box .box_layout .answer input[type="text"]::placeholder { opacity: 0 }
.survey_box .box_layout .answer label:has(input:checked), .survey_box .box_layout .answer label:has(input[type="text"]:not(:placeholder-shown)) { border-color: var(--point-color); background-color: var(--bg-color) }

.survey_box .box_layout .answer .custom-radio, .survey_box .box_layout .answer .custom-checkbox { position: absolute; right: 0.2rem; width: 2rem; height: 2rem; border: 0.1rem solid var(--gc-gray-1); background-color: #fff; cursor: pointer; transition: all 0.3s ease; margin-right: 0.5rem }
.survey_box .box_layout .answer.row .custom-radio, .survey_box .box_layout .answer.row .custom-checkbox { position: relative }

.survey_box .box_layout .answer .custom-radio { border-radius: 50% }
.survey_box .box_layout .answer .custom-checkbox { border-radius: 0.3rem }
.survey_box .box_layout .answer input[type="radio"]:checked + .custom-radio, .survey_box .box_layout .answer input[type="checkbox"]:checked + .custom-checkbox { border-color: var(--point-color) }
.survey_box .box_layout .answer input[type="radio"]:checked + .custom-radio::after, .survey_box .box_layout .answer input[type="checkbox"]:checked + .custom-checkbox::after { width: 1rem; height: 1rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; font-weight: 700 }
.survey_box .box_layout .answer input[type="radio"]:checked + .custom-radio::after { background-color: tomato }
.survey_box .box_layout .answer input[type="text"]:not(:placeholder-shown) { border-color: tomato }

.survey_box .box_layout .answer input[type="radio"]:checked + .custom-radio::after { content: ""; border-radius: 50% }
.survey_box .box_layout .answer input[type="checkbox"]:checked + .custom-checkbox::after { content: "\e5ca"; border-radius: 0.1rem; color: tomato }
.survey_box .box_layout .answer .num { display: none }

.survey_box.type2 { gap: 1rem }
.survey_box.type2 .box_layout { border: 0 }
.survey_box .group_question { padding: 0.5rem 1rem; background: var(--point-color); border-radius: 1rem 1rem 0 0; color: #fff; font-size: 112.5%; margin-top: 1rem }
.survey_box.type2 .box_layout .num { background: var(--bg-color); color: inherit }
.survey_box .box_layout .answer_e { padding: 1rem 0 }
.survey_box .box_layout .answer_e textarea, .survey_box .box_layout .answer_e .itsRadioSpan { display: flex; border: 0.2rem solid var(--gc-gray-1); border-radius: 1rem; padding: 1rem }

.survey_box .box_layout .answer_e label.deco-chk { flex-wrap: nowrap; font-size: 87.5% }
.survey_box .box_layout .answer_e input.deco-chk:focus + label.deco-chk::before { outline: 0 }
.survey_box .box_layout .answer_e label { border-radius: 0.5rem; padding: 0.5rem; border: 0.2rem solid transparent }
.survey_box .box_layout .answer_e input.deco-chk:checked + label.deco-chk { border: 0.2rem solid var(--point-color); background-color: var(--bg-color) }




/* 이미지확인 */
.img_chk_box { display: flex; align-items: flex-end; gap:0 10px }
.captcha_btn { display: flex; gap: 5px; flex-wrap: wrap }
.img_chk_box button { margin:0 !important; display: inline-flex; align-items: center; gap: 0 5px; font-size: 14px; min-width: auto; padding: 0 10px; height:3rem }
.img_chk_box button span { font-size:17px }
.check { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }

/* 
.question { margin-right:10px; min-width: 30px; height: 30px; padding: 2px 10px 6px; background: #ff5722; border-radius: 5px; color: #fff; display: flex; justify-content: center; align-items: center; font-weight: 500 }
.answer { font-size:20px; min-width: 30px; height: 30px; padding: 2px 10px 6px; background: #0079c5; border-radius: 5px; color: #fff; display: flex; justify-content: center; align-items: center; font-weight: 500; margin-bottom: auto }
.answer + #cntnts { width: calc(100% - 43px) }
 */

/* 준비중 */
.comming { padding: 5rem; margin-bottom: 0 !important; border: 0.1rem solid var(--border); background: #f7f7f7; text-align: center }
.comming img { margin-bottom: 2rem }
.comming p { font-size: 2.5rem; font-weight: bold }


/* 드롭다운 메뉴 */
.search_filter { display:flex; align-items: center; border: 2px solid var(--bg-color2); padding: 10px; gap: 0 10px; justify-content: flex-end; flex-wrap: wrap }
.search_filter > div { display:flex; align-items: center; flex-wrap:wrap }
.search_filter h5 { margin-bottom:0 }
/* .drop_down { width: 150px; height:40px; text-align:center; line-height: 40px; background-color: white; border: 0.1rem solid var(--border) }
.drop_down> span { display: flex; justify-content: space-between; align-items: center; padding: 0 10px }
.drop_down>.drop_down_menu { position: relative; display:none; height:auto; overflow:hidden; border: 0.1rem solid var(--border) }
.drop_down>.drop_down_menu li { cursor:pointer; background-color: white; border-top:1px white solid }
.drop_down>.drop_down_menu.up { height:0px }
.drop_down>.drop_down_menu.down { height:auto } */



.img_layout { border: 5px solid #e5e5e5 }
.img_layout img { width: 100% }

.required:before { content: "\f525"; color: tomato; font-size: 1.2rem; margin-right: 0.3rem }

.required ~ dd input[type="text"]:not(td input):not(input[readonly]),
.required ~ dd input[type="password"]:not(td input):not(input[readonly]),
.required ~ dd select:not(td select):not(select[readonly]),
.required ~ dd textarea:not(td textarea):not(textarea[readonly]) { background-color: #fdfdeb !important }

.required ~ dd input[type="text"]:focus:not(input[readonly]):not(td input),
.required ~ dd input[type="password"]:focus:not(input[readonly]):not(td input),
.required ~ dd select:focus:not(select[disabled]):not(td select),
.required ~ dd textarea:focus:not(textarea[disabled]):not(td textarea) { outline: 2px solid tomato !important }

.detail_info { position: relative; display: flex; flex-wrap: wrap; width: 100%; border-top: 2px solid var(--color-primary); border-bottom: 0.1rem solid var(--border); background: var(--detailInfo-color); overflow: hidden; margin-top: 2rem }
h4 + .detail_info, h5 + .detail_info { margin-top: 0 }
.detail_info > div { display: inline-flex; align-items: stretch; white-space: nowrap; overflow: hidden }
.detail_info > div.description { padding: 0.6rem 0 0.2rem 1rem; white-space: normal; font-size: 1.3rem }
.detail_info dt, .detail_info dd { display: inline-flex; flex-wrap: wrap; align-items: stretch; align-content: center; white-space: normal }
.detail_info dt { justify-content: flex-end; text-align: right; word-break: normal; padding: var(--detailInfo-padding-dt); background: var(--detailInfo-color-dt); border-top: 0.1rem solid var(--detailInfo-color-border); border-bottom: 0 solid var(--detailInfo-color-border); font-weight: var(--fw-semibold)}
.detail_info dd { padding: var(--detailInfo-padding-dd); background: var(--detailInfo-color-dd); border-top: 0.1rem solid var(--detailInfo-color-border); border-bottom: 0 solid var(--detailInfo-color-border) }
.detail_info dd > label { padding-right: 1rem }
.detail_info dd input:not(.cke *), .detail_info dd select:not(.cke *), .detail_info dd textarea:not(.cke *) { border-radius: var(--input-border-radius); min-height: var(--input-min-height); padding: var(--detailInfo-padding-input); width: 100% }
.detail_info dd select:not(.cke *) { padding-top: 0; padding-bottom: 0 }
.detail_info dd textarea:not(.cke *) { resize: none; width: 100% }
.detail_info dd span:not(.cke *) { display: inline-flex; align-items: center; padding: var(--detailInfo-padding-span); min-height: var(--input-min-height); white-space: normal; word-break: break-word }
.detail_info dd .cke { display: block; width: 100%; box-sizing: border-box }

.detail_info dd .half { width: calc(50% - 6.5rem) !important }

.detail_info dd.nowrap { flex-wrap: nowrap; gap: 0.5rem }

/*
.detail_info dd input[readonly], .detail_info dd input[disabled],
.detail_info dd select[readonly], .detail_info dd select[disabled],
.detail_info dd textarea[readonly], .detail_info dd textarea[disabled] { color: #333; background: rgba(255,255,255,0.5); border: 0 }
*/

.detail_info.column1 dt { width: 16rem; letter-spacing: 0 }
.detail_info.column1 dd { width: calc(100% - 16rem) }
.detail_info.column1 > div { width: 100% }
.detail_info.column1 > div.half { width: calc(100% / 2) }

.detail_info dt { width: 16rem; letter-spacing: -0.1rem }
.detail_info dd { width: calc(100% - 16rem) }
.detail_info > div { width: calc(100% / 2) }
.detail_info:not(.column1):not(.column3):not(.column4) > div.half { width: calc(100% / 4) }
.detail_info > div.span2 { width: 100% }

.detail_info.column3 dt { width: 16rem }
.detail_info.column3 dd { width: calc(100% - 16rem) }
.detail_info.column3 > div { width: calc(100% / 3) }
.detail_info.column3 > div.half { width: calc(100% / 6) }
.detail_info.column3 > div.span2 { width: calc(100% / 3 * 2) }
.detail_info.column3 > div.span3 { width: 100% }

.detail_info.column4 dt { width: 16rem }
.detail_info.column4 dd { width: calc(100% - 16rem) }
.detail_info.column4 > div { width: calc(100% / 4) }
.detail_info.column4 > div.span2 { width: calc(100% / 2) }
.detail_info.column4 > div.span3 { width: calc(100% / 4 * 3) }
.detail_info.column4 > div.span4 { width: 100% }

.detail_info.column5 dt { width: 14rem }
.detail_info.column5 dd { width: calc(100% - 14rem) }
.detail_info.column5 > div { width: calc(100% / 5) }
.detail_info.column5 > div.span2 { width: calc(100% / 5 * 2) }
.detail_info.column5 > div.span3 { width: calc(100% / 5 * 3) }
.detail_info.column5 > div.span4 { width: calc(100% / 5 * 4) }
.detail_info.column5 > div.span5 { width: 100% }

.detail_info.columnAuto dt { width: auto; margin-left: 1rem }
.detail_info.columnAuto dd { width: auto }
.detail_info.columnAuto > div { width: auto }
.detail_info.columnAuto input {min-width:8rem;}
.detail_info.columnAuto select {min-width:15rem;}

.detail_info.longDt dt { width: 18rem; letter-spacing: 0px }
.detail_info.longDt dd { width: calc(100% - 18rem) }

.detail_info.longDt2 dt { width: 20rem; letter-spacing: 0px }
.detail_info.longDt2 dd { width: calc(100% - 20rem) }

.detail_info.longDt3 dt { width: 22rem; letter-spacing: 0px }
.detail_info.longDt3 dd { width: calc(100% - 22rem) }

.detail_info.shortDt dt { width: 14rem }
.detail_info.shortDt dd { width: calc(100% - 14rem) }

.detail_info.shortDt2 dt { width: 12rem }
.detail_info.shortDt2 dd { width: calc(100% - 12rem) }

.detail_info.edit dd {gap:var(--gap-sm);}
.detail_info.edit input{width: auto;}

/* tab */
.tab_face { position: relative; clear: both; background: var(--color-white); }
.tab_face > ul { position: relative; overflow: visible; display: flex; flex-wrap: wrap }
.tab_face > ul > li { display: flex; align-items: center; justify-content: center; overflow: hidden; margin-right: -0.1rem; margin-top: -0.1rem; }
.tab_face > ul > li a { /* background-color: #f2f3f5;  */padding: 0.8rem 1.6rem; color: var(--gc-gray-6); border: 0.1rem solid var(--border); }
.tab_face > ul > li.on { border-bottom: 0.1rem solid var(--gc-white); border-top: 0.3rem solid var(--point-color); margin-top: -0.3rem }
.tab_face > ul > li.on a { background: var(--gc-white); color: var(--font-color-base) }
.tab_face > div { padding-top: 2rem; margin-top: -0.1rem; border-top:1px solid var(--border); padding:var(--padding-lg);}
.tab_face  div.tabcontent { display: none }
.tab_face  div.tabcontent .fRight {text-align: right;}
.tab_face  div.tabcontent .fRight .btn{color: var(--text-invert);}
.tab_face  div.current {gap: var(--gap-md);display: flex;flex-direction: column;}
.tab_face  div > iframe { margin-bottom:-4px }

.tab_face .w_full {flex-wrap: nowrap;}
.tab_face .w_full li, .tab_face .w_full li a{width:100%}

.tab_face.no_tab > ul { display: none }
.tab_face.no_tab > div { display: block !important; margin-top: 0 }
/* .tab_face.no_tab .survey_box .desc_info { margin-top: -2rem } */
.desc_info + .ctgry_nm { margin-top: -2rem }
.tab_face.no_tab .ctgry_nm { display: block }


/* tab - 자동생성용 */
.itabs-container { position: relative }
.itabs { display: flex; list-style: none; padding: 0; flex-wrap: wrap }
.itabs li { padding: 0.8rem 1.6rem; border: 0.1rem solid var(--border); cursor: pointer; margin-right: -0.1rem; background-color: rgb(0 0 0 / 5%); color: var(--gc-gray-6) }
.itabs li.active { background: var(--gc-white); color: var(--font-color-base); border-bottom: 0.1rem solid var(--gc-white); border-top: 0.3rem solid var(--point-color); margin-top: -0.3rem }
.itab-content { border-top: 0.1rem solid var(--border); padding-top: 2rem; margin-top: -0.1rem }
.itab-content iframe { width: 100%; border: none; min-height: 15rem }


/* 아코디언 메뉴
.depth1:first-child { border-top: 0.1rem solid black }
.depth1 { position: relative; padding: 10px; cursor: pointer; border-bottom: 0.1rem solid var(--border); font-size: 14px }
.depth1::before { display: inline-block; color: #006633; margin-right: 5px }
.depth1.on>span { font-weight: bold; color: #006633 }
.depth2 { display: none; overflow: hidden; background-color: #f4f4f2; padding: 10px; font-size: 14px }
.depth2::before { display: inline-block; font-weight: bold; color: #666; margin-right: 5px }
 */

/* swiper
.swiper { width: 100%; height: 100%; box-sizing:border-box }
.swiper-slide { text-align: center; font-size: 18px; background: #fff; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
 }
.swiper-slide img { display: block; object-fit: cover }
 */

/* 리스트 정의 */
ul.li_bu, ul.li_bu li ul { padding-left: 2.5rem }
ul.li_bu li:before  { content:'■ '; font-size: 0.1rem; margin-left: -2rem; margin-right: 0.8rem }
ul.li_bu li:last-child { margin-bottom: 2rem }
ul.li_bu li ul li:before { content:'○ '; font-size: 0.1rem; margin-left: -2rem; margin-right: 0.8rem }
ul.li_bu li ul li:before ol.li_num li:before { content:'' }

ol.li_num,  ol.li_num li ol { margin-left: 2.5rem }
ol.li_num li { list-style-position: inside }
ol.li_num li:before { position:absolute; margin-left: -2.5rem; font-size: 1.8rem !important }
ol.li_num li:last-child { margin-bottom: 2rem }
ol.li_num li:nth-child(1):before { content:'① ' }
ol.li_num li:nth-child(2):before { content:'② ' }
ol.li_num li:nth-child(3):before { content:'③ ' }
ol.li_num li:nth-child(4):before { content:'④ ' }
ol.li_num li:nth-child(5):before { content:'⑤ ' }
ol.li_num li:nth-child(6):before { content:'⑥ ' }
ol.li_num li:nth-child(7):before { content:'⑦ ' }
ol.li_num li:nth-child(8):before { content:'⑧ ' }
ol.li_num li:nth-child(9):before { content:'⑨ ' }
ol.li_num li:nth-child(10):before { content:'⑩ ' }
ol.li_num li:nth-child(11):before { content:'⑪ ' }
ol.li_num li:nth-child(12):before { content:'⑫ ' }
ol.li_num li:nth-child(13):before { content:'⑬ ' }
ol.li_num li:nth-child(14):before { content:'⑭ ' }
ol.li_num li:nth-child(15):before { content:'⑮ ' }
ol.li_num li:nth-child(16):before { content:'⑯ ' }

.responsive-video { width: 100%; height: auto; object-fit: cover }


/* resolution */

@media (max-width:960px) { 
    .link_box ul { flex-direction: column }
    .link_box li { width:100% }
 }

@media (max-width:894px) { 
    .tab li a { padding:0.8em 1em; font-size:1.5rem }
    
    .tabcontent .flex .fr, .tabcontent .flex .fl { display: block; float: unset !important; width:100%; margin: 0 auto 20px }
    .tabcontent .flex2 { flex-direction: column }
    .tabcontent .flex2 img { margin-bottom: 2rem }
 }

@media (max-width: 768px) {
  .tab_face > ul {
    flex-wrap: wrap;       /* 자동 줄바꿈 */
  }
  .tab_face > ul > li {
    flex: 1 1 50%;         /* 2열 탭 */
  }
  .tab_face > ul > li a {
    min-width: auto;       /* 고정폭 제거 */
    font-size: var(--fs-sm);
    padding: 0.8rem 1rem;
  }
}


@media (max-width: 710px) { 
    
    .flex_box { flex-direction: column }
    .flex_box.three > * { width: 100% }
 }

@media (max-width:520px) { 
    .tab ul { flex-wrap: wrap; border-top: 0.1rem solid var(--border) }
    .tab li { width: calc(100%/2 - 0.1rem); margin-bottom: 0.1rem }
    .tab li a:nth-child(1) { border-top: 0 }
    
    .tab_face > ul {
	    flex-direction: column; /* 세로 배치 */
	  }
    .tab_face div.current .btn_more {
       position: relative;
       margin-left: auto;
       top: auto;
    }
	  .tab_face > ul > li {
	    flex: 1 1 auto;
	    width: 100%;
	  }
	  .tab_face > ul > li a {
	    text-align: left;        /* 왼쪽 정렬 */
	    padding: 1rem;
	    border-radius: 0;        /* 라운드 풀어주기 */
	    min-width: 100%;
	  }
 }

@media (max-width:450px) { 
    .tab_face > li .bgbt { padding: 1rem 2% }
    .table_face th, .table_face td { padding: 1rem }
 }
 

/* 정렬(Button) */
.sorting_btn { background: var(--font-color-base); margin: 0 0 0 0.4rem; padding: 0.4rem 1rem 0.5rem 1rem; font-size: 1.4rem; line-height: 2rem; white-space: nowrap; vertical-align: middle; border-radius: 0.3rem; color: #fff; font-weight: 500; cursor: pointer }
.sorting_btn .fas { font-size: 1.6rem; margin-left: 0.6rem }
.sorting_btn:hover { color: #ffff80 }

/* 정렬(Div) */
.block_wrap { display: flex; gap:var(--gap-xl);}

.sorting_list { display: none; position: absolute; z-index: 888; right: 22px; width: 600px; padding: 10px; margin-top: 0; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.5); background: #fff; color: #3f3f3f; overflow: visible }
.sorting_list:before { content:"\f0d8"; position:absolute; top:-16px; right:22px; color:#fff; }
.sorting_list .fas { position:absolute; z-index:888; right:15px; margin-top:2px; color:var(--dataTable-color-border); cursor:pointer }
.sorting_list .dataTables_wrapper { margin-top: 1rem }
.sorting_list .dataTables_wrapper .dataTables_filter { position:relative; top:1px; width:calc(100% - 162px); padding-bottom:5px  }
.sorting_list .dataTables_wrapper .dataTables_filter input { height:30px; padding-top:3px }
.sorting_list .dataTables_wrapper .dataTables_filter:before { top:8px }
.sorting_list .dataTables_scrollHeadInner { width:100% !important }

/* 툴팁 */
.tooltip { position: relative; display: inline-flex; border:0; z-index: auto;}
.tooltip .icon{ display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; /* 터치/포커스 타겟 */ border: 0; background: transparent; cursor: help; padding: 0;}
.tooltip .icon:focus-visible{ outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 6px;}
.tooltip .bubble{  position: absolute;  top: calc(100% + 12px);   left: 50%;  transform: translate(-50%, 4px);   width: 360px;  padding: 10px 12px;  background: #fff;  color: #111;  font-size: 13px; line-height: 1.6;  white-space: normal;  border: 1px solid rgba(0,0,0,.08);  border-radius: 10px;  box-shadow: 0 5px 10px rgba(0,0,0,.15);  pointer-events: none;  opacity: 0; visibility: hidden;  transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;}
/* 꼬리 */
.tooltip .bubble::after{ content:""; position: absolute; top: 0; left: 50%; width: 12px; height: 12px; transform: translate(-50%, -6px) rotate(45deg); background: #fff;}
/* 보여주기: 마우스 롤오버 + 키보드 포커스 */
.tooltip:hover .tooltip .bubble,
.tooltip:focus-within .bubble{ opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 120ms ease, transform 120ms ease;}
/* 모션 최소화 환경 */
@media (prefers-reduced-motion: reduce){.tooltip .bubble{ transition: none; }
}

/* 컨테이너 쿼리 - 반응형 */
.cont {container-type: inline-size;}
@container (max-width: 1600px) {
    .detail_info.column5 > div {width: calc(100%/4);}
}
@container (max-width: 1280px) {
    .detail_info.column5 > div, .detail_info.column4 > div {width: calc(100%/3);}
}
@container (max-width: 1024px) {
    .detail_info.column5 > div, .detail_info.column4 > div,.detail_info.column3 > div { width: calc(100%/2); flex-grow: 1;}
}
@container (max-width: 768px) {
    .detail_info.column5 > div,.detail_info.column4 > div,.detail_info.column3 > div,.detail_info > div { width: 100%; } 
    .detail_info.longDt2 > div{flex-direction: column;}
    .detail_info.longDt2 dt, .detail_info.longDt2 dd {width:100%;}
    .detail_info.longDt3 > div{flex-direction: column;}
    .detail_info.longDt3 dt, .detail_info.longDt3 dd {width:100%;}
    
    .detail_info.column1:has(dd table) > div{ flex-direction: column;}
    .detail_info.column1:has(dd table) dt,	.detail_info.column1:has(dd table) dd {	 width:100%;}
}

/* 크기 조절 가능한 컨테이너 */
.resizable-container { display: flex !important; width: calc(100% - 2rem - 8px); min-height: 400px; gap:1rem;}
.resizable-container .resizable-panel { width: 50%; flex: none !important; overflow: auto;}
.resizer { width: 8px; background: #ddd; cursor: col-resize; position: relative; flex-shrink: 0; align-self: stretch; min-height: 400px;}
.resizer:hover { background: #bbb;}
.resizer::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3px; height: 40px; background: rgba(0, 0, 0, 0.3); border-radius: 2px;}
.dragging { user-select: none;}
.resizable-container .blockTitle,.resizable-container table { width: 100%;}

@media (max-width:770px) { 
	.resizable-container {flex-direction: column;}
	.resizer {display: none;}
	.resizable-container .resizable-panel {width: 100% !important;}
}