@charset "utf-8";

@font-face {
    font-family: "Noto Sans KR"; font-weight: 300; font-style: normal;
    src:url("fonts/NotoSansKR-Light.eot");
    src:url("fonts/NotoSansKR-Light.eot") format("embedded-opentype"), 
        url("fonts/NotoSansKR-Light.woff2") format("woff2"),
        url("fonts/NotoSansKR-Light.woff") format("woff"),
        url("fonts/NotoSansKR-Light.ttf") format("truetype");
}
@font-face {
    font-family: "Noto Sans KR"; font-weight: 400; font-style: normal;
    src:url("fonts/NotoSansKR-Regular.eot");
    src:url("fonts/NotoSansKR-Regular.eot") format("embedded-opentype"), 
        url("fonts/NotoSansKR-Regular.woff2") format("woff2"),
        url("fonts/NotoSansKR-Regular.woff") format("woff"),
        url("fonts/NotoSansKR-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Noto Sans KR"; font-weight: 500; font-style: normal;
    src:url("fonts/NotoSansKR-Medium.eot");
    src:url("fonts/NotoSansKR-Medium.eot") format("embedded-opentype"), 
        url("fonts/NotoSansKR-Medium.woff2") format("woff2"),
        url("fonts/NotoSansKR-Medium.woff") format("woff"),
        url("fonts/NotoSansKR-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "Noto Sans KR"; font-weight: 700; font-style: normal;
    src:url("fonts/NotoSansKR-Bold.eot");
    src:url("fonts/NotoSansKR-Bold.eot") format("embedded-opentype"), 
        url("fonts/NotoSansKR-Bold.woff2") format("woff2"),
        url("fonts/NotoSansKR-Bold.woff") format("woff"),
        url("fonts/NotoSansKR-Bold.ttf") format("truetype");
}

*,::before, ::after {
    box-sizing: border-box;
    text-decoration: inherit;
    vertical-align: inherit;
}

html, body {
    width: 100%;
    height: 100%;
    cursor: default;
    -moz-tab-size: 4;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%; 
    word-break: break-word;
    font-size: 62.5%;
}

body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,ul,li,ol,p,select,table,td,textarea,th {
    margin: 0;
    padding: 0;
}

body,button,input,select,table,textarea,pre {
    font-size: 1.6rem; line-height: 1.5; color: #333333;
    font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "나눔고딕", "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", arial, dotum, 돋움, sans-serif;
}

h1,h2,h3,h4,h5,h6 { font-size: inherit; line-height: inherit; font-weight: 600; }
hr { height: 0; overflow: visible; }
main,details { display: block; }
dl,ol,ul,li,menu { list-style: none; }
code,kbd,samp { font-family: monospace, monospace; font-size: 1em; }
address,em,i { font-style: normal; }
abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted;
}

b,dt { font-weight: bold; }
small { font-size: 80%; }
sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
audio,canvas,iframe,img,svg,video { display: inline-block; max-width: 100%; }
iframe,fieldset { border-style: none; }
svg:not([fill]) { fill: currentColor; }
svg:not(:root) { overflow: hidden; }

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

button {
    overflow: visible;
    background-color: transparent;
}

button,
select { text-transform: none; }

select {-webkit-appearance:none;-moz-appearance: none;appearance: none; } 
select::-ms-expand {display: none; } 

button,
input {
    border: 0;
    border-radius: 0;
    overflow: visible;
}

input:focus { outline: none; }
input[type=checkbox], input[type=radio] {
    accent-color: var(--hl-primary);
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    appearance: button;
    cursor: pointer;
}

input {overflow: visible;}

caption, legend {
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
}
progress { display: inline-block; vertical-align: baseline; }
/* select-기존 아래 화살표 안보이게 할때 사용*/
/* select {appearance: none; text-transform: none;} */
select::-ms-expand { display: none; }

summary { display: list-item; }
a,area,button,input,label,select,summary,textarea,[tabindex] {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    vertical-align: middle;
}

/* normalize */
::-webkit-input-placeholder { color: inherit; opacity: 0.54; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
::-moz-focus-inner { border-style: none; padding: 0; }
:-moz-focusring { outline: 1px dotted ButtonText; }
:-moz-ui-invalid { box-shadow: none; }

[type="checkbox"],
[type="radio"] { padding: 0; }
[type="search"] { appearance: textfield; outline-offset: -2px; }
[hidden] { display: none; }
[aria-busy="true"] { cursor: progress; }
[aria-controls] { cursor: pointer; }
[aria-disabled="true"],
[disabled] { cursor: not-allowed; }
[aria-hidden="false"][hidden] { display: initial; }
[aria-hidden="false"][hidden]:not(:focus) { clip: rect(0, 0, 0, 0); position: absolute; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
input[type="number"] { appearance: textfield;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="number"],
input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="date"], 
textarea { -webkit-appearance:none; -moz-appearance:none; appearance:none; outline:0; }
textarea { padding: 5px; overflow: auto; resize: vertical; border-radius: 5px; border: 1px solid #ddd; }

/* a */
a { display: inline-block; background-color: transparent; text-decoration: none; color: inherit; } 
a:active, a:hover { outline: 0; text-decoration: none; }
/* a:link    { color: #333; }  */
a:hover   { color: var(--hl-primary); } 
a:active  { color: #333; } 
/* a:visited { color: #8283af; }  */

::selection { background: #bbbbbb; color: #333; text-shadow: none; } 
/* input 클릭했을경우 border-color */
:focus { border-color: #47a3da; box-shadow: none; }

/* 키보드로 버튼에 포커스 시 */
:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 4px;   
}