@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
	font-family:'Pretendard';
	font-weight: 45 920;
	font-style:normal; 
	font-display:swap; 
	src:url('../fonts/PretendardVariable.woff2') format('woff2-variations')
}
@font-face {
    font-family: 'Paperlogy';
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/Paperlogy-4Regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Paperlogy';
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/Paperlogy-5Medium.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Paperlogy';
    font-weight: 600;
    font-style: normal;
    src: url('../fonts/Paperlogy-6SemiBold.woff2') format('woff2');
    font-display: swap;
} 
@font-face {
    font-family: 'Paperlogy';
    font-weight: 700;
    font-style: normal;
    src: url('../fonts/Paperlogy-7Bold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  /*src: url(fonts/MaterialIcons-Regular.eot); !* For IE6-8 *!*/
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../fonts/MaterialIcons-Regular.woff) format('woff2'),
    url(../fonts/MaterialIcons-Regular.woff) format('woff'),
    url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../fonts/MaterialIconsOutlined-Regular.woff) format('woff2'),
    url(../fonts/MaterialIconsOutlined-Regular.woff) format('woff')
}

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

* {box-sizing:border-box;}
body {font-family:'Paperlogy', 'Pretendard', Arial, tahoma, Helvetica, sans-serif, Dotum; -webkit-text-size-adjust:100%;}
html, body {width:100%; height:100%; font-size:16px; color:#2d2d2d; line-height:1.6; letter-spacing:-0.4px; word-break: keep-all; word-wrap:break-word;}
ul {list-style:none;}
ol {margin-left:20px;}
a {color:inherit; text-decoration:none;}

h1, h2, h3, h4, h5, h6, caption {font-weight:700; word-break: keep-all;}
table {border-collapse:collapse; border-spacing:0; table-layout:fixed;}

img {max-width:100%;}
img, fieldset, iframe {border:0;}
img, input, button, select, textarea {vertical-align:middle; /* font-family:'Paperlogy', 'Pretendard', Arial, tahoma, Helvetica, sans-serif, Dotum; */ color:#2d2d2d;}
input, select, textarea {font-family:'Pretendard', Arial, tahoma, Helvetica, sans-serif, Dotum;}
button {border:0; cursor:pointer;}
legend, caption {width:1px; height:1px; text-indent:100%; overflow:hidden; font-size:0; line-height:0;} 
/* visibility:hidden;나 display:none는 스크린리더기가 읽을수 없으므로 사용하지 않도록 한다 */

address {font-style:normal; -webkit-text-size-adjust:100%;}

/* etc ------------------------------- */
.tc, .btn_center {text-align:center;}
.tl, .btn_left {text-align:left;}
.tr, .btn_right {text-align:right;}

.cboth {clear:both;}
.hidden {overflow:hidden;}
.bdnone {border:0;}

.inblock {display:inline-block;}
.dblock {display:block;}

.fl {float:left;}
.fr {float:right;}

th, .fontb, strong {font-weight:700;}

i, em {font-style:normal;}

iframe {border:0;}

/* margin ------------------------------- */
.mgt_5 {margin-top:-5px;}
.mgt5 {margin-top:5px;}
.mgt10 {margin-top:10px;}
.mgt15 {margin-top:15px;}
.mgt20 {margin-top:20px;}
.mgt30 {margin-top:30px;}
.mgt40 {margin-top:40px;}
.mgt50 {margin-top:50px;}
.mgt60 {margin-top:60px;}
.mgt70 {margin-top:70px;}
.mgb10 {margin-bottom:10px;}
.mgb20 {margin-bottom:20px;}
.mgb30 {margin-bottom:30px;}
.mgb40 {margin-bottom:40px;}
.mgb50 {margin-bottom:50px;}
.mgl10 {margin-left:10px;}
.mgl20 {margin-left:20px;}
.mgl30 {margin-left:30px;}
.mgl40 {margin-left:40px;}
.mgl50 {margin-left:50px;}
.mgl80 {margin-left:80px;}

.w5 {width:5%;}
.w6 {width:6%;}
.w7 {width:7%;}
.w8 {width:8%;}
.w10 {width:10%;}
.w15 {width:15%;}
.w20 {width:20%;}
.w25 {width:25%;}
.w30 {width:30%;}
.w35 {width:35%;}
.w40 {width:40%;}
.w45 {width:45%;}
.w50 {width:50%;}
.w60 {width:60%;}
.w70 {width:70%;}
.w80 {width:80%;}
.w90 {width:90%;}
.w95 {width:95%;}
.w100 {width:100%;}

input[type="password"] {/* font-family:Arial, Helvetica, sans-serif; */}

/* input ------------------------------- */
/* 모바일에서 스타일 제거 */
input[type=text], input[type="password"], input[type="number"], input[type="tel"], input[type="email"], input[type="url"], input[type="date"], input[type="button"], input[type="image"], input[type="submit"], input[type="search"], select, textarea {-webkit-appearance:none; -moz-appearance:none; appearance:none; -webkit-border-radius:0; -moz-box-size:border-box; box-sizing:border-box;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}
button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0;} /* button 태그 속성 reset하기 */
/* 기본스타일 정의 */
input[type=text], input[type="password"], input[type="number"], input[type="tel"], input[type="email"], input[type="url"], input[type="date"], input[type="search"], select, textarea {background:#fff; border:solid 1px #ccc; padding:0 10px; outline:none;}
input[type="button"] {cursor:pointer; overflow:visible; white-space:nowrap; border-radius:0px;}
select {background:#fff url(../images/form/icon_arrow_select.png) calc(100% - 10px) 50% no-repeat; background-size:9px;}
select::-ms-expand {display:none;} /* IE 10, 11의 네이티브 화살표 숨기기 */
textarea {width:100%; height:auto; resize:none;}
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):focus, select:focus, textarea:focus {border-color: #aaa; box-shadow:0px 0px 5px rgba(0,0,0,0.07);}

/* placeholder style (placeholder는 ie10 이상에서만 적용) */
input::placeholder {color:#bbb;}
textarea::placeholder {color:#bbb;}

::selection {background:rgba(252,214,61,0.7);}

/* 자동완성 배경컬러 없애기 */
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px #fff inset;} 
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {transition:background-color 5000s ease-in-out 0s;}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  vertical-align:middle;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
	vertical-align:middle;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons.md-18, .material-icons-outlined.md-18 {font-size:18px;}
.material-icons.md-36, .material-icons-outlined.md-36 {font-size:36px;}
.material-icons.md-48, .material-icons-outlined.md-48 {font-size:48px;}