@charset "UTF-8";

@font-face { 
  font-family:'NotoSans';
  font-style:normal;
  font-weight: 100; 
  src:
  url(../fonts/NotoSans-Thin.woff2) format('woff2'), 
  url(../fonts/NotoSans-Thin.woff) format('woff'),
  url(../fonts/NotoSans-Thin.eot) format('eot'),
  url(../fonts/NotoSans-Thin.oft) format('oft')
  
}

@font-face { 
  font-family:'NotoSans';
  font-style:normal;
  font-weight: 300; 
  src:
  url(../fonts/NotoSans-Light.woff2) format('woff2'), 
  url(../fonts/NotoSans-Light.woff) format('woff'),
  url(../fonts/NotoSans-Light.eot) format('eot'),
  url(../fonts/NotoSans-Light.oft) format('oft')
}

@font-face { 
  font-family:'NotoSans';
  font-style:normal;
  font-weight: 400; 
  src:
  url(../fonts/NotoSans-Regular.woff2) format('woff2'), 
  url(../fonts/NotoSans-Regular.woff) format('woff'),
  url(../fonts/NotoSans-Regular.eot) format('eot'),
  url(../fonts/NotoSans-Regular.oft) format('oft')
}

@font-face { 
  font-family:'NotoSans';
  font-style:normal;
  font-weight: 500; 
  src:
  url(../fonts/NotoSans-Medium.woff2) format('woff2'), 
  url(../fonts/NotoSans-Medium.woff) format('woff'),
  url(../fonts/NotoSans-Medium.eot) format('eot'),
  url(../fonts/NotoSans-Medium.oft) format('oft')
}

@font-face { 
  font-family:'NotoSans';
  font-style:normal;
  font-weight: 700; 
  src:
  url(../fonts/NotoSans-Bold.woff2) format('woff2'), 
  url(../fonts/NotoSans-Bold.woff) format('woff'),
  url(../fonts/NotoSans-Bold.eot) format('eot'),
  url(../fonts/NotoSans-Bold.oft) format('oft')
}

@font-face { 
  font-family:'NotoSans';
  font-style:normal;
  font-weight: 900; 
  src:
  url(../fonts/NotoSans-Black.woff2) format('woff2'), 
  url(../fonts/NotoSans-Black.woff) format('woff'),
  url(../fonts/NotoSans-Black.eot) format('eot'),
  url(../fonts/NotoSans-Black.oft) format('oft')
}



*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  backface-visibility:hidden;
}


html,body {
  margin: 0 auto;
  padding: 0;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--body-color);
  text-align: var(--body-text-align);
  letter-spacing: var(--body-letterspacing);
  background:var(--body-bg);
  -webkit-text-size-adjust: 100%;
  position:relative;
  scroll-behavior: smooth;
  width:100%;
  height:auto;
  min-height:100%;
  counter-reset:dd;
  overflow-x:hidden
  
}

h1,h2,h3,h4,h5,h6
{
  margin: 0;
  padding: 0;
  font-family: var(--body-font-family);
  font-weight: var(--weight-bold);
  line-height: 1.5;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

div, span, applet, object, iframe, 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; }

/*23.04.03 에디터 영역 글꼴 적용을 위해 주석 처리
div, span, applet, object, iframe, 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: var(--body-font-size); font-family: var(--body-font-family); }*/

ol, ul, dl { list-style: none; margin:0; padding:0; }

table { border-collapse: collapse; border-spacing: 0; }
table caption{ font-size:0; height:0; margin:0; padding:0 }
table th, table td{ vertical-align: middle; }

a { color: var(--body-color); text-decoration: none; outline: none;  object-fit: contain; }
a:hover, a:active { text-decoration: none; color: inherit; background-color: transparent; }

button{border:0; background:none; cursor:pointer; color:inherit; font:inherit; margin:0; padding:0; border:0; border-radius: 0; }
button:hover{border:0;background:none; padding:0; margin:0}

.blind,iframe{overflow:hidden}
.blind{position:absolute;clip:rect(0 0 0 0);margin:-1px;width:1px;height:1px}


/*component*/
input, select, textarea {

             appearance: none;
          -o-appearance: none;
        -moz-appearance: none;
     -webkit-appearance: none;
  -webkit-border-radius: 0;
}

select{
  border-radius:0;
  height:var(--w-35);
  padding:0 var(--w-30) 0 var(--w-10); margin-right:0;
  font-family: var(--body-font-family);
  font-size:var(--font-size-14); 
  outline: none;
       -o-appearance: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
          background:url("../images/board/slt-arrow.svg") no-repeat calc(100% - 0.625rem ) center;

  }

select::-ms-expand{display:none}
select option{color:var(--gray-222)}
/*select option:checked {  color: var(--white);  background-color: var(--gray-222)}
select option:hover {  color: var(--white);  background-color: var(--gray-222)}*/


input[type="text"]{ height:var(--w-35); padding:0 var(--w-10); font-size:var(--font-size-14); font-family: var(--body-font-family);}
input[type="text"]::placeholder{ font-size:var(--font-size-14); color:var(--gray-a3a)}
[type="text"]::-moz-placeholder{ font-size:var(--font-size-14); color:var(--gray-a3a)}
[type="text"]::-webkit-placeholder{ font-size:var(--font-size-14); color:var(--gray-a3a)}
[type="text"]::-o-placeholder{ font-size:var(--font-size-14); color:var(--gray-a3a)}
[type="text"]:focus{ outline:none; border-color:var(--red-e41)}

input[type="submit"]{border:0; outline:0;}