@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
    --bgColor: #e74d3f;
    --bgDark: #353535;
    --bgWhite: #ffffff;
    --bgLightDark: #545454;
    /*--bgBlack: #000000;*/
    --ftColor1: #787878;
    --ftColor2: #f6c9c4; /*//¸Þ´º default */
    /*--ftColor3: #f6c9c4;
    --ftColor4: #119880;
    --ftColor5: #7c52be;*/
    --darkgray: #353535;
    --gray: #8c8c8c;
    --blue: #56afe2;
    --white: #ffffff;
    --yellow: #ffc000;
}

* {
    list-style: none;
    text-decoration: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.bgOrange{
    background-color: var(--bgColor);
}
.bgLightDark{
    background-color: var(--bgLightDark);
}
.bgBlue {
    background-color: var(--blue);
}
.bgDark {
    background-color: var(--bgDark);
}
.bgYellow {
    background-color: var(--yellow);
}
.ft-color1{
    color: var(--ftColor1);
}
.ft-color2 {
    color: var(--ftColor2);
}
.ft-gray{
    color:var(--gray);
}
.ft-blue{
    color:var(--blue);
}

.nav-link:focus, .nav-link:hover, .nav-link.active {
    color: #ffffff;
    font-size:1.0rem;
}


.ft-5 {
    /*display: flex;*/
    text-align: left;
    font-style: normal;
    line-height: 1.25;
    font-size: 0.75rem;
    font-weight: 400;
}

.ft-4 {
    /*display: flex;*/
    text-align: left;
    font-style: normal;
    line-height: 1.25;
    font-size: 1rem;
}

.ft-3 {
    /*display: flex;*/
    text-align: left;
    font-style: normal;
    line-height: 1.25;
    font-size: 1.25rem;
    font-weight: 400;
}

.ft-2 {
    /*display: flex;*/
    text-align: left;
    font-style: normal;
    line-height: 1.25;
    font-size: 1.5rem;
    font-weight: 400;
}

.ft-1 {
    /*display: flex;*/
    text-align: left;
    font-style: normal;
    line-height: 1.25;
    font-size: 1.8rem;
    font-weight: 400;
}

html {
  font-size: 16px;
  color:var(--ftColor1);
}
/* ÀÛÀº È­¸é (ÈÞ´ëÆù) */
@media (max-width: 576px) {
    body {
        font-size: 0.9rem;
    }
}

/* Áß°£ È­¸é (ÅÂºí¸´) */
@media (min-width: 577px) and (max-width: 768px) {
    body {
        font-size: 0.9rem;
    }
}

/* Å« È­¸é (ÀÛÀº µ¥½ºÅ©Å¾) */
@media (min-width: 769px) and (max-width: 992px) {
    body {
        font-size: 0.9rem;
    }
}

/* ¾ÆÁÖ Å« È­¸é (Å« µ¥½ºÅ©Å¾) */
@media (min-width: 993px) {
    body {
        font-size: 0.9rem;
    }
}




.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--gray);
}

html {
  position: relative;
  min-height: 100%;
}

body {
    font-family: 'pretendard', sans-serif !important;
    color: var(--darkgray);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}


header {
    min-height: 122px;
}

header .hTop {
    min-height: 70px;
    color: var(--white);
}
    header .hBottom {
        min-height: 52px;
        color: var(--white);
    }


main {
    min-height: calc(100vh - 217px);
    position: relative;
    /*    overflow: hidden;*/
    overflow: auto;
    background-color: var(--white);
}
footer {
    position: relative;
    min-height: 58px;
    font-style: normal;
    /*padding: 10px 0;*/
    background: var(--bgDark);
    font-size: 14px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 300;
}
    footer .footer_info {
        color: var(--gray);
        font-weight: 300;
        font-size: 13px;
    }

    footer .footer_menu a {
        display: flex;
        align-items: center;
        color: var(--gray);
        font-weight: 300;
        font-size: 14px;
    }
.tableHeader {
    background-color:var(--blue);
    color : var(--white);
}
.txtCenter {
    text-align: center !important;
}

.txtRight {
    text-align: right !important;
}

.txtLeft {
    text-align: left !important;
}
.dt-search {
    display: none;
}


input[type="text"] {
    width: 100%;
    border: 2px solid #aaa;
    border-radius: 4px;
    /*margin: 8px 0;*/
    outline: none;
    padding: 6px;
    box-sizing: border-box;
    transition: 0.3s;
}

.inputWithIcon .form-control:focus, .form-check-input:focus {
    /*box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--gray);*/
    box-shadow:none;
}
.inputWithIcon .form-control, .inputWithIcon .input-group-text {
    border: 1px solid var(--blue);
}


.btnBlue {
    color: var(--white) !important;
    border: 1px solid var(--blue) !important;
    background-color: var(--blue) !important;
    border-radius: 0.3rem !important
}

    .btnBlue.active {
        color: var(--white) !important;
        background-color: var(--gray) !important;
        border-color: var(--gray) !important;
        border-radius: 1rem !important
    }


    .btnBlue:hover {
        color: var(--white) !important;
        background-color: var(--gray) !important;
        border-color: var(--gray) !important;
        font-weight: bold !important;
    }

    .btn, .btnBlue a {
        color: inherit;
        text-decoration: inherit;
    }


/*»ç¿ëÀÚ ÁöÁ¤ À§Ä¡ ¸ð´Þ*/
.custom-modal {
    position: absolute; /* ºÎ¸ð ±âÁØ À§Ä¡ */
    z-index: 1050;
    width: 450px;
    background-color: white;
    border: 1px solid #ccc;
    /*border-radius: 8px;*/
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    display: none;
}

.custom-modal-header {
    /*background-color: #007bff;*/
    /*color: white;*/
    padding: 10px;
    /*border-top-left-radius: 8px;
    border-top-right-radius: 8px;*/
}

.custom-modal-body {
    padding: 10px;
}
.wordBtn {
    font-size:13px;
    background-color:var(--bgColor);
    width:50px;
    margin: 3px 0px 3px 0px;
    color:var(--white);
}
.wordBtn.active {
    font-size: 13px;
    background-color: var(--blue);
    width: 50px;
    margin: 3px 0px 3px 0px;
    color: var(--white);
}

/*¹é±×¶ó¿îµå È帰 ±Û¾¾*/
.blurred-text {
    position: absolute;
    display: inline-block; /* ±Û ±æÀ̸¸Å­¸¸ °ø°£ ÇÒ´ç */
    font-size: 2rem; /* ±Û¾¾ Å©±â ¼³Á¤ */
    font-weight: bold;
    color: rgba(0, 0, 0, 0.1); /* È帰 »ö»ó */
    pointer-events: none; /* Ŭ¸¯ À̺¥Æ® ¹æÁö */
    width: auto !important; /* ³Êºñ ÀÚµ¿ Á¶Á¤ */
}

.left-top {
    top: 10px;
    left: 10px;
}

.right-bottom {
    bottom: 10px;
    right: 10px;
}


.h3-tit {
    padding-left: 13px;
    position: relative;
    font-size: 22px;
    font-weight: 500;
    color: #e84e3b!important;
}
.h3-tit::before {
    position: absolute;
    top: 4px;
    left: 0;
    content: '';
    display: block;
    width: 5px;
    height: 18px;
    background-color: #e84e3b;
}