@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
html, body {
    font-family: "Noto Sans KR", sans-serif;
    height: 100vh;
    height: 100dvh;
}

.noto-sans kr-500 {
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500; /*Use a value from 100 to 900*/ 
    font-style: normal;
}
/**** 로그인 *************/

/* 글자 줄이기*/

.truncate {
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 글자 줄이기*/
.txt_cut_80 {
    max-width: 80px;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.txt_cut_100 {
    max-width: 100px;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.txt_line_cut {
    max-width: 200px;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.txt_line_cut_100 {
    max-width: 90%;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.txt_line_nowrap {
    overflow: hidden;
    white-space: nowrap;
    /*text-overflow: ellipsis;*/
}

.obj_rotate_135 {
    margin-top: 3px;
    rotate: 135deg;
}
.obj_rotate_45 {
    margin-top: 3px;
    rotate: 45deg;
}
.txt_area_cut {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: 1.2em;
    height: 4.2em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
}

/* Side Menu

*/
.sub_link {
    float: right;
    position: absolute;
    right: 0.8rem;
    top: .0rem;
    z-index: 1450;
}
/* img effect*/
.logoimg {
    animation: mymove 7s infinite;
}

@keyframes mymove {
    50% {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
}

/************************
 Device   
    *****/
/** blink <div class="blink_text">BLINK ME</div>***/
.blink_text {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}
.blink_icon {
    animation: iconblinker 1s linear infinite;
}

@keyframes iconblinker {
    50% {
        opacity: 0;
    }
}

/*LAB디지털.ttf*/
@font-face {
    font-family: 'digital';
    src: url('./korfonts/LAB디지털.ttf') format('truetype');
}
/*나눔손글씨 왼손잡이도 예뻐.ttf*/
@font-face {
    font-family: 'nanum-handy';
    src: url('./korfonts/나눔손글씨 왼손잡이도 예뻐.ttf') format('truetype');
}
.handy_font {
    letter-spacing: 0.1em;
    font-family: 'nanum-handy';
    font-weight: 500;
}

.d_font_value {
    /*
    text-align: right;
    font-size: xx-large;

    */
    letter-spacing: 0.25em;
    font-family: 'digital';
    font-weight: 900;
}
.d_font_kor {
    /*
    text-align: right;
    font-size: xx-large;

    */
    letter-spacing: 0.25em;
    font-family: 'digital';
    font-weight: 900;
}
/*fontsDigital DigitalNumbers-Regular.ttf*/
@font-face {
    font-family: 'font-digital';
    src: url('./fontsDigital/DigitalNumbers-Regular.ttf') format('truetype');
}
.d_font {
    /*
    text-align: right;
    font-size: xx-large;
    */
    letter-spacing: 0.25em;
    font-family: 'font-digital';
    font-weight: 900;
}

.font-resize {
    font-size: calc(12px + 2vw);
}
.font-header {
    font-size: calc(10px + 2vw);
}

.half {
    border-left: 3px solid black;
    height: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.text-end input {
    text-align: right !important;
}
.overlay-text {
    color: rgba(0, 0, 0, 0.6); /* Black text with 60% opacity */
}

.hsl-text {
    color: hsl(30, 100%, 50%); /* A vibrant orange */
}