@charset "UTF-8";

/*==============================================
reset css
==============================================*/

*{padding: 0; margin: 0; font-family: 'Noto Sans KR', Arial, sans-serif;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption,
footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html, body { margin: 0; padding: 0; width: 100%; height:100%; font-weight: normal; color:#000; position:relative; letter-spacing: 0;-webkit-text-size-adjust:100%}
body{position:relative; -webkit-text-size-adjust:100%}
h1, h2, h3, h4,h5,h6{ font-weight:normal}
img{vertical-align:top; border:0;}
ol, ul, li, dl{list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
legend,caption{visibility:hidden;overflow:hidden;height:0;font-size:0;line-height:0}
a{text-decoration:none; color:#000; word-break: break-all;}
div, p, span{word-break: break-all;}
a:hover,a:active,a:focus{text-decoration:none;transition: all 0.2s;}
/* textarea, input[type="image"],  input[type="text"],  input[type="submit"],  input[type="password"] {font-size:14px; padding:0;-webkit-appearance:none;  font-weight: normal; border-radius:0;-webkit-border-radius:0; -moz-border-radius:0;} */
select{ border:none; background-color:transparent; border-radius:0;-webkit-border-radius:0; -moz-border-radius:0;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}
a, input, button, select, option{outline:none; color:#000;}
button { cursor: pointer; overflow: visible; border:0; background-color:transparent; padding:0; margin:0; font-size: 100%}
i, em{font-style: normal}
.txt_hidden, .txtHidden, caption{display:inline; overflow: hidden; position:absolute; top:0; left:0; font-size:0; text-indent:-9999px;}
select::-ms-expand {display:none} 
input::placeholder, textarea::placeholder{color:#b0b0b0}
.clearfix {width:100%;}
.clearfix:after{content: ""; display: block; clear: both;}
.search-template input[type="text"] {
    border: none;
    box-sizing: border-box;
    width: 100%;
    font: inherit;
    color: inherit;
  }
  



select { transition: 0.2s all; appearance: none;}
select:hover {
  /* border-color: #4b49ac !important;
  background-color: #f8f9ff !important; */
}
textarea { transition: 0.2s all; } textarea:focus-within { border-color: #4b49ac; box-shadow: 0 0 0 4px rgba(75, 73, 172, 0.1); background: #fff; } textarea:focus-visible { outline: none; }

/* 기본적으로 모든 요소에 스타일 적용 */
* {
    caret-color: transparent; /* 깜박이는 커서 숨김 */
  }
  
  /* input, textarea, select는 제외 */
  input, textarea, select {
    user-select: text; /* 텍스트 선택 허용 */
    caret-color: auto; /* 기본 깜박이는 커서 표시 */
    box-sizing: border-box;
  }
  

@media (max-width: 1080px) {
    html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
    blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 
    img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, 
    i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, 
    caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, 
    embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, 
    section, summary, time, mark, audio, video {
        font-size: 12px;
    }

    html, body {
        font-size: 12px;
    }

    input::placeholder, 
    textarea::placeholder {
        font-size: 12px;
    }

    button {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
    blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 
    img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, 
    i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, 
    caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, 
    embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, 
    section, summary, time, mark, audio, video {
        font-size: 12px;
    }

    html, body {
        font-size: 12px;
    }

    input::placeholder, 
    textarea::placeholder {
        font-size: 12px;
    }

    button {
        font-size: 12px;
    }
}


/* 기본 달력 아이콘 숨기기 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    position: absolute;
    right: 10px;
}

/* 커스텀 달력 아이콘 스타일링 */
input[type="date"],
input[type="datetime-local"] {
    position: relative;
    padding-right: 40px; /* 아이콘을 위한 공간 */
    appearance: none;  
}

input[type="date"]::after,
input[type="datetime-local"]::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Firefox에서도 동작하도록 추가 */
input[type="date"]::-moz-calendar-picker-indicator,
input[type="datetime-local"]::-moz-calendar-picker-indicator {
    opacity: 0;
}


html {
    /* scroll-behavior: smooth */
}

/* body {
    min-width: 355px
} */

body::-webkit-scrollbar {
    width: 5px;
    display: none;
}

body::-webkit-scrollbar-thumb {
    height: 15%;
    background: rgba(87,68,64,.6);
    border-radius: 10px
}

body::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0)
}

html, body {
    font-size: 16px; 
  }
  
  @media (max-width: 1680px) {
    html, body {
      font-size: 13px; 
    }
  }
  
  
  @media (max-width: 1080px) {
    html, body {
      font-size: 11px; 
    }
  }
  
  @media (max-width: 768px) {
    html, body {
      font-size: 8px; 
    }
  }