.categorybox { margin-top:20px; display:flex; z-index:1; }
.categorybox > .category-wrapper { display:flex; }
.categorybox > .category-wrapper > div { cursor:pointer; position:relative; height:40px; background:#eee; border-radius:5px 5px 0 0; padding:0 15px; border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #ccc; display:flex; align-items:center; gap:10px; }
.categorybox > .category-wrapper > div.on { background:#fff; }
.categorybox > .category-wrapper > div.on:before { content:""; position:absolute; bottom:-2px; left:-1px; background:#fff; border-left: 1px solid #ccc; width:100%; height:4px; }
.categorybox > .category-wrapper > div > i { display:none; }
.categorybox > .category-wrapper > div.on > i { display:flex; justify-content:center; align-items:center; }
.categorybox > button { position:relative; height:40px; background:#eee; border-radius:5px 5px 0 0; border-left:1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #ccc; display:flex; align-items:center;}

.jw-scrollbar { position:fixed; top:0; right:0; width:15px; height:100%; z-index:90; cursor:pointer; opacity:0.3; transition: opacity 0.2s; }
.jw-scrollbar .scrollbar { position:absolute; background:#adadad; width:6px; border-radius:4px; top:0; left:50%; transform:translateX(-50%);}
.jw-scrollbar:hover { opacity:1; }
.jw-scrollbar.on { opacity:1; }

.jw-checkbox { display:flex; --border-color:#222; cursor:pointer; }
.jw-checkbox input{ display:none; }
.jw-checkbox .icon{ display:inline-block; vertical-align:middle; cursor:pointer; }
.jw-checkbox .icon{ position:relative; width:20px; height:20px; border:1px solid var(--border-color); border-radius:3px; transition:background 0.1s ease;}
.jw-checkbox .icon::after{ content:''; position:absolute; top:-3px; left:7px; width:6px; height:16px; border-right:2px solid var(--border-color); border-bottom:2px solid var(--border-color); transform:rotate(45deg) scale(0); transition:all 0.3s ease; opacity:0; }
.jw-checkbox input:checked ~ .icon{ border-color:transparent; border:1px solid var(--border-color); }
.jw-checkbox input:checked ~ .icon::after{ opacity:1; transform:rotate(45deg) scale(1);}
.jw-checkbox .text{ margin-left:10px; color:#222222; }

.jw-radio { display:flex; align-items:center; cursor:pointer; }
.jw-radio input{ display:none; }
.jw-radio .icon{ display:inline-block; }
.jw-radio .icon{ position:relative; width:16px; height:16px; border:1px solid #CBCCD4; border-radius:50%; transition:all 0.1s ease;}
.jw-radio .icon::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:8px; height:8px; border-radius:50%; background:#3F51B5; transition:all 0.3s ease; opacity:0; }
.jw-radio input:checked ~ .icon{ border-color:transparent; border:1px solid #3F51B5; }
.jw-radio input:checked ~ .icon::after{ opacity:1; }
.jw-radio .text{ margin-left:10px; color:#666666; }

.jw-radio-type-A { display:flex; align-items:center; cursor:pointer; }
.jw-radio-type-A input{ display:none; }
.jw-radio-type-A .text{ color:#666666; }
.jw-radio-type-A input:checked ~ .text{ color:#ff0000; }

#inputFilebox { width:100%; display:flex; flex-direction:column; gap:5px; overflow:hidden; }
.inputFile { position:relative; display:flex; align-items:center; gap:10px; cursor:pointer; }
.inputFile > .value { flex:1; overflow:hidden; white-space:nowrap;  text-overflow:ellipsis;  word-break:break-all; padding:0 15px 0 10px; border: 1px solid #ccc; color:#a0a0a0; line-height:48px; font-size:12px; }
.inputFile > .jw-button { pointer-events: none; font-size:12px; }
.inputFile > .progress { position:absolute;  height:2px; background:#ff6600; left:0; bottom:0; }

.jw-color { position:relative; }
.jw-color input { display:none; }
.jw-color button { background:var(--bg); color:var(--color); width:100%; height:100%; display:flex; justify-content:center; align-items:center; }

.inputM{ position:relative; display:flex; align-items:center; width:100%; height:100%; }
.inputM > .box{ position:relative; width:100%; height:100%; display:flex; align-items:center; }
.inputM > .box > input{ flex:1; margin-left:10px; margin-right:10px; }
.inputM > .box > .text{ position:absolute; top:50%; transform:translateY(-50%); left:10px; pointer-events: none; transition: all 0.3s ease; color:#999; }
.inputM > .box > .text:after{ content:""; position:absolute; left:-5px; width:0; top:0; transform:translateY(-50%); height:4px; background:#fff; transition: all 0.3s ease; z-index:-1; }
.inputM > .box > .text > div { display:inline; padding:0 5px; }
.inputM > .box > .text > div span{ transition: all 0.3s ease; font-size:14px; }
.inputM > .box > input:focus ~ .text { top:0; font-size:12px; color:#000000; }
.inputM > .box > input:focus ~ .text span { opacity:0; }
.inputM > .box > input:valid ~ .text { top:0; font-size:12px; color:#000000; }
.inputM > .box > input:valid ~ .text span { opacity:0; }
.inputM > .box > input:focus ~ .text:after { top:50%; width:calc(100% + 10px); }
.inputM > .box > input:valid ~ .text:after { top:50%; width:calc(100% + 10px); }
.inputM > .box > input:read-only ~ .text { top:0; font-size:12px; color:#000000; }
.inputM > .box > input.on ~ .text { top:0; font-size:12px; color:#000000; }
.inputM > .box > input.on ~ .text span { opacity:0; }
.inputM > .box > input.on ~ .text:after { top:50%; width:calc(100% + 10px); }
.inputM > .box > textarea.on ~ .text { top:0; font-size:12px; color:#000000; }
.inputM > .box > textarea.on ~ .text span { opacity:0; }
.inputM > .box > textarea.on ~ .text:after { top:50%; width:calc(100% + 10px); }
.inputM > .box > textarea { padding:10px; } 
.inputM > .box > textarea:focus ~ .text { top:0; font-size:12px; color:#000000; }
.inputM > .box > textarea:focus ~ .text span { opacity:0; }
.inputM > .box > textarea:focus ~ .text:after { top:50%; width:100%; }
.inputM > .box > textarea.show ~ .text { top:0; font-size:12px; color:#000000; }
.inputM > .box > textarea.show ~ .text span { opacity:0; }
.inputM > .box > textarea:focus ~ .text:after { top:50%; width:calc(100% + 10px); }
.inputM > .box > textarea:valid ~ .text:after { top:50%; width:calc(100% + 10px); }
.inputM > .line{ position:absolute; width:calc(100% ); left:0; height:1px; bottom:-1px; display:flex; justify-content:center; align-items:center; }
.inputM > .line > div{ width:0%; height:100%; background:#ff6600; transition: width 0.3s ease; }
.inputM:focus-within > .line > div { width:100%; }

.selectbox { display:inline-block; position:relative; width:100%; height:100%; cursor:pointer; }
.selectbox > .select_styled { position: absolute; top:0; right:0; bottom:0; left: 0; background: #FFFFFF; color:#333333; border-radius:5px; display:flex; justify-content:flex-start; align-items:center; text-indent: 15px; transition: all 0.2s ease-in; }
.selectbox > .select_styled:after { content: ""; position: absolute; width:8px; height:8px; right:10px; top:calc(50% - 3px); border:1px solid transparent; transform:translateY(-50%) rotate(-45deg);border-color: transparent transparent #333333 #333333;transition: all 0.2s ease-in; }
.selectbox > .select_styled:hover { background: #FFFFFF; }
.selectbox > .select_styled:active, .select_styled.active { background: #FFFFFF; border-radius:5px 5px 0 0;}
.selectbox > .select_styled:active:after, .select_styled.active:after { margin-top:4px; transform:translateY(-50%) rotate(-225deg); }
.selectbox > .select_options { display: none;position: absolute; z-index:1; max-height:200px; overflow:auto; top:100%; right: 0; left: 0; margin: 0; padding: 0; background: #FFFFFF; border: 1px solid #eaeaea; }
.selectbox > .select_options li { margin: 0; padding: 7px 0; text-indent: 15px; transition: all 0.15s ease-in; color:#333333; }
.selectbox > .select_options li:not(last-child) { border-bottom: 1px solid #eaeaea; }
.selectbox > .select_options li:hover { background:#f8f8f8; }
.selectbox > .select_options li[rel="hide"] { display: none; }

.ic-close{ position:relative; width:24px; height:24px; cursor:pointer; display:flex; justify-content:center; align-items:center; transition-duration: 0.5s; }
.ic-close::after{ content:""; position:absolute; width:var(--line, 2px); height:100%; background: var(--color, #222); transform: rotate(45deg); }
.ic-close::before{ content:""; position:absolute; width:var(--line, 2px); height:100%; background: var(--color, #222); transform: rotate(-45deg); }
.ic-close:hover{ transform: rotate(360deg); }

.ic-hamberg { position:relative; width:var(--s, 30px); height:var(--s, 25px); cursor:pointer; }
.ic-hamberg > i { position:absolute; width:20px; height:2px; background:var(--color, #ccc); left:50%; transform:translate(-50%, -50%); transition: all 0.2s ease; }
.ic-hamberg > i:nth-child(1) { top:calc(0% + 5px); }
.ic-hamberg > i:nth-child(2) { top:50%; }
.ic-hamberg > i:nth-child(3) { top:calc(100% - 5px); }

.ic-hamberg.on > i:first-child{ top:50%; left:50%; transform:translate(-50%, -50%) rotate(45deg); }
.ic-hamberg.on > i:nth-child(2){ top:50%; left:50%; transform:translateX(-50%, -50%); opacity:0; }
.ic-hamberg.on > i:last-child{ top:50%; left:50%; transform:translate(-50%, -50%) rotate(-45deg); }

.ic-arrow { position:relative; cursor:pointer;}
.ic-arrow::after { content:""; position:absolute; top:-2px; width:100%; height:2px; background: var(--bg); border-radius:2px; transform: rotate(45deg); }
.ic-arrow::before { content:""; position:absolute; top:2.5px; width:100%; height:2px; background: var(--bg); border-radius:2px; transform: rotate(-45deg); }

.ic-arrow_left { position:relative; cursor:pointer;}
.ic-arrow_left::after { content:""; position:absolute; top:-3px; width:100%; height:2px; background: var(--bg); border-radius:2px; transform: rotate(-45deg); }
.ic-arrow_left::before { content:""; position:absolute; top:3px; width:100%; height:2px; background: var(--bg); border-radius:2px; transform: rotate(45deg); }


.loading { position:relative; width:100%; height:100%; display:flex; justify-content:center; align-items:center; color:#fe8130; font-size:10px; }
.loading  > div { position:absolute; width:80px; height:80px; display:flex; justify-content:center; align-items:center; } 
.loading::after{ content: ""; position:absolute; width:80px; height:80px; border-radius: 50%; border: 2px solid transparent; border-color: transparent #fe8130; animation: rotateloading 1.5s linear 0s infinite normal; }
@keyframes rotateloading { 0%{ transform: rotate(0deg); transform-origin: 50% 50%;} 100%{ transform: rotate(360deg); transform-origin: 50% 50%;} } 


.jw-button { --bgcolor:#1677FF; --fontcolor:#fff; position:relative; display:flex; justify-content:center; align-items:center; padding:0 15px; border-radius:5px; background:var(--bgcolor); color:var(--fontcolor); }

/*
.jw-button-orange { background:#FE8130; color:#fff; }
.jw-button-orange svg { fill:#fff; }  
.jw-button-red { background:#EB003B; color:#fff; }
.jw-button-blueline { background:transparent; border: 1px solid #4876EE; color:#4876EE; }
.jw-button-blueline svg { fill:#4876EE; }  
*/

/* ################### button */
/* 버튼 타입 정의 */
.jw-button-type-A { padding:0 10px; height:30px; border-radius:5px; }
.jw-button-type-B { padding:0 10px; height:30px; border-radius:5px; gap:20px; }
.jw-button-type-B svg { fill:#fff; }  
.jw-button-type-C { padding:0 10px; height:30px; border-radius:5px; box-shadow: 0 0 0 1px #fff inset, 0 0 0 1px var(--bgcolor); }

/* 버튼 색상 변경 */
.jw-button-color-blue { --bgcolor:#4876EE; --fontcolor:#fff; }
.jw-button-color-blue svg { fill:var(--fontcolor); }  
.jw-button-color-blueline { background:transparent; border: 1px solid var(--fontcolor); --fontcolor:#4876EE; }
.jw-button-color-blueline svg { fill:var(--fontcolor); }  
.jw-button-color-navy { --bgcolor:#0056b3; }
.jw-button-color-navyline { --bgcolor:transparent; border: 1px solid var(--fontcolor); --fontcolor:#0056b3; }
.jw-button-color-navyfill { --bgcolor:rgba(0, 86, 179, 0.2); --fontcolor:#0056b3;  }
.jw-button-color-green { --bgcolor:#00bb00; }
.jw-button-color-red { --bgcolor: #ff4d4f; }
.jw-button-color-redline { background:transparent; border: 1px solid var(--fontcolor); --fontcolor:#ff4d4f; }
.jw-button-color-redline svg { fill:var(--fontcolor); }  
.jw-button-color-yellow { --bgcolor: #ffcc00; }
.jw-button-color-graylight { --bgcolor: #f1f1f1; --fontcolor:#000; }
.jw-button-color-graylight svg { fill:var(--fontcolor); }  
.jw-button-color-gray { --bgcolor: #adb5bd; --fontcolor:#fff; }
.jw-button-color-gray svg { fill:var(--fontcolor); }  
.jw-button-color-grayfill { --bgcolor:#f4f4f4; --fontcolor:#666;  }
.jw-button-color-grayline { --bgcolor:transparent; border: 1px solid var(--fontcolor); --fontcolor:#666; }
.jw-button-color-black { --bgcolor:#222; --fontcolor:#fff; }
.jw-button-color-blackline { --bgcolor:transparent; border: 1px solid var(--fontcolor); --fontcolor:#222; }

/* 호버 효과 */
.jw-button:hover { opacity: 0.9; }

/* 비활성화 스타일 */
.jw-button:disabled { background-color: #d6d6d6; cursor: not-allowed; color: #a0a0a0; }

/* 버튼 효과 */
.jw-ripple-button { position:relative; overflow:hidden; transition: background 0.3s; } 
.jw-ripple-button:hover { background: #0056b3; } 
.jw-ripple-button .ripple { position:absolute; width:100px; height:100px; background:rgba(255, 255, 255, 0.6); border-radius:50%; transform:scale(0); animation:ripple-animation 0.6s ease-out; pointer-events: none; } 
@keyframes ripple-animation { to { transform: scale(4); opacity: 0; } }


/* ################### select*/
.jw-select { position:relative; display:inline-block; --select-height:35px; height:var(--select-height); cursor:pointer; }
.jw-select > .jw-selected { display:flex; align-items:center; width:100%; height:100%; padding-left:10px; border: 1px solid #ccc; }
.jw-select > .jw-selected:after { content: ""; position: absolute; width:5px; height:5px; right:10px; top:calc(50% - 3px); border:1px solid transparent; transform:translateY(-50%) rotate(-45deg); border-color: transparent transparent #333333 #333333; transition: all 0.2s ease-in; }
.jw-select > .jw-selected:hover { box-shadow: 0px 0px 10px rgba(0,0,0,0.1); }
.jw-select > .jw-selected.active { box-shadow: 0px 0px 10px rgba(0,0,0,0.1); }
.jw-select > .jw-selected.active:after { margin-top:4px; transform:translateY(-50%) rotate(-225deg); }
.jw-select > .jw-select-list { display:none; position:absolute; overflow:auto; top:100%; right:0; left:0; background:#FFFFFF; border: 1px solid #eaeaea; z-index:90; }
.jw-select > .jw-select-list > .jw-select-item { display:flex; align-items:center; width:100%; height:var(--select-height); padding:0 10px; transition: all 0.15s ease-in; color:#333333; white-space: nowrap; }
.jw-select > .jw-select-list > .jw-select-item:not(last-child) { border-bottom: 1px solid #eaeaea; }
.jw-select > .jw-select-list > .jw-select-item:hover { background:#f8f8f8; }
.jw-select > .jw-select-list > .jw-select-item[rel="hide"] { display: none; }

/* select style */
.jw-select:has(.jw-select-type-A) .jw-selected { border-radius:5px; }
.jw-select:has(.jw-select-type-A) .jw-selected.active { border-radius:5px 5px 0 0; }
.jw-select:has(.jw-select-type-B) .jw-selected { border-radius:18px; text-indent:20px; }
.jw-select:has(.jw-select-type-B) .jw-selected.active { border-radius:18px 18px 0 0; }
.jw-select:has(.jw-select-type-B) .jw-selected:after { right:20px; }
.jw-select:has(.jw-select-type-B) .jw-select-item { text-indent:20px; }

/* ################### input */
.jw-input { width:100%; height:100%; padding:0 10px; border: 1px solid #ccc; }

.jw-input-type-M { position:relative; display:inline-block; }
.jw-input-type-M > .wrap{ position:relative; width:100%; height:100%; display:inline-block; }
.jw-input-type-M > .wrap > input { flex:1; }
.jw-input-type-M > .wrap > .text { position:absolute; top:50%; transform:translateY(-50%); left:0; pointer-events: none; transition: all 0.3s ease; color:#999; user-select: none; }
.jw-input-type-M > .wrap > .text:after{ content:""; position:absolute; left:-5px; width:0; top:0; transform:translateY(-50%); height:4px; background:#fff; transition: all 0.3s ease; z-index:-1; }
.jw-input-type-M > .wrap > input:focus ~ .text { top:0; font-size:12px; color:#000000; }
.jw-input-type-M > .wrap > input:focus ~ .text span { opacity:0; }
.jw-input-type-M > .wrap > input:valid ~ .text { top:0; font-size:12px; color:#000000; }
.jw-input-type-M > .wrap > input:valid ~ .text span { opacity:0; }
.jw-input-type-M > .wrap > input:focus ~ .text:after { top:50%; width:calc(100% + 10px); }
.jw-input-type-M > .wrap > input:valid ~ .text:after { top:50%; width:calc(100% + 10px); }
.jw-input-type-M > .wrap > input.on ~ .text { top:0; font-size:12px; color:#000000; }
.jw-input-type-M > .wrap > input.on ~ .text span { opacity:0; }
.jw-input-type-M > .wrap > input.on ~ .text:after { top:50%; width:calc(100% + 10px); }
.jw-input-type-M > .line { position:absolute; width:100%; height:1px; left:0; bottom:0; background:#eee; display:flex; justify-content:center; align-items:center; }
.jw-input-type-M > .line > div{ width:0%; height:100%; background:#ff6600; transition: width 0.3s ease; }
.jw-input-type-M:focus-within > .line > div { width:100%; }

.jw-input-type-A { position:relative; display:inline-block; width:100%; height:100%; border: 1px solid #ccc; border-radius:5px; }
.jw-input-type-A > input { flex:1; padding:0 10px; }
.jw-input-type-A > .text { position:absolute; top:50%; transform:translateY(-50%); padding: 0 5px; left:5px; pointer-events: none; transition: all 0.3s ease; color:#999; user-select: none; }
.jw-input-type-A > input:focus ~ .text { top:0; font-size:12px; background: #fff; color:#000000; }
.jw-input-type-A > input:focus ~ .text span { opacity:0; }
.jw-input-type-A > input:valid ~ .text { top:0; font-size:12px; background: #fff; color:#000000; }
.jw-input-type-A > input:valid ~ .text span { opacity:0; }
.jw-input-type-A > input.on ~ .text { top:0; font-size:12px; background: #fff; color:#000000; }
.jw-input-type-A > input.on ~ .text span { opacity:0; }

.jw-fieldset-A { position:relative; border:1px solid #ccc; border-radius:5px; padding:10px 10px 10px 10px;  }
.jw-fieldset-A input { width:100%; }
.jw-fieldset-A legend { position: absolute; top:50%; transform:translateY(-50%); font-size:14px; padding: 0 5px; pointer-events: none; user-select: none; color:#ccc; transition: all 0.3s ease; }
.jw-fieldset-A:focus-within legend { top:-2px; font-size:12px; color:#000; background: #fff; }
.jw-fieldset-A.on legend { top:-2px; font-size:12px; color:#000; background:#fff; }

.jw-fieldset-B { position:relative; border:1px solid #ccc; border-radius:5px; padding:10px 10px 10px 10px; }
.jw-fieldset-B legend { position: absolute; top:50%; transform:translateY(-50%); font-size:14px; padding: 0 5px; pointer-events: none; user-select: none; color:#ccc; transition: all 0.3s ease; }
.jw-fieldset-B:focus-within legend { top:-2px; font-size:12px; color:#000; background: #fff; }
.jw-fieldset-B:focus-within { border:1px solid #ff4d4f; box-shadow: 0px 0px 5px rgba(0,0,0,0.1); }

.jw-fieldset-C { position:relative; border:1px solid #ccc; border-radius:5px; padding:10px 10px 10px 10px;  }
.jw-fieldset-C legend { position: absolute; top:-2px; transform:translateY(-50%); font-size:12px; padding: 0 5px; color:#000; background: #fff; pointer-events: none; user-select: none;  }

.jw-fieldset-M { position:relative; border:1px solid transparent; border-bottom-color:#CCCCCC; padding:5px 0; }
.jw-fieldset-M:after { content:""; position:absolute; width:0; height:1px; left:50%; bottom:-1px; transform:translateX(-50%); background:#ff0000; transition: all 0.3s ease; }
.jw-fieldset-M legend { position: absolute; top:50%; transform:translateY(-50%); font-size:14px; pointer-events: none; user-select: none; color:#ccc; transition: all 0.3s ease; }
.jw-fieldset-M:focus-within legend, input:not(:placeholder-shown) + legend { top:-2px; font-size:12px; color:#000; background: #fff; }
.jw-fieldset-M:focus-within:after { width: 100%; }

/* ################### Range */
.jw-range{ position:relative; --w:150px; --bg-star:#ff6600; width:var(--w); height:40px; }
.jw-range input { width:100%; height:100%; }
.jw-range > div { position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden; pointer-events: none; }
.jw-range > div > div { width:var(--w); }
.jw-range > div > div > i { width:30px; height:30px; display:flex; justify-content:center; align-items:center; font-size:30px; color:#eee; }
.jw-range > .range > div > i { color:var(--bg-star);}
.jw-range input[type=range] {-webkit-appearance:none; width:100%; height:100%; background:transparent; cursor:pointer; }
.jw-range input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; opacity:0; width:1px; height:1px; }

.jw-range-type-A { position:relative; --w:250px; --bg-star:#ff6600; width:var(--w); height:10px; display:flex; justify-content:center; align-items:center; }
.jw-range-type-A progress { position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:100%; background-color: #e0e0e0; border-radius:5px; overflow: hidden; appearance: none; pointer-events: none; }
.jw-range-type-A progress::-webkit-progress-bar { background: #e0e0e0; border-radius:5px; }
.jw-range-type-A progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #81c784); border-radius:5px; }
.jw-range-type-A progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #81c784); border-radius:5px; }
.jw-range-type-A input[type=range] {-webkit-appearance:none; width:100%; height:100%; background:transparent; cursor:pointer; }
.jw-range-type-A input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; opacity:0; width:1px; height:1px; }

.jw-range-type-B { width: 500px; position: relative; }
.jw-range-type-B .range-track { position: relative; height: 10px; background: #e0e0e0; border-radius: 5px; }
.jw-range-type-B .range-fill { position: absolute; height: 10px; background: #79a06b; border-radius:10px; }
.jw-range-type-B input[type="range"] { -webkit-appearance: none; appearance:none; position:absolute; width:100%; height:10px; background: transparent; pointer-events:none; }
.jw-range-type-B input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: #79a06b; border-radius: 50%; pointer-events:auto; position: relative; cursor: pointer; z-index:2; }
.jw-range-type-B input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: #79a06b; border-radius: 50%; cursor: pointer; }
.jw-range-type-B .range-labels { margin-top: 10px; text-align: center; font-size: 14px; color: #333; }

.jw-range-type-C { width: 500px; position: relative; }
.jw-range-type-C .range-track { position: relative; height: 10px; background: #e0e0e0; border-radius: 5px; }
.jw-range-type-C .range-fill { position: absolute; height: 10px; background: #79a06b; border-radius:10px; }
.jw-range-type-C input[type="range"] { -webkit-appearance: none; appearance:none; position:absolute; width:100%; height:10px; background: transparent; pointer-events:none; }
.jw-range-type-C input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: #79a06b; border-radius: 50%; pointer-events:auto; position: relative; cursor: pointer; z-index:2; }
.jw-range-type-C input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; background: #79a06b; border-radius: 50%; cursor: pointer; }
.jw-range-type-C .range-labels { margin-top: 10px; text-align: center; font-size: 14px; color: #333; }
.jw-range-type-C .label { position: absolute; top:20px; font-size:12px; color: #333; background: #eee; padding:2px 10px; border-radius:4px; box-shadow:0 1px 3px rgba(0, 0, 0, 0.2); transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.jw-range-type-C .label::after { content: ''; position: absolute; top:-5px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #eee; }

/* ################### progress */
.progress progress { width:300px; height:20px; appearance: none; -webkit-appearance: none; }
.progress progress::-webkit-progress-bar { background-color: #e0e0e0; border-radius: 10px; overflow: hidden; }
.progress progress::-webkit-progress-value { background: linear-gradient(90deg, #4caf50, #81c784); border-radius: 10px; }
.progress progress::-moz-progress-bar { background: linear-gradient(90deg, #4caf50, #81c784); border-radius: 10px; }

dialog { position:fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding:15px; border: 1px solid #ccc; border-radius: 10px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); width:300px; overflow:hidden; outline: none; }
dialog .dialog-container { width:100%; height:100%; display:flex; flex-direction:column; }
dialog h1 { padding-left:10px; font-size:16px; font-weight:bold; height:30px; display:flex; align-items:center; }
dialog .dialog-content { flex:1; padding:10px;}
dialog .dialog-controls { display:flex; justify-content:flex-end; gap:10px; }
dialog .dialog-controls button { height:30px; }



.jw-card-type-A { border: 1px solid #ddd; border-radius: 8px; padding: 16px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 300px; margin: 16px auto; }
.jw-card-type-A .card-title { font-size: 18px; font-weight: bold; margin-bottom: 8px; }
.jw-card-type-A .card-content { font-size: 14px; color: #555; }

.jw-card-type-B { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 300px; margin: 16px auto; }
.jw-card-type-B .card-img { width: 100%; height: auto; display: block; }
.jw-card-type-B .card-body { padding: 16px; }
.jw-card-type-B .card-title { font-size: 18px; font-weight: bold; margin-bottom: 8px; }
.jw-card-type-B .card-content { font-size: 14px; color: #555; }

.jw-card-type-C { border: 1px solid #ddd; border-radius: 8px; padding: 16px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 300px; margin: 16px auto; text-align: center; }
.jw-card-type-C .card-title { font-size: 18px; font-weight: bold; margin-bottom: 8px; }
.jw-card-type-C .card-content { font-size: 14px; color: #555; margin-bottom: 16px; }
.jw-card-type-C .card-button { padding: 8px 16px; background: #007BFF; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background 0.3s ease; }
.jw-card-type-C .card-button:hover { background: #0056b3; }

.jw-card-type-D-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding: 16px; }
.jw-card-type-D { border: 1px solid #ddd; border-radius: 8px; padding: 16px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }

.jw-card-type-E.animated { border: 1px solid #ddd; border-radius: 8px; padding: 16px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 300px; margin: 16px auto; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.jw-card-type-E.animated:hover { transform: scale(1.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); }

.jw-card-type-F { width: 300px; height: 200px; perspective: 1000px; margin: 16px auto; }
.jw-card-type-F .card-inner { width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; position: relative; }
.jw-card-type-F:hover .card-inner { transform: rotateY(180deg); }
.jw-card-type-F .card-front, .jw-card-type-F .card-back { width: 100%; height: 100%; backface-visibility: hidden; position: absolute; top: 0; left: 0; border: 1px solid #ddd; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.jw-card-type-F .card-front { background: #f0f0f0; }
.jw-card-type-F .card-back { background: #79a06b; transform: rotateY(180deg); color: white; }

.jw-card-type-G { width: 300px; height: 200px; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; display: flex; align-items: center; justify-content: center; text-align: center; margin: 16px auto; } 
.jw-card-type-G:hover { transform: scale(1.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); }

.jw-card-type-H { width: 300px; height: 200px; position: relative; overflow: hidden; border: 1px solid #ddd; border-radius: 8px; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 16px auto; } 
.jw-card-type-H .card-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 16px; transition: transform 0.3s; } 
.jw-card-type-H .card-extra { position: absolute; bottom: -100%; left: 0; width: 100%; height: 100%; padding: 16px; background: #f0f0f0; transition: transform 0.3s; } 
.jw-card-type-H:hover .card-content { transform: translateY(-100%); } 
.jw-card-type-H:hover .card-extra { transform: translateY(-100%); }


.jw-card-type-I { width: 300px; height: 200px; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); perspective: 1000px; transition: transform 0.1s; display: flex; align-items: center; justify-content: center; text-align: center; margin: 16px auto; } 
.jw-card-type-I:hover { transform: rotateY(10deg) rotateX(10deg); }

.jw-card-type-J { width: 300px; height: 200px; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); position: relative; display: flex; align-items: center; justify-content: center; text-align: center; margin: 16px auto; overflow: hidden; } 
.jw-card-type-J .card-text { transition: filter 0.3s; } 
.jw-card-type-J .card-button { position: absolute; bottom: 16px; opacity: 0; transition: opacity 0.3s; } 
.jw-card-type-J:hover .card-text { filter: blur(4px); } 
.jw-card-type-J:hover .card-button { opacity: 1; }

.jw-card-type-K { width: 300px; height: 200px; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); position: relative; display: flex; align-items: center; justify-content: center; text-align: center; margin: 16px auto; overflow: hidden; } 
.jw-card-type-K h3 { position: relative; transition: transform 0.1s; }




.jw-tableA { border-top: 1px solid #000; border-bottom: 1px solid #000; }
.jw-tableA th { height:40px; background:#f4f6f8; border-bottom: 1px solid #ccc; text-align:center; }
.jw-tableA td { height:40px; }
.jw-tableA tr:not(:last-child) td { border-bottom: 1px solid #ccc; }
.jw-tableA tr.hover:hover td { background:#F9F9F9; }
.jw-tableA .actions { width:150px; text-align:center; }
.jw-tableA .nodata { height:150px; text-align:center; } 

.jw-tableA .checklist { width:60px; text-align:center; }
.jw-tableA .num { width:80px; text-align:center; }
.jw-tableA .author { width:120px; text-align:center; }
.jw-tableA .date { width:100px; text-align:center; }
.jw-tableA .views { width:100px; text-align:center; }
.jw-tableA .title { cursor:pointer; }
.jw-tableA .title:hover { color:#ff0000; }
.jw-tableA .center { place-items:center; text-align:center }

.jw-tableB tr:last-child td, .jw-tableB tr:last-child th { border-bottom: 1px solid #000; }
.jw-tableB tr:first-child td, .jw-tableB tr:first-child th { border-top: 1px solid #000; }
.jw-tableB td { height:45px; border-bottom: 1px solid #E9E9E9; }
.jw-tableB td > div.field { position:relative; display:flex; align-items:center; height:100%; padding:5px 10px; }
.jw-tableB th { width:150px; background:#F5F5F5; text-align:center; font-weight:bold; color:#1D1D1D; border-bottom: 1px solid #E9E9E9; }
.jw-tableB input { background:#FAFAFA; border-radius:5px; padding:0 10px; }

.jw-table-header { display:flex; align-items:center; justify-content:space-between; }

.jw-pagebox { margin-top:20px; display:flex; justify-content:center; align-items:center; }
.jw-pagebox > .info { flex:1; font-size:10px; font-weight:300; color:#666666; }
.jw-pagebox > .info.right { display:flex; justify-content:flex-end; }
.jw-pagebox > .contents { flex:1; display:flex; justify-content:center; align-items:center; }
.jw-pagebox > .contents.off { display:none; }
.jw-pagebox > .contents > div { position:relative; display:flex; justify-content:center; align-items:center; cursor:pointer; }
.jw-pagebox > .contents > div.btn {  width:28px; height:28px; }
.jw-pagebox > .contents > div.btn > button { width:100%; height:100%; }
.jw-pagebox > .contents > div.btn.off { display:none; }
.jw-pagebox > .contents > .page { display:flex; justify-content:center; align-items:center; }
.jw-pagebox > .contents > .page > .p { width:28px; height:28px; display:flex; justify-content:center; align-items:center; cursor:pointer; }
.jw-pagebox > .contents > .page > .p.show { color:#4d7cff; font-size:16px; font-weight:bold; }
.jw-pagebox > .contents > div > span:last-child { position:absolute; }
.jw-pagebox > .contents button { position:relative; background:transparent; border-radius:50%; } 
.jw-pagebox > .contents button:hover { background:#eee; } 
.jw-pagebox .prev { position:relative; height:0; height:0; display:flex; justify-content:center; align-items:center; }
.jw-pagebox .prev:after { content:""; position:absolute; width:6px; height:6px; transform:rotate(135deg); border:1px solid transparent; border-color: transparent #000 #000 transparent;  }
.jw-pagebox .prev2 { position:relative; height:0; height:0; }
.jw-pagebox .prev2:after { content:""; position:absolute; left:15px; width:6px; height:6px;  transform:rotate(135deg); border:1px solid transparent; border-color: transparent #000 #000 transparent; }
.jw-pagebox .next { position:relative; height:0; height:0; display:flex; justify-content:center; align-items:center; }
.jw-pagebox .next:after { content:""; position:absolute; width:6px; height:6px; transform:rotate(-45deg); border:1px solid transparent; border-color: transparent #000 #000 transparent;  }
.jw-pagebox .next2 { position:relative; height:0; height:0; }
.jw-pagebox .next2:after { content:""; position:absolute; left:5px; width:6px; height:6px;  transform:rotate(-45deg); border:1px solid transparent; border-color: transparent #000 #000 transparent; }


.jw-layout-3col { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 16px; padding: 16px; } 
.jw-layout-3col .left-column, .jw-layout-3col .center-column, .jw-layout-3col .right-column { padding: 16px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 8px; text-align: center; }

.jw-layout-2col { display: grid; grid-template-columns: 1fr 3fr; gap: 16px; padding: 16px; } 
.jw-layout-2col .sidebar { background: #79a06b; color: #fff; padding: 16px; border-radius: 8px; } 
.jw-layout-2col .content { background: #f0f0f0; padding: 16px; border: 1px solid #ddd; border-radius: 8px; }

.jw-layout-header-sidebar { display: grid; grid-template-areas: "header header" "sidebar main"; grid-template-columns:200px 1fr; grid-template-rows:auto 1fr; height:300px; gap:10px; } 
.jw-layout-header-sidebar .header { grid-area:header; background: #007BFF; color: #fff; padding:16px; text-align: center; } 
.jw-layout-header-sidebar .sidebar { grid-area: sidebar; background: #f4f4f4; padding: 16px; } 
.jw-layout-header-sidebar .main { grid-area:main; background: #fff; padding: 16px; border: 1px solid #ddd; border-radius: 8px; }

.jw-layout-center { display: flex; justify-content: center; align-items: center; height:300px; background: #f8f9fa; } 
.jw-layout-center .content { padding: 16px; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }

.jw-layout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 16px; padding: 16px; } 
.jw-layout-grid .card { background: #fff; padding: 16px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; }

.jw-menu-horizontal { background: #007BFF; padding: 10px; } 
.jw-menu-horizontal .menu-list { display: flex; list-style: none; margin: 0; padding: 0; } 
.jw-menu-horizontal .menu-item { margin-right: 20px; } 
.jw-menu-horizontal .menu-item:last-child { margin-right: 0; } 
.jw-menu-horizontal .menu-item a { color: white; text-decoration: none; font-weight: bold; padding: 5px 10px; transition: background 0.3s; } 
.jw-menu-horizontal .menu-item a:hover { background: #0056b3; border-radius: 4px; }

.jw-menu-vertical { background: #f8f9fa; padding: 10px; border: 1px solid #ddd; border-radius: 8px; width: 200px; } 
.jw-menu-vertical .menu-list { list-style: none; margin: 0; padding: 0; } 
.jw-menu-vertical .menu-item { margin-bottom: 10px; } 
.jw-menu-vertical .menu-item:last-child { margin-bottom: 0; } 
.jw-menu-vertical .menu-item a { color: #333; text-decoration: none; font-weight: bold; padding: 5px 10px; display: block; border-radius: 4px; transition: background 0.3s, color 0.3s; } 
.jw-menu-vertical .menu-item a:hover { background: #007BFF; color: white; }

.jw-menu-dropdown { background: #f8f9fa; padding: 10px; border: 1px solid #ddd; border-radius: 8px; } 
.jw-menu-dropdown .menu-list { list-style: none; margin: 0; padding: 0; position: relative; display:flex; align-items:center; } 
.jw-menu-dropdown .menu-item { position: relative; } 
.jw-menu-dropdown .menu-item > a { color: #333; text-decoration: none; font-weight: bold; padding: 5px 10px; display: block; transition: background 0.3s; } 
.jw-menu-dropdown .menu-item:hover > a { background: #007BFF; color: white; border-radius: 4px; } 
.jw-menu-dropdown .submenu { list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0; display: none; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); min-width: 150px; z-index: 100; } 
.jw-menu-dropdown .menu-item:hover .submenu { display: block; } 
.jw-menu-dropdown .submenu li { padding: 0; } 
.jw-menu-dropdown .submenu li a { display: block; padding: 8px 12px; color: #333; text-decoration: none; transition: background 0.3s; } 
.jw-menu-dropdown .submenu li a:hover { background: #007BFF; color: white; border-radius: 4px; }

.jw-menu-dropdownB-header { --menu-height:80px; height:var(--menu-height); background:#f8f9fa; border: 1px solid #ddd; }
.jw-menu-dropdownB { position:relative; } 
.jw-menu-dropdownB:before { content:""; position:absolute; left:0; top:var(--menu-height); width:100%; height:calc(100% - var(--menu-height)); background:#fff; box-shadow: 0px 2px 5px rgba(0,0,0,0.1); } 
.jw-menu-dropdownB .menu-list { display:flex; gap:20px; } 
.jw-menu-dropdownB .menu-item { position: relative; } 
.jw-menu-dropdownB .logo { width:200px; }
.jw-menu-dropdownB .logo > div { width:100%; height:var(--menu-height); display:flex; justify-content:center; align-items:center; }
.jw-menu-dropdownB .info { flex:1; height:var(--menu-height); display:flex; justify-content:flex-end; align-items:center; padding-right:20px; }
.jw-menu-dropdownB .menu-list .menu { width:100%; height:var(--menu-height); display:flex; align-items:center; }
.jw-menu-dropdownB .menu-item > .menu > a { width:100%; height:30px; color:#333; text-decoration: none; font-weight: bold; padding:0 10px; transition:background 0.3s; display:flex; align-items:center; } 
.jw-menu-dropdownB .menu-item:hover > .menu > a { background:#007BFF; color: white; border-radius:4px; } 
.jw-menu-dropdownB .submenu { max-height:0; display: flex; flex-direction: column; overflow:hidden; } 
.jw-menu-dropdownB:hover .submenu { max-height:1000px; padding-bottom:20px; } 
.jw-menu-dropdownB .submenu li { padding: 5px 0; } 
.jw-menu-dropdownB .submenu li a { color: #333; text-decoration: none; padding: 5px 10px; border-radius: 4px; transition:background 0.3s; display: block; } 
.jw-menu-dropdownB .submenu li a:hover { background:#007BFF; color: white; }

.jw-search-container { background:#fff; border-radius:10px; padding:20px; border: 1px solid #ccc; display:flex; flex-direction:column; gap:10px; }
.jw-search-container .list { height:30px; display:flex; align-items:center; gap:10px; }
.jw-search-container .list input { max-width:150px; }
.jw-search-container .list .info { font-size:12px; }

.jw-info-box { display:flex; align-items:center; background:#F4f4f4; border-radius:5px; }
.jw-info-box > .name { height:100%; background:#3F51B5; color:#fff; border-radius:5px; display:flex; justify-content:center; align-items:center; padding:0 10px; font-size:12px; }
.jw-info-box > .value { height:100%; display:flex; justify-content:center; align-items:center; padding:0 20px; }



.jw-editor { background:white; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display:flex; flex-direction:column; }
.jw-editor .toolbar { padding:0 10px 1px 10px; display:flex; align-items:center; flex-wrap:wrap; gap:1px 20px; background:linear-gradient(to top, #ccc 1px, transparent 1px); background-size: 100% 36px; }
.jw-editor .toolbar .group { position:relative; height:35px; display:flex; align-items:center; gap:10px; }
.jw-editor .toolbar .group:not(:last-child):after { content:""; position:absolute; width:1px; height:20px; background:#ccc; right:-10px; top:50%; transform:translateY(-50%); }
.jw-editor .toolbar .jw-select > .jw-selected { border:0; --select-height:100%; }
.jw-editor .toolbar .editor-btn { background:#fff; min-width:30px; height:100%; display:flex; justify-content:center; align-items:center; }
.jw-editor .toolbar .inputFile > .text { font-size:12px; }
.jw-editor #editor { position:relative; flex:1; padding:20px; overflow-y:auto; }
.jw-editor .font-color { position:relative; font-size:16px; color:#000; font-weight:bold; text-shadow:0 0 1px rgba(0, 0, 0, 1); }
.jw-editor .background-color { position:relative; width:15px; height:15px; background:#000; }
.jw-editor .colorBox { position: absolute; top:100%; left:0; width:200px; display:flex; flex-wrap: wrap; gap:5px; padding: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); background:#fff; border: 1px solid #ccc; z-index:10; }
.jw-editor .colorBox button { width:15px; height:15px; border: 1px solid #ccc;}

.jw-editor #editor::-webkit-scrollbar { display:initial; width:10px; }
.jw-editor #editor::-webkit-scrollbar-track { border-radius:4px; background:#fff; }
.jw-editor #editor::-webkit-scrollbar-thumb { background:#888; border-radius:5px; border:3px solid white; }

.jw-editor .ql-editor { width:100%; height:100%; outline:none; }

.jw-editor  #background-color { width:20px; height:25px; cursor:pointer; }
.jw-editor em { font-style: italic; }
.ql-editor .ql-align-center { text-align: center; }
.ql-editor .ql-align-right { text-align: right; }
.ql-editor ol, .ql-editor ul { list-style: inside; }
.ql-editor ul li { list-style-type: decimal; }
.ql-editor ol li[data-list=ordered] { list-style-type: disc; }
.ql-editor ol li[data-list=bullet] { list-style-type: decimal; }
.jw-editor select { display:inline-block; appearance: auto; }

.jw-editor .custom-image-class.ql-align-center { display:flex; place-self:center; }
.jw-editor .custom-image-class.ql-align-right { display:flex; place-self:end; }