/* 두 곳 이상 사용하는 css는 components.css에 작성됨 */
/* 한 곳만 사용하는 css 는 main.css 파일에 작성됨 */


:root {
    /* 기본 색상 */
    --default-color1: #FFE090;
    --default-color2: #FFB800;
    --default-color3: #FF9600;
    --default-color4: #FFFAEE;
    --default-color5: #FFAA00;

    --disable-color1: #DDDDDD;

    --blue-color1: #A0C2FF;
    --blue-color2: #6098FF;
    --blue-color3: #31A5FF;
    --txt-color1: #FFFFFF;
    --txt-color2: #E0E0E0;
    --txt-color3: #BDBDBD;
    --txt-color4: #828282;
    --txt-color5: #444444;
    --txt-color6: #666666;
    --txt-color7: #CCCCCC;
    --txt-color8: #999999;
    --txt-color9: #333333;
    --txt-color10: #F4F4F4;
    --txt-color2gray: #F8F8F8;
    --bg-color2b: #36383b;
    --bg-color3y: #FFFDEB;
    --bg-color4r: #FFF2F3;
    --bg-color6p: #F6F1FF;
    --red-color2: #FF8E94;
    --red-color3: #FF5A78;
    --red-color4: #FF6969;
    --red-color5: #FF1100;
    --yellow-color2: #FFB800;
    --yellow-color3: #FF9600;
    --green-color3: #59CB19;
    --green-color4: #09BF06;
    --green-color5: #00789D;
    --green-color6: #03CF5D;
    --green-color7: #339900;
    --green-color8: #BDD669;
    --green-color9: #F0FEF1;
    --purple-color2: #D885FF;
    --bg-color5gr: #F5FFD8;
    --olive-color1: #CBC41E;
    --olive-color2: #849900;
    --orange-color1: #FF8400;
    --pink-color1: #FF8888;
    --pink-color2: #FFC7C7;
    --pink-color3: #FFF9F9;
    --gray-color1: #999999;
    --lightgray-color1: #FAFAFA;
    --lightgray-color2: #EAEAEA;
    --purple-color3: #AF72FF;
    --yellow-color4: #FFE092;
    /* 보카레벨별 color */
    --voca-500: #FFDA1B;
    --voca-1000: #FFB800;
    --voca-1500: #FF7200;
    --voca-2000: #F42D51;
    --voca-2500: #FF5A78;
    --voca-3000: #B230E2;
    --voca-3500: #8C00E1;
    --voca-4000: #1400FF;
    --voca-4500: #005AFF;
    --voca-5000: #6098FF;
    --voca-5500: #04A427;
    --voca-6000: #59CB19;
    
    /* 북레벨별 color ( DB 에서 가져와야 하므로 header.php 에서 선언됨) */
    --book-pa: #CEDB82;
    --book-pb: #CCD78B;
    --book-pc: #A9BC38;
    --book-pd: #A9BC38;
    --book-kpre:#ff9b9b;
    --book-ka:#ff8383;
    --book-kb:#ff7575;
    --book-kc:#ff6666;
    --book-kd:#ff5858;
    --book-1a:#ffae00;
    --book-1b:#ff9600;
    --book-1c:#ff8400;
    --book-1d:#ff7200;
    --book-2a:#abea75;
    --book-2b:#98d568;
    --book-2c:#85bf5b;
    --book-2d:#72aa4e;
    --book-3a:#3dc1f8;
    --book-3b:#36abf1;
    --book-3c:#3096ea;
    --book-3d:#2980e3;
    --book-4a:#eb3fb0;
    --book-4b:#d6389d;
    --book-4c:#c23189;
    --book-4d:#ad2a76;
    --book-5a: #3ed9ee;
    --book-5b: #20c7de;
    --book-5c: #13b1d3;
    --book-5d: #0498d7;
    --book-6a: #e7aa50;
    --book-6b: #d18a00;
    --book-6c: #bd7d00;
    --book-6d: #945000;
}

html {
    font-size: 10px; /* 기본 폰트사이즈 */
    min-height: 100%;
    height: 100%;
}
/* @media(max-width: 768px) {
    html { font-size: 9px; }
}
@media(max-width: 576) {
    html { font-size: 8px; }
} */

body {
    font-family: 'Pretendard';  
    font-size: 1.4rem; 
    min-height: 100%;
    height: 100%;
    overflow-y: scroll;
}

a{
    text-decoration: none;
    color:inherit;
}

.tmoney-bold {
    font-family: 'TmoneyRoundWindExtraBold';
}
.tmoney-reg {
    font-family: 'TmoneyRoundWindRegular';

}

.tooltip-inner
{ font-size: 14px; }

textarea
{ resize: none; }

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

ul > li { list-style: none; }
/* img { max-width :100%; } */

/* break-point start */
@media ( max-width: 576px ) {
    .show-m-block { display: none !important; }
    .show-m-flex { display: none !important; }
    .show-m-table-cell { display: none !important; }
    .show-m-table-column { display: none !important; }
    .show-m-inline { display: none !important; }
    .show-m-table-header-group { display: none !important; }
    .show-m-table-column-group { display: none !important; }
    .hide-m-block { display: block !important; }
    .hide-m-flex { display: flex !important; }
    .hide-m-table-cell { display: table-cell !important; }
    .hide-m-table-column { display: table-column !important; }
    .hide-m-inline { display: inline !important; }
    .hide-m-table-header-group { display: table-header-group !important; }
    .hide-m-table-column-group { display: table-column-group !important; }
}

@media ( max-width: 868px ) {
/*
@media ( max-width: 768px ) {
*/
    .show-tb-block { display: none !important; }
    .show-tb-flex { display: none !important; }
    .show-tb-table-cell { display: none !important; }
    .show-tb-table-column { display: none !important; }
    .show-tb-inline { display: none !important; }
    .show-tb-table-header-group { display: none !important; }
    .show-tb-table-column-group { display: none !important; }
    .hide-tb-block { display: block !important; }
    .hide-tb-flex { display: flex !important; }
    .hide-tb-table-cell { display: table-cell !important; }
    .hide-tb-table-column { display: table-column !important; }
    .hide-tb-inline { display: inline !important; }
    .hide-tb-table-header-group { display: none !important; }
    .hide-tb-table-column-group { display: none !important; }
}

@media ( max-width: 1200px ) {
    .show-pc-block { display: none !important; }
    .show-pc-flex { display: none !important; }
    .show-pc-table-cell { display: none !important; }
    .show-pc-table-column { display: none !important; }
    .show-pc-inline { display: none !important; }
    .show-pc-table-header-group { display: table-header-group !important; }
    .show-pc-table-column-group { display: table-column-group !important; }
    .hide-pc-block { display: block !important; }
    .hide-pc-flex { display: flex !important; }
    .hide-pc-table-cell { display: table-cell !important; }
    .hide-pc-table-column { display: table-column !important; }
    .hide-pc-inline { display: inline !important; }
    .hide-pc-table-header-group { display: none !important; }
    .hide-pc-table-column-group { display: none !important; }
}

@media ( min-width: 576px ) {
    .show-m-block { display: block !important; }
    .show-m-flex { display: flex !important; }
    .show-m-table-cell { display: table-cell !important; }
    .show-m-table-column { display: table-column !important; }
    .show-m-inline { display: inline !important; }
    .show-m-table-header-group { display: table-header-group !important; }
    .show-m-table-column-group { display: table-column-group !important; }
    .hide-m-block { display: none !important; }
    .hide-m-flex { display: none !important; }
    .hide-m-table-cell { display: none !important; }
    .hide-m-table-column { display: none !important; }
    .hide-m-inline { display: none !important; }
    .hide-m-table-header-group { display: none !important; }
    .hide-m-table-column-group { display: none !important; }
}
/*
@media ( min-width: 768px ) {
*/
@media ( min-width: 868px ) {
    .show-tb-block { display: block !important; }
    .show-tb-flex { display: flex !important; }
    .show-tb-table-cell { display: table-cell !important; }
    .show-tb-table-column { display: table-column !important; }
    .show-tb-inline { display: inline !important; }
    .show-tb-table-header-group { display: table-header-group !important; }
    .show-tb-table-column-group { display: table-column-group !important; }
    .hide-tb-block { display: none !important; }
    .hide-tb-flex { display: none !important; }
    .hide-tb-table-cell { display: none !important; }
    .hide-tb-table-column { display: none !important; }
    .hide-tb-inline { display: none !important; }
    .hide-tb-table-header-group { display: none !important; }
    .hide-tb-table-column-group { display: none !important; }
}

@media ( min-width: 1200px ) {
    .show-pc-block { display: block !important; }
    .show-pc-flex { display: flex !important; }
    .show-pc-table-cell { display: table-cell !important; }
    .show-pc-table-column { display: table-column !important; }
    .show-pc-inline { display: inline !important; }
    .show-pc-table-header-group { display: table-header-group !important; }
    .show-pc-table-column-group { display: table-column-group !important; }
    .hide-pc-block { display: none !important; }
    .hide-pc-flex { display: none !important; }
    .hide-pc-table-cell { display: none !important; }
    .hide-pc-table-column { display: none !important; }
    .hide-pc-inline { display: none !important; }
    .hide-pc-table-header-group { display: none !important; }
    .hide-pc-table-column-group { display: none !important; }
}
/* break-point end */




/* hs-default */
.hs-text-default1 { color: var(--default-color1);}
.hs-text-default2 { color: var(--default-color2);}
.hs-text-default3 { color: var(--default-color3);}
.hs-text-default4 { color: var(--default-color4);}
.hs-text-default5 { color: var(--default-color5);}


.hs-border-default1 { border-color: var(--default-color1); }
.hs-border-default2 { border-color: var(--default-color2); }
.hs-border-default3 { border-color: var(--default-color3); }
.hs-border-default4 { border-color: var(--default-color4); }

.hs-default-width { max-width: 1200px; width: 100%; }
@media (max-width: 1200px) {
    .hs-default-width { padding: 0rem 2rem; }
}
.hs-classroom-width { max-width: 1280px; width: 100%; padding: 0rem 2rem;}
@media(max-width: 576px) {
    .hs-classroom-width { padding: 0rem 1rem;}
}
.hs-default-left
{ max-width: 330px; flex-grow: 2; }
.hs-default-right
{ max-width: 330px; flex-grow: 1; }


/* theme  뭔가 많긴 한데 패턴은 단순함*/
.theme-hs1 { background-color: var(--default-color1); border-color: var(--default-color1); color: var(--txt-color1); }
.theme-hs1-outline { border-color: var(--default-color1); color: var(--default-color1); background-color: transparent; }
.theme-hs2 { background-color: var(--default-color2); border-color: var(--default-color2); color: var(--txt-color1); }
.theme-hs2-outline { border-color: var(--default-color2); color: var(--default-color2); background-color: transparent; }
.theme-hs3 { background-color: var(--default-color3); border-color: var(--default-color3); color: var(--txt-color1); }
.theme-hs3-outline { border-color: var(--default-color3); color: var(--default-color3); background-color: transparent; }
.theme-hs4 { background-color: var(--default-color4); border-color: var(--default-color4); color: var(--txt-color1); }
.theme-hs4-outline { border-color: var(--default-color4); color: var(--default-color4); background-color: transparent; }

.theme-ts { background-color: var(--blue-color3); border-color: var(--blue-color3); color: var(--txt-color1); }
.theme-ts-outline { border-color: var(--blue-color3); color: var(--blue-color3); background-color: transparent; }

.theme-naver { background-color: var(--green-color6); border-color: var(--green-color6); color: var(--txt-color1); }
.theme-naver-outline { border-color: var(--green-color6); color: var(--green-color6); background-color: transparent; }

.theme-none { background-color: var(--txt-color5); border-color: var(--txt-color5); color: var(--txt-color1); }
.theme-none-outline { border-color: var(--txt-color5); color: var(--txt-color5); background-color: transparent; }

.theme-pink { background-color: var(--pink-color1); border-color: var(--pink-color1); color: var(--txt-color1); }
.theme-pink-outline { border-color: var(--pink-color1); color: var(--pink-color1); background-color: transparent; }

.theme-gray { background-color: var(--gray-color1); border-color: var(--gray-color1); color: var(--txt-color1); }
.theme-gray-outline { border-color: var(--gray-color1); color: var(--gray-color1); background-color: transparent; }

.theme-lightgray { background-color: var(--lightgray-color1); border-color: var(--lightgray-color1); color: var(--txt-color1); }
.theme-lightgray-outline { border-color: var(--lightgray-color1); color: var(--lightgray-color1); background-color: transparent; }

.theme-purple3 { background-color: var(--purple-color3); border-color: var(--purple-color3); color: var(--txt-color1); }
.theme-purple3-outline { border-color: var(--purple-color3); color: var(--purple-color3); background-color: transparent; }

.theme-yellow4 { background-color: var(--yellow-color4); border-color: var(--yellow-color4); color: var(--txt-color1); }
.theme-yellow4-outline { border-color: var(--yellow-color4); color: var(--yellow-color4); background-color: transparent; }

.theme-blue3 { background-color: var(--blue-color3); border-color: var(--blue-color3); color: var(--txt-color1); }
.theme-blue3-outline { border-color: var(--blue-color3); color: var(--blue-color3); background-color: transparent; }

.theme-red { background-color: var(--red-color3); border-color: var(--red-color3); color: var(--txt-color1); }
.theme-red-outline { border-color: var(--red-color3); color: var(--red-color3); background-color: transparent; }

.theme-red4 { background-color: var(--red-color4); border-color: var(--red-color4); color: var(--txt-color1); }
.theme-red4-outline { border-color: var(--red-color4); color: var(--red-color4); background-color: transparent; }

.theme-disable { background-color: var(--disable-color1); border-color: var(--disable-color1); color: var(--txt-color1); }
.theme-disable-outline { border-color: var(--disable-color1); color: var(--disable-color1); background-color: transparent; }

.theme-kpre { background-color: var(--book-kpre); border-color: var(--book-kpre); color: var(--txt-color1); }
.theme-kpre-outline { border-color: var(--book-kpre); color: var(--book-kpre); background-color: transparent; }

.theme-pa { background-color: var(--book-pa); border-color: var(--book-pa); color: var(--txt-color1); }
.theme-pa-outline { border-color: var(--book-pa); color: var(--book-pa); background-color: transparent; }

.theme-pb { background-color: var(--book-pb); border-color: var(--book-pb); color: var(--txt-color1); }
.theme-pb-outline { border-color: var(--book-pb); color: var(--book-pb); background-color: transparent; }

.theme-pc { background-color: var(--book-pc); border-color: var(--book-pc); color: var(--txt-color1); }
.theme-pc-outline { border-color: var(--book-pc); color: var(--book-pc); background-color: transparent; }

.theme-pd { background-color: var(--book-pd); border-color: var(--book-pd); color: var(--txt-color1); }
.theme-pd-outline { border-color: var(--book-pd); color: var(--book-pd); background-color: transparent; }

.theme-ka { background-color: var(--book-ka); border-color: var(--book-ka); color: var(--txt-color1); }
.theme-ka-outline { border-color: var(--book-ka); color: var(--book-ka); background-color: transparent; }

.theme-kb { background-color: var(--book-kb); border-color: var(--book-kb); color: var(--txt-color1); }
.theme-kb-outline { border-color: var(--book-kb); color: var(--book-kb); background-color: transparent; }

.theme-kc { background-color: var(--book-kc); border-color: var(--book-kc); color: var(--txt-color1); }
.theme-kc-outline { border-color: var(--book-kc); color: var(--book-kc); background-color: transparent; }

.theme-kd { background-color: var(--book-kd); border-color: var(--book-kd); color: var(--txt-color1); }
.theme-kd-outline { border-color: var(--book-kd); color: var(--book-kd); background-color: transparent; }

.theme-1a { background-color: var(--book-1a); border-color: var(--book-1a); color: var(--txt-color1); }
.theme-1a-outline { border-color: var(--book-1a); color: var(--book-1a); background-color: transparent; }

.theme-1b { background-color: var(--book-1b); border-color: var(--book-1b); color: var(--txt-color1); }
.theme-1b-outline { border-color: var(--book-1b); color: var(--book-1b); background-color: transparent; }

.theme-1c { background-color: var(--book-1c); border-color: var(--book-1c); color: var(--txt-color1); }
.theme-1c-outline { border-color: var(--book-1c); color: var(--book-1c); background-color: transparent; }

.theme-1d { background-color: var(--book-1d); border-color: var(--book-1d); color: var(--txt-color1); }
.theme-1d-outline { border-color: var(--book-1d); color: var(--book-1d); background-color: transparent; }

.theme-2a { background-color: var(--book-2a); border-color: var(--book-2a); color: var(--txt-color1); }
.theme-2a-outline { border-color: var(--book-2a); color: var(--book-2a); background-color: transparent; }

.theme-2b { background-color: var(--book-2b); border-color: var(--book-2b); color: var(--txt-color1); }
.theme-2b-outline { border-color: var(--book-2b); color: var(--book-2b); background-color: transparent; }

.theme-2c { background-color: var(--book-2c); border-color: var(--book-2c); color: var(--txt-color1); }
.theme-2c-outline { border-color: var(--book-2c); color: var(--book-2c); background-color: transparent; }

.theme-2d { background-color: var(--book-2d); border-color: var(--book-2d); color: var(--txt-color1); }
.theme-2d-outline { border-color: var(--book-2d); color: var(--book-2d); background-color: transparent; }

.theme-3a { background-color: var(--book-3a); border-color: var(--book-3a); color: var(--txt-color1); }
.theme-3a-outline { border-color: var(--book-3a); color: var(--book-3a); background-color: transparent; }

.theme-3b { background-color: var(--book-3b); border-color: var(--book-3b); color: var(--txt-color1); }
.theme-3b-outline { border-color: var(--book-3b); color: var(--book-3b); background-color: transparent; }

.theme-3c { background-color: var(--book-3c); border-color: var(--book-3c); color: var(--txt-color1); }
.theme-3c-outline { border-color: var(--book-3c); color: var(--book-3c); background-color: transparent; }

.theme-3d { background-color: var(--book-3d); border-color: var(--book-3d); color: var(--txt-color1); }
.theme-3d-outline { border-color: var(--book-3d); color: var(--book-3d); background-color: transparent; }

.theme-4a { background-color: var(--book-4a); border-color: var(--book-4a); color: var(--txt-color1); }
.theme-4a-outline { border-color: var(--book-4a); color: var(--book-4a); background-color: transparent; }

.theme-4b { background-color: var(--book-4b); border-color: var(--book-4b); color: var(--txt-color1); }
.theme-4b-outline { border-color: var(--book-4b); color: var(--book-4b); background-color: transparent; }

.theme-4c { background-color: var(--book-4c); border-color: var(--book-4c); color: var(--txt-color1); }
.theme-4c-outline { border-color: var(--book-4c); color: var(--book-4c); background-color: transparent; }

.theme-4d { background-color: var(--book-4d); border-color: var(--book-4d); color: var(--txt-color1); }
.theme-4d-outline { border-color: var(--book-4d); color: var(--book-4d); background-color: transparent; }

.theme-5a { background-color: var(--book-5a); border-color: var(--book-5a); color: var(--txt-color1); }
.theme-5a-outline { border-color: var(--book-5a); color: var(--book-5a); background-color: transparent; }

.theme-5b { background-color: var(--book-5b); border-color: var(--book-5b); color: var(--txt-color1); }
.theme-5b-outline { border-color: var(--book-5b); color: var(--book-5b); background-color: transparent; }

.theme-5c { background-color: var(--book-5c); border-color: var(--book-5c); color: var(--txt-color1); }
.theme-5c-outline { border-color: var(--book-5c); color: var(--book-5c); background-color: transparent; }

.theme-5d { background-color: var(--book-5d); border-color: var(--book-5d); color: var(--txt-color1); }
.theme-5d-outline { border-color: var(--book-5d); color: var(--book-5d); background-color: transparent; }

.theme-6a { background-color: var(--book-6a); border-color: var(--book-6a); color: var(--txt-color1); }
.theme-6a-outline { border-color: var(--book-6a); color: var(--book-6a); background-color: transparent; }

.theme-6b { background-color: var(--book-6b); border-color: var(--book-6b); color: var(--txt-color1); }
.theme-6b-outline { border-color: var(--book-6b); color: var(--book-6b); background-color: transparent; }

.theme-6c { background-color: var(--book-6c); border-color: var(--book-6c); color: var(--txt-color1); }
.theme-6c-outline { border-color: var(--book-6c); color: var(--book-6c); background-color: transparent; }

.theme-6d { background-color: var(--book-6d); border-color: var(--book-6d); color: var(--txt-color1); }
.theme-6d-outline { border-color: var(--book-6d); color: var(--book-6d); background-color: transparent; }




/* text */
.text-color1 { color: var(--txt-color1) !important; }
.text-color2 { color: var(--txt-color2) !important; }
.text-color3 { color: var(--txt-color3) !important; }
.text-color4 { color: var(--txt-color4) !important; }
.text-color4 { color: var(--txt-color4) !important; }
.text-color5 { color: var(--txt-color5) !important; }
.text-color6 { color: var(--txt-color6) !important; }
.text-color7 { color: var(--txt-color7) !important; }
.text-color8 { color: var(--txt-color8) !important; }
.text-color9 { color: var(--txt-color9) !important; }

.text-pa { color: var(--book-pa); }
.text-pb { color: var(--book-pb); }
.text-pc { color: var(--book-pc); }
.text-pd { color: var(--book-pd); }
.text-1a { color: var(--book-1a); }
.text-1b { color: var(--book-1b); }
.text-1c { color: var(--book-1c); }
.text-1d { color: var(--book-1d); }
.text-2a { color: var(--book-2a); }
.text-2b { color: var(--book-2b); }
.text-2c { color: var(--book-2c); }
.text-2d { color: var(--book-2d); }
.text-3a { color: var(--book-3a); }
.text-3b { color: var(--book-3b); }
.text-3c { color: var(--book-3c); }
.text-3d { color: var(--book-3d); }
.text-4a { color: var(--book-4a); }
.text-4b { color: var(--book-4b); }
.text-4c { color: var(--book-4c); }
.text-4d { color: var(--book-4d); }
.text-5a { color: var(--book-5a); }
.text-5b { color: var(--book-5b); }
.text-5c { color: var(--book-5c); }
.text-5d { color: var(--book-5d); }
.text-6a { color: var(--book-6a); }
.text-6b { color: var(--book-6b); }
.text-6c { color: var(--book-6c); }
.text-6d { color: var(--book-6d); }

/* background */
.hs-bg-default1 { background-color: var(--default-color1) !important; }
.hs-bg-default2 { background-color: var(--default-color2) !important; }
.hs-bg-default3 { background-color: var(--default-color3) !important; }
.hs-bg-default4 { background-color: var(--default-color4) !important; }

.hs-bg-lightgray { background-color: var(--lightgray-color1) !important; }
.hs-bg-white { background-color: var(--txt-color1) !important; }


/* cursor */
.cursor-pointer { cursor: pointer; }

/* hs width fixed */
.hs-wf-5 { width: 5px; }
.hs-wf-10 { width: 10px; }
.hs-wf-15 { width: 15px; }
.hs-wf-20 { width: 20px; }
.hs-wf-25 { width: 25px; }
.hs-wf-30 { width: 30px; }
.hs-wf-35 { width: 35px; }
.hs-wf-40 { width: 40px; }
.hs-wf-45 { width: 45px; }
.hs-wf-50 { width: 50px; }
.hs-wf-55 { width: 55px; }
.hs-wf-60 { width: 60px; }
.hs-wf-65 { width: 65px; }
.hs-wf-70 { width: 70px; }
.hs-wf-75 { width: 75px; }
.hs-wf-80 { width: 80px; }
.hs-wf-85 { width: 85px; }
.hs-wf-90 { width: 90px; }
.hs-wf-95 { width: 95px; }
.hs-wf-100 { width: 100px; }
.hs-wf-105 { width: 105px; }
.hs-wf-110 { width: 110px; }
.hs-wf-115 { width: 115px; }
.hs-wf-120 { width: 120px; }
.hs-wf-125 { width: 125px; }
.hs-wf-130 { width: 130px; }
.hs-wf-135 { width: 135px; }
.hs-wf-140 { width: 140px; }
.hs-wf-145 { width: 145px; }
.hs-wf-150 { width: 150px; }
.hs-wf-155 { width: 155px; }
.hs-wf-160 { width: 160px; }
.hs-wf-165 { width: 165px; }
.hs-wf-170 { width: 170px; }
.hs-wf-175 { width: 175px; }
.hs-wf-180 { width: 180px; }
.hs-wf-185 { width: 185px; }
.hs-wf-190 { width: 190px; }
.hs-wf-195 { width: 195px; }
.hs-wf-200 { width: 200px; }
.hs-wf-240 { width: 240px; }
.hs-wf-300 { width: 300px; }
.hs-wf-400 { width: 400px; }
.hs-wf-500 { width: 500px; }
.hs-wf-600 { width: 600px; }
.hs-wf-700 { width: 700px; }
.hs-wf-800 { width: 800px; }


/* hs width percent*/
.hs-w-5 { width: 5%; }
.hs-w-10 { width: 10%; }
.hs-w-15 { width: 15%; }
.hs-w-20 { width: 20%; }
.hs-w-25 { width: 25%; }
.hs-w-30 { width: 30%; }
.hs-w-33 { width: 30%; }
.hs-w-35 { width: 35%; }
.hs-w-40 { width: 40%; }
.hs-w-45 { width: 45%; }
.hs-w-50 { width: 50%; }
.hs-w-55 { width: 55%; }
.hs-w-60 { width: 60%; }
.hs-w-65 { width: 65%; }
.hs-w-70 { width: 70%; }
.hs-w-75 { width: 75%; }
.hs-w-80 { width: 80%; }
.hs-w-85 { width: 85%; }
.hs-w-90 { width: 90%; }
.hs-w-95 { width: 95%; }
.hs-w-100 { width: 100%; }

/* hs height percent */
.hs-h-5 { height: 5%; }
.hs-h-10 { height: 10%; }
.hs-h-15 { height: 15%; }
.hs-h-20 { height: 20%; }
.hs-h-25 { height: 25%; }
.hs-h-30 { height: 30%; }
.hs-h-35 { height: 35%; }
.hs-h-40 { height: 40%; }
.hs-h-45 { height: 45%; }
.hs-h-50 { height: 50%; }
.hs-h-55 { height: 55%; }
.hs-h-60 { height: 60%; }
.hs-h-65 { height: 65%; }
.hs-h-70 { height: 70%; }
.hs-h-75 { height: 75%; }
.hs-h-80 { height: 80%; }
.hs-h-85 { height: 85%; }
.hs-h-90 { height: 90%; }
.hs-h-95 { height: 95%; }
.hs-h-100 { height: 100%; }

/*hs max-width precent */
.hs-mw-5 { max-width: 5%; }
.hs-mw-10 { max-width: 10%; }
.hs-mw-15 { max-width: 15%; }
.hs-mw-20 { max-width: 20%; }
.hs-mw-25 { max-width: 25%; }
.hs-mw-30 { max-width: 30%; }
.hs-mw-33 { max-width: 30%; }
.hs-mw-35 { max-width: 35%; }
.hs-mw-40 { max-width: 40%; }
.hs-mw-45 { max-width: 45%; }
.hs-mw-50 { max-width: 50%; }
.hs-mw-55 { max-width: 55%; }
.hs-mw-60 { max-width: 60%; }
.hs-mw-65 { max-width: 65%; }
.hs-mw-70 { max-width: 70%; }
.hs-mw-75 { max-width: 75%; }
.hs-mw-80 { max-width: 80%; }
.hs-mw-85 { max-width: 85%; }
.hs-mw-90 { max-width: 90%; }
.hs-mw-95 { max-width: 95%; }
.hs-mw-100 { max-width: 100%; }

/*hs max-height precent */
.hs-mh-5 { max-height: 5%; }
.hs-mh-10 { max-height: 10%; }
.hs-mh-15 { max-height: 15%; }
.hs-mh-20 { max-height: 20%; }
.hs-mh-25 { max-height: 25%; }
.hs-mh-30 { max-height: 30%; }
.hs-mh-33 { max-height: 30%; }
.hs-mh-35 { max-height: 35%; }
.hs-mh-40 { max-height: 40%; }
.hs-mh-45 { max-height: 45%; }
.hs-mh-50 { max-height: 50%; }
.hs-mh-55 { max-height: 55%; }
.hs-mh-60 { max-height: 60%; }
.hs-mh-65 { max-height: 65%; }
.hs-mh-70 { max-height: 70%; }
.hs-mh-75 { max-height: 75%; }
.hs-mh-80 { max-height: 80%; }
.hs-mh-85 { max-height: 85%; }
.hs-mh-90 { max-height: 90%; }
.hs-mh-95 { max-height: 95%; }
.hs-mh-100 { max-height: 100%; }

/* hs height fixed */
.hs-hf-1 { height: 5px; }
.hs-hf-2 { height: 5px; }
.hs-hf-3 { height: 5px; }
.hs-hf-4 { height: 5px; }
.hs-hf-5 { height: 5px; }
.hs-hf-10 { height: 10px; }
.hs-hf-15 { height: 15px; }
.hs-hf-20 { height: 20px; }
.hs-hf-25 { height: 25px; }
.hs-hf-30 { height: 30px; }
.hs-hf-35 { height: 35px; }
.hs-hf-40 { height: 40px; }
.hs-hf-45 { height: 45px; }
.hs-hf-50 { height: 50px; }
.hs-hf-55 { height: 55px; }
.hs-hf-60 { height: 60px; }
.hs-hf-65 { height: 65px; }
.hs-hf-70 { height: 70px; }
.hs-hf-75 { height: 75px; }
.hs-hf-80 { height: 80px; }
.hs-hf-85 { height: 85px; }
.hs-hf-90 { height: 90px; }
.hs-hf-95 { height: 95px; }
.hs-hf-100 { height: 100px; }
.hs-hf-105 { height: 105px; }
.hs-hf-110 { height: 110px; }
.hs-hf-115 { height: 115px; }
.hs-hf-120 { height: 120px; }
.hs-hf-125 { height: 125px; }
.hs-hf-130 { height: 130px; }
.hs-hf-135 { height: 135px; }
.hs-hf-140 { height: 140px; }
.hs-hf-145 { height: 145px; }
.hs-hf-150 { height: 150px; }
.hs-hf-155 { height: 155px; }
.hs-hf-160 { height: 160px; }
.hs-hf-165 { height: 165px; }
.hs-hf-170 { height: 170px; }
.hs-hf-175 { height: 175px; }
.hs-hf-180 { height: 180px; }
.hs-hf-185 { height: 185px; }
.hs-hf-190 { height: 190px; }
.hs-hf-195 { height: 195px; }
.hs-hf-200 { height: 200px; }

/* hs height percent */
.hs-h-5 { height: 5%; }
.hs-h-10 { height: 10%; }
.hs-h-15 { height: 15%; }
.hs-h-20 { height: 20%; }
.hs-h-25 { height: 25%; }
.hs-h-30 { height: 30%; }
.hs-h-35 { height: 35%; }
.hs-h-40 { height: 40%; }
.hs-h-45 { height: 45%; }
.hs-h-50 { height: 50%; }
.hs-h-55 { height: 55%; }
.hs-h-60 { height: 60%; }
.hs-h-65 { height: 65%; }
.hs-h-70 { height: 70%; }
.hs-h-75 { height: 75%; }
.hs-h-80 { height: 80%; }
.hs-h-85 { height: 85%; }
.hs-h-90 { height: 90%; }
.hs-h-95 { height: 95%; }
.hs-h-100 { height: 100%; }

/* hs font-weight */
.hs-fw-100 { font-weight: 100; }
.hs-fw-200 { font-weight: 200; }
.hs-fw-300 { font-weight: 300; }
.hs-fw-400 { font-weight: 400; }
.hs-fw-500 { font-weight: 500; }
.hs-fw-600 { font-weight: 600; }
.hs-fw-700 { font-weight: 700; }
.hs-fw-800 { font-weight: 800; }
.hs-fw-900 { font-weight: 900; }
.hs-fw-1000 { font-weight: 1000; }



/* hs font-size */
.hs-fs-5 { font-size: 0.5rem; }
.hs-fs-6 { font-size: 0.6rem; }
.hs-fs-7 { font-size: 0.7rem; }
.hs-fs-8 { font-size: 0.8rem; }
.hs-fs-9 { font-size: 0.9rem; }
.hs-fs-10 { font-size: 1rem; }
.hs-fs-11 { font-size: 1.1rem; }
.hs-fs-12 { font-size: 1.2rem; }
.hs-fs-13 { font-size: 1.3rem; }
.hs-fs-14 { font-size: 1.4rem; }
.hs-fs-15 { font-size: 1.5rem; }
.hs-fs-16 { font-size: 1.6rem; }
.hs-fs-17 { font-size: 1.7rem; }
.hs-fs-18 { font-size: 1.8rem; }
.hs-fs-19 { font-size: 1.9rem; }
.hs-fs-20 { font-size: 2rem; }
.hs-fs-21 { font-size: 2.1rem; }
.hs-fs-22 { font-size: 2.2rem; }
.hs-fs-23 { font-size: 2.3rem; }
.hs-fs-24 { font-size: 2.4rem; }
.hs-fs-25 { font-size: 2.5rem; }
.hs-fs-26 { font-size: 2.6rem; }
.hs-fs-27 { font-size: 2.7rem; }
.hs-fs-28 { font-size: 2.8rem; }
.hs-fs-29 { font-size: 2.9rem; }
.hs-fs-30 { font-size: 3rem; }
.hs-fs-31 { font-size: 3.1rem; }
.hs-fs-32 { font-size: 3.2rem; }
.hs-fs-33 { font-size: 3.3rem; }
.hs-fs-34 { font-size: 3.4rem; }
.hs-fs-35 { font-size: 3.5rem; }
.hs-fs-36 { font-size: 3.6rem; }
.hs-fs-37 { font-size: 3.7rem; }
.hs-fs-38 { font-size: 3.8rem; }
.hs-fs-39 { font-size: 3.9rem; }
.hs-fs-40 { font-size: 4rem; }
.hs-fs-41 { font-size: 4.1rem; }
.hs-fs-42 { font-size: 4.2rem; }
.hs-fs-43 { font-size: 4.3rem; }
.hs-fs-44 { font-size: 4.4rem; }
.hs-fs-45 { font-size: 4.5rem; }
.hs-fs-46 { font-size: 4.6rem; }
.hs-fs-47 { font-size: 4.7rem; }
.hs-fs-48 { font-size: 4.8rem; }
.hs-fs-49 { font-size: 4.9rem; }
.hs-fs-50 { font-size: 5rem; }
.hs-fs-51 { font-size: 5.1rem; }
.hs-fs-52 { font-size: 5.2rem; }
.hs-fs-53 { font-size: 5.3rem; }
.hs-fs-54 { font-size: 5.4rem; }
.hs-fs-55 { font-size: 5.5rem; }
.hs-fs-56 { font-size: 5.6rem; }
.hs-fs-57 { font-size: 5.7rem; }
.hs-fs-58 { font-size: 5.8rem; }
.hs-fs-59 { font-size: 5.9rem; }
.hs-fs-60 { font-size: 6rem; }
.hs-fs-61 { font-size: 6.1rem; }
.hs-fs-62 { font-size: 6.2rem; }
.hs-fs-63 { font-size: 6.3rem; }
.hs-fs-64 { font-size: 6.4rem; }
.hs-fs-65 { font-size: 6.5rem; }
.hs-fs-66 { font-size: 6.6rem; }
.hs-fs-67 { font-size: 6.7rem; }
.hs-fs-68 { font-size: 6.8rem; }
.hs-fs-69 { font-size: 6.9rem; }
.hs-fs-70 { font-size: 7rem; }
.hs-fs-71 { font-size: 7.1rem; }
.hs-fs-72 { font-size: 7.2rem; }
.hs-fs-73 { font-size: 7.3rem; }
.hs-fs-74 { font-size: 7.4rem; }
.hs-fs-75 { font-size: 7.5rem; }
.hs-fs-76 { font-size: 7.6rem; }
.hs-fs-77 { font-size: 7.7rem; }
.hs-fs-78 { font-size: 7.8rem; }
.hs-fs-79 { font-size: 7.9rem; }
.hs-fs-80 { font-size: 8rem; }

@media(max-width: 768px) {
    .tb-hs-fs-5 { font-size: 0.5rem; }
    .tb-hs-fs-6 { font-size: 0.6rem; }
    .tb-hs-fs-7 { font-size: 0.7rem; }
    .tb-hs-fs-8 { font-size: 0.8rem; }
    .tb-hs-fs-9 { font-size: 0.9rem; }
    .tb-hs-fs-10 { font-size: 1rem; }
    .tb-hs-fs-11 { font-size: 1.1rem; }
    .tb-hs-fs-12 { font-size: 1.2rem; }
    .tb-hs-fs-13 { font-size: 1.3rem; }
    .tb-hs-fs-14 { font-size: 1.4rem; }
    .tb-hs-fs-15 { font-size: 1.5rem; }
    .tb-hs-fs-16 { font-size: 1.6rem; }
    .tb-hs-fs-17 { font-size: 1.7rem; }
    .tb-hs-fs-18 { font-size: 1.8rem; }
    .tb-hs-fs-19 { font-size: 1.9rem; }
    .tb-hs-fs-20 { font-size: 2rem; }
    .tb-hs-fs-21 { font-size: 2.1rem; }
    .tb-hs-fs-22 { font-size: 2.2rem; }
    .tb-hs-fs-23 { font-size: 2.3rem; }
    .tb-hs-fs-24 { font-size: 2.4rem; }
    .tb-hs-fs-25 { font-size: 2.5rem; }
    .tb-hs-fs-26 { font-size: 2.6rem; }
    .tb-hs-fs-27 { font-size: 2.7rem; }
    .tb-hs-fs-28 { font-size: 2.8rem; }
    .tb-hs-fs-29 { font-size: 2.9rem; }
    .tb-hs-fs-30 { font-size: 3rem; }
    .tb-hs-fs-31 { font-size: 3.1rem; }
    .tb-hs-fs-32 { font-size: 3.2rem; }
    .tb-hs-fs-33 { font-size: 3.3rem; }
    .tb-hs-fs-34 { font-size: 3.4rem; }
    .tb-hs-fs-35 { font-size: 3.5rem; }
    .tb-hs-fs-36 { font-size: 3.6rem; }
    .tb-hs-fs-37 { font-size: 3.7rem; }
    .tb-hs-fs-38 { font-size: 3.8rem; }
    .tb-hs-fs-39 { font-size: 3.9rem; }
    .tb-hs-fs-40 { font-size: 4rem; }
    .tb-hs-fs-50 { font-size: 5rem; }
    .tb-hs-fs-51 { font-size: 5.1rem; }
    .tb-hs-fs-52 { font-size: 5.2rem; }
    .tb-hs-fs-53 { font-size: 5.3rem; }
    .tb-hs-fs-54 { font-size: 5.4rem; }
    .tb-hs-fs-55 { font-size: 5.5rem; }
    .tb-hs-fs-56 { font-size: 5.6rem; }
    .tb-hs-fs-57 { font-size: 5.7rem; }
    .tb-hs-fs-58 { font-size: 5.8rem; }
    .tb-hs-fs-59 { font-size: 5.9rem; }
    .tb-hs-fs-60 { font-size: 6rem; }
    .tb-hs-fs-61 { font-size: 6.1rem; }
    .tb-hs-fs-62 { font-size: 6.2rem; }
    .tb-hs-fs-63 { font-size: 6.3rem; }
    .tb-hs-fs-64 { font-size: 6.4rem; }
    .tb-hs-fs-65 { font-size: 6.5rem; }
    .tb-hs-fs-66 { font-size: 6.6rem; }
    .tb-hs-fs-67 { font-size: 6.7rem; }
    .tb-hs-fs-68 { font-size: 6.8rem; }
    .tb-hs-fs-69 { font-size: 6.9rem; }
    .tb-hs-fs-70 { font-size: 7rem; }
    .tb-hs-fs-71 { font-size: 7.1rem; }
    .tb-hs-fs-72 { font-size: 7.2rem; }
    .tb-hs-fs-73 { font-size: 7.3rem; }
    .tb-hs-fs-74 { font-size: 7.4rem; }
    .tb-hs-fs-75 { font-size: 7.5rem; }
    .tb-hs-fs-76 { font-size: 7.6rem; }
    .tb-hs-fs-77 { font-size: 7.7rem; }
    .tb-hs-fs-78 { font-size: 7.8rem; }
    .tb-hs-fs-79 { font-size: 7.9rem; }
    .tb-hs-fs-80 { font-size: 8rem; }
}

@media(max-width: 576px) {
    .m-hs-fs-5 { font-size: 0.5rem; }
    .m-hs-fs-6 { font-size: 0.6rem; }
    .m-hs-fs-7 { font-size: 0.7rem; }
    .m-hs-fs-8 { font-size: 0.8rem; }
    .m-hs-fs-9 { font-size: 0.9rem; }
    .m-hs-fs-10 { font-size: 1rem; }
    .m-hs-fs-11 { font-size: 1.1rem; }
    .m-hs-fs-12 { font-size: 1.2rem; }
    .m-hs-fs-13 { font-size: 1.3rem; }
    .m-hs-fs-14 { font-size: 1.4rem; }
    .m-hs-fs-15 { font-size: 1.5rem; }
    .m-hs-fs-16 { font-size: 1.6rem; }
    .m-hs-fs-17 { font-size: 1.7rem; }
    .m-hs-fs-18 { font-size: 1.8rem; }
    .m-hs-fs-19 { font-size: 1.9rem; }
    .m-hs-fs-20 { font-size: 2rem; }
    .m-hs-fs-21 { font-size: 2.1rem; }
    .m-hs-fs-22 { font-size: 2.2rem; }
    .m-hs-fs-23 { font-size: 2.3rem; }
    .m-hs-fs-24 { font-size: 2.4rem; }
    .m-hs-fs-25 { font-size: 2.5rem; }
    .m-hs-fs-26 { font-size: 2.6rem; }
    .m-hs-fs-27 { font-size: 2.7rem; }
    .m-hs-fs-28 { font-size: 2.8rem; }
    .m-hs-fs-29 { font-size: 2.9rem; }
    .m-hs-fs-30 { font-size: 3rem; }
    .m-hs-fs-31 { font-size: 3.1rem; }
    .m-hs-fs-32 { font-size: 3.2rem; }
    .m-hs-fs-33 { font-size: 3.3rem; }
    .m-hs-fs-34 { font-size: 3.4rem; }
    .m-hs-fs-35 { font-size: 3.5rem; }
    .m-hs-fs-36 { font-size: 3.6rem; }
    .m-hs-fs-37 { font-size: 3.7rem; }
    .m-hs-fs-38 { font-size: 3.8rem; }
    .m-hs-fs-39 { font-size: 3.9rem; }
    .m-hs-fs-40 { font-size: 4rem; }
    .m-hs-fs-50 { font-size: 5rem; }
    .m-hs-fs-51 { font-size: 5.1rem; }
    .m-hs-fs-52 { font-size: 5.2rem; }
    .m-hs-fs-53 { font-size: 5.3rem; }
    .m-hs-fs-54 { font-size: 5.4rem; }
    .m-hs-fs-55 { font-size: 5.5rem; }
    .m-hs-fs-56 { font-size: 5.6rem; }
    .m-hs-fs-57 { font-size: 5.7rem; }
    .m-hs-fs-58 { font-size: 5.8rem; }
    .m-hs-fs-59 { font-size: 5.9rem; }
    .m-hs-fs-60 { font-size: 6rem; }
    .m-hs-fs-61 { font-size: 6.1rem; }
    .m-hs-fs-62 { font-size: 6.2rem; }
    .m-hs-fs-63 { font-size: 6.3rem; }
    .m-hs-fs-64 { font-size: 6.4rem; }
    .m-hs-fs-65 { font-size: 6.5rem; }
    .m-hs-fs-66 { font-size: 6.6rem; }
    .m-hs-fs-67 { font-size: 6.7rem; }
    .m-hs-fs-68 { font-size: 6.8rem; }
    .m-hs-fs-69 { font-size: 6.9rem; }
    .m-hs-fs-70 { font-size: 7rem; }
    .m-hs-fs-71 { font-size: 7.1rem; }
    .m-hs-fs-72 { font-size: 7.2rem; }
    .m-hs-fs-73 { font-size: 7.3rem; }
    .m-hs-fs-74 { font-size: 7.4rem; }
    .m-hs-fs-75 { font-size: 7.5rem; }
    .m-hs-fs-76 { font-size: 7.6rem; }
    .m-hs-fs-77 { font-size: 7.7rem; }
    .m-hs-fs-78 { font-size: 7.8rem; }
    .m-hs-fs-79 { font-size: 7.9rem; }
    .m-hs-fs-80 { font-size: 8rem; }
}



/* clear */
.clear { clear: both; }
.clear-5 { clear: both; padding-top: 5px; }
.clear-10 { clear: both; padding-top: 10px; }
.clear-20 { clear: both; padding-top: 20px; }
.clear-30 { clear: both; padding-top: 30px; }
.clear-40 { clear: both; padding-top: 40px; }
.clear-50 { clear: both; padding-top: 50px; }
.clear-60 { clear: both; padding-top: 60px; }
.clear-70 { clear: both; padding-top: 70px; }

/* space */
.space-10 { margin-left: 10px; }
.space-20 { margin-left: 20px; }
.space-30 { margin-left: 30px; }
.space-40 { margin-left: 40px; }
.space-50 { margin-left: 50px; }
.space-default { margin-left: 30px; }


/* align */
.align-center { align-items: center; }

/* hr */
.hs-hr1 { background-color: var(--default-color1); color: var(--default-color1); }
.hs-hr2 { background-color: var(--default-color2); color: var(--default-color2); }
.hs-hr3 { background-color: var(--default-color3); color: var(--default-color3); }

.hs-disable { color: var(--disable-color1); }

/* border */
.b-1 { border: 1px solid; }
.b-2 { border: 2px solid; }
.b-3 { border: 3px solid; }
.b-4 { border: 4px solid; }
.b-5 { border: 5px solid; }

/* border-radius */
.br-5 { border-radius: 5px; }
.br-7 { border-radius: 7px; }
.br-10 { border-radius: 10px; }
.br-15 { border-radius: 15px; }
.br-20 { border-radius: 20px; }
.br-25 { border-radius: 25px; }
.br-30 { border-radius: 30px; }
.br-35 { border-radius: 35px; }
.br-40 { border-radius: 40px; }
.br-45 { border-radius: 45px; }
.br-50 { border-radius: 50px; }

/* square */
.square-5 { width: 5px; height: 5px; }
.square-10 { width: 10px; height: 10px; }
.square-15 { width: 15px; height: 15px; }
.square-20 { width: 20px; height: 20px; }
.square-25 { width: 25px; height: 25px; }
.square-30 { width: 30px; height: 30px; }
.square-35 { width: 35px; height: 35px; }
.square-40 { width: 40px; height: 40px; }
.square-45 { width: 45px; height: 45px; }
.square-50 { width: 50px; height: 50px; }
.square-60 { width: 60px; height: 60px; }
.square-75 { width: 75px; height: 75px; }
.square-80 { width: 80px; height: 80px; }
.square-85 { width: 85px; height: 85px; }
.square-90 { width: 90px; height: 90px; }
.square-95 { width: 95px; height: 95px; }
.square-100 { width: 100px; height: 100px; }
.square-105 { width: 105px; height: 105px; }
.square-110 { width: 110px; height: 110px; }
.square-115 { width: 115px; height: 115px; }
.square-120 { width: 120px; height: 120px; }
.square-125 { width: 125px; height: 125px; }
.square-150 { width: 150px; height: 150px; }
.square-175 { width: 175px; height: 175px; }
.square-200 { width: 200px; height: 200px; }
.square-225 { width: 225px; height: 225px; }
.square-250 { width: 250px; height: 250px; }
.square-275 { width: 275px; height: 275px; }
.square-300 { width: 300px; height: 300px; }

/* hs-board start*/
.jq-hs-board
{ min-height: 700px; }
.hs-board
{ font-size: 1.4rem; }
.hs-board-search-bar
{ display: flex; justify-content: space-around; flex-wrap: wrap; }
.hs-board-search-bar > *
{ margin-bottom: 0rem; margin-top: 1rem; }
.hs-board-search-form
{ display: flex; justify-content: end; gap: 10px; padding: 0rem; }
.hs-search-count
{ font-size: 1.4rem; color: var(--txt-color4); }
.hs-search-count > span
{ color: var(--default-color2); }



.hs-table
{ text-align: center; border: var(--txt-color10); --bs-table-striped-bg: var(--lightgray-color1); table-layout: fixed;}
.hs-table > thead
{ border-top: 1px solid; }
@media (max-width: 576px) {
    .hs-table > thead
    { display: none; }
}
.hs-table > thead > tr > th
{ padding: 1rem 0rem 1rem 0rem; color: var(--txt-color9); font-weight: 500;}
.hs-table > tbody
{ background-color: var(--txt-color10) !important; vertical-align: middle;}
.hs-table > tbody > .current-row-active > td
{ --bs-table-bg-type: var(--default-color4) !important; }
.hs-table > tbody > tr > td
{ padding: 1rem; color: var(--txt-color6); font-weight: 500; align-items: center;}


.hs-table.pay-table > thead > tr > th
{ border-left: 1px solid var(--disable-color1); border-bottom: 1px solid var(--disable-color1); }
.hs-table.pay-table > tbody > tr > td
{ border: 1px solid var(--disable-color1); }
.hs-table.pay-table > thead > tr > th:first-child,
.hs-table.pay-table > tbody > tr > td:first-child
{ border-left: 0; } 
.hs-table.pay-table > thead > tr > th:last-child,
.hs-table.pay-table > tbody > tr > td:last-child
{ border-right: 0; }

.hs-table.pay-table > tbody > tr > td.text-start
{ text-align: left; padding-left: 15px; }




.hs-table-notice > td
{ --bs-table-bg-type: var(--default-color4) !important; }
.hs-table-notice-badge > div
{ font-size: 1.4rem; font-weight: 800; color: var(--default-color2); }

    /* hs-view */
    .hs-view-content
    { border-top: 1px solid var(--txt-color6); border-bottom: 1px solid var(--txt-color6); }

    .hs-view-title
    { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 2rem 1.5rem; }
    .hs-view-title > div:nth-child(1)
    { font-size: 1.6rem; }
    .hs-view-title > div:nth-child(2)
    { display: flex; justify-content: space-around; }

    .hs-view-memo > div:nth-child(1)
    { border-top: 1px solid var(--txt-color10); border-bottom: 1px solid var(--txt-color10); padding: 2rem; }


    .hs-view-list-btn
    { display: inline-block; }
    .hs-view-list-btn > div,
    .hs-view-list-btn > a,
    .hs-view-list-btn > button
    { background-color: var(--default-color2); color: #fff; text-align:center; align-items: center; margin: 0; padding: 0.5em 3rem; margin: 0; font-size: 1.6rem; border: 0; border-radius: 0.8rem; cursor: pointer; }
    .hs-view-list-btn > a.list
    { background-color: var(--txt-color6); }

    .hs-view-listing > div
    { display: flex; text-align: center; white-space: nowrap; padding: 0.5rem; }
    .hs-view-listing > div > div
    { padding: 0.5rem; }

    .hs-view-download-wrap
    { padding:2rem; }
    .hs-view-download
    { display:flex; border:1px solid var(--disable-color1); border-radius:10px; overflow:hidden; height:80px; }
    .hs-view-download>div:nth-child(1)
    { width:30%; display:flex; justify-content:center; align-items:center; background-color:var(--lightgray-color1);}
    .hs-view-download>div:nth-child(2)
    { width:70%; }

    .hs-view-download-file
    { display:flex; justify-content:start; align-items:center; padding:2rem; gap:1rem; }
    .hs-view-download-file-item>img
    { width:30px; height:30px; }

    .hs-view-download-title
    { color: var(--txt-color6); }

    @media (max-width: 868px) {
        .hs-view-title > div:nth-child(2)
        { width: 100%; justify-content: space-between; }
    }


.board-form-select 
{ border: 1px solid var(--txt-color3); padding: 5px 5px 6px; color: var(--txt-color4); border-radius: 5px; width: 100%; }
.board-form-input
{ border: 1px solid var(--txt-color3); padding: 3px 5px; color: var(--txt-color4); border-radius: 5px; width: 100%; }
.board-form-search-btn
{ border: 1px solid var(--txt-color3); background: url('/home/skin/images/components/form-search-btn.png');  background-size: cover; min-width: 35px; cursor: pointer; }
.board-form-group
{ display: flex; justify-content: center;}
.board-form-group > *
{ display: flex; justify-content: center; border-radius: 0px; align-items: center; }
.board-form-group :first-child
{ border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.board-form-group :last-child
{ border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

.hs-board-alert
{ display: flex; justify-content: center; align-items: center; width: 100%; padding: 2rem; background-color: var(--default-color4); border-radius: 20px; font-size: 2rem; font-weight: 700; }
/* hs-board end*/

/* badge start */
.tcom-badge
{ padding: 0rem 0.5rem; border-radius: 5px; color: #fff; border: 1px solid var(--default-color2); background-color: var(--default-color2); overflow: hidden; margin-left: 0.5rem; }
.notice-badge
{ padding: 0rem 0.5rem; border-radius: 5px; color: #fff; border: 1px solid var(--blue-color3); background-color: var(--blue-color3); overflow: hidden; margin-left: 0.5rem; }
/* badge end */


/* inner-nav */
/*
.inner-nav
{ display: flex; justify-content: center;}

.inner-nav > *
{ width: 200px; height: 60px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--txt-color2); font-size: 1.6rem; font-weight: 600; color: var(--txt-color4); cursor: pointer;}

.inner-nav :first-child
{ border-radius: 10px 0px 0px 10px; }
.inner-nav :last-child
{ border-radius: 0px 10px 10px 0px; }
.inner-active-default
{ background-color: var(--default-color2); border: 1px solid var(--default-color2); color: #fff}

.inner-nav-sub
{ display: flex; justify-content: center; gap: 1rem; }
.inner-nav-sub > *
{ padding: 10px 0px; border: 1px solid var(--txt-color2); font-size: 1.5rem; font-weight: 600; color: var(--txt-color3); border-radius: 10px; width: 150px; text-align: center; cursor: pointer;}
.inner-active-sub
{ border: 2px solid var(--default-color2); color: var(--default-color2); }
*/

.inner-nav 
{ display: table; margin: 0 auto; border-collapse: collapse; border-radius: 1rem; border-style: hidden; box-shadow: 0 0 0 1px var(--txt-color2); overflow: hidden;}

.inner-nav > * 
{ display: table-cell; width: 200px; height: 60px; font-size: 1.6rem; font-weight: 600; color: var(--txt-color4); cursor: pointer; text-align: center; line-height: 60px; border-left: 1px solid var(--txt-color2);}

/*
@media (max-width: 576px) {
    .inner-nav > *
    { width: 100%; height: 50px; font-size: 1.2rem;}
}
*/
@media (max-width: 576px) {
    .inner-nav
    {width: 100%;}

    .inner-nav > * 
    { width: 33.333%; height: 48px; font-size: 1.4rem; line-height: 48px;}
}


.inner-active-default
{ background-color: var(--default-color2); border: 1px solid var(--txt-color2); color: #fff; }
.inner-nav-sub
{ display: flex; justify-content: center; gap: 1rem; }
.inner-nav-sub > *
{ padding: 10px 0px; border: 1px solid var(--txt-color2); font-size: 1.5rem; font-weight: 600; color: var(--txt-color3); border-radius: 10px; width: 150px; text-align: center; cursor: pointer;}
.inner-active-sub
{ border: 2px solid var(--default-color2); color: var(--default-color2); }

/* hs-form */
.hs-form 
{ color: var(--txt-color6); }

.hs-form-group 
{ display: flex; justify-content: center;}
.hs-form-group > *
{ border-radius: 0px !important;}
.hs-form-group :first-child
{ border-radius: 5px 0px 0px 5px !important;}
.hs-form-group :last-child
{ border-radius: 0px 5px 5px 0px !important;}

.hs-form-control
{ color: var(--gray-color1); font-size: 1.4rem; }
.hs-form-control:focus 
{ border-color: orange; box-shadow: 0 0 0 0; }
.hs-form-control::-webkit-input-placeholder
{ color: var(--gray-color1); }
.hs-form-control:disabled
{ background-color: var(--disable-color1); opacity: 1; }
.hs-form-check:checked 
{ background-color: orange; border-color: orange; box-shadow: 0 0 0 0; }
.hs-form-check:not(:checked) 
{ box-shadow: 0 0 0 0;}
.hs-form-check:not(:checked)[type=radio]
{ background-color: var(--txt-color7); border-color: var(--txt-color7); --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");} 
.hs-form-check:focus 
{ border-color: orange; box-shadow: 0 0 0 0; }



.scroll-hide::-webkit-scrollbar
{ display: none; }

/* pay-badge */
.pay-badge
{ font-size: 1.2rem; padding: 0.2rem 0.5rem; border-radius: 0.3rem; font-weight: 500; } 
.pay-badge-unpaid
{ color: var(--red-color5); background-color: var(--pink-color3); border: 1px solid var(--pink-color2); }
.pay-badge-paid
{ color: var(--green-color7); background-color: var(--green-color9); border: 1px solid var(--green-color8); }
.text-unpaid
{ color: var(--red-color5); }
.text-paid
{ color: var(--green-color7); }
.pay-badge-device
{ background-color: #EFFEEE; border: 1px solid #9FEE99; color: #0EBF01; }

/* 결제정보 라벨 */
/*
span.label-sign,
a.label-sign
{ position: relative; font-size: 12px; font-weight: 600; padding: 4px 7px; border-radius: 3px; }
*/
.pay-badge1
{ background-color: #FFF9F9; border: 1px solid #FFC7C7; color: #FF1100; }
.pay-text1
{ color: #FF1100; }

.pay-badge5
{ background-color: #F3F9D0; border: 1px solid #D4DCA7; color: #535F0F; }
.pay-text5
{ color: #535F0F; }

.pay-badge10
{ background-color: #EEFCFE; border: 1px solid #99E5EE; color: #0180BF; }
.pay-text10
{ color: #339900; }

.pay-badge20
{ background-color: #F7EEFE; border: 1px solid #CB99EE; color: #6C01BF; }
.pay-text20
{ color: #6C01BF; }

.pay-badge30
{ background-color: #FFEFD2; border: 1px solid #DFCFB3; color: #6D5324; }
.pay-text30
{ color: #6D5324; }



/* hs-pagelisting */
.hs-pagelisting > ul
{ display: inline-block; padding-left: 0rem; }
.hs-pagelisting > ul > li
{ font-weight: 500; color: black; cursor: pointer; display: inline-block; }
.hs-pagelisting > ul > li
{ padding: 0.5rem 1.5rem; }
.hs-pagelisting > ul > .active
{ background-color: var(--default-color2) !important; border-radius: 20px; color: var(--txt-color1); }
.hs-pagelisting > ul > .arrow
{ font-weight: 500; }

/* offcanvas */
.hs-offcanvas {
    width: 100%;
}


.hs-ellipsis
{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


label.error {
    display: table; margin-top: 3px; margin-bottom: 0; padding: 5px 8px; color: #fff; background-color: #D65C4F;
    font-size: 12px; font-weight: 600; line-height: 14px;
  }


/* hs custom scroll start*/
.hs-scroll
{ overflow: scroll;}
.hs-scroll::-webkit-scrollbar
{ width: 10px; margin-top: 1rem; }
.hs-scroll::-webkit-scrollbar-thumb 
{ background: var(--default-color2); border: 1px solid var(--default-color3); border-radius: 1.2rem; margin-top: 1rem; }
/* hs custom scroll end */

.popup-center
{ display: flex; justify-content: center; align-items:center; width: 100%; height :100%; }

.hideen-radio
{ width: 0px; height: 0px; position: absolute; left: 0; top: 0; opacity: 0;}
.hidden-radio
{ width: 0px; height: 0px; position: absolute; left: 0; top: 0; opacity: 0;}




/* 이 아래부터는 토크스테이션 혹은 타 패밀리 사이트에서 가져온것들... 맨 밑에 위치함 */
.me-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;

	
}

.me-video iframe {
    border: none;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}