@charset "utf-8";



/* KleinSlabserif-Medium */
@font-face {
    font-family: 'KleinSlabserif-Medium';
    src: url('../font/KleinSlabserif-Medium.woff') format('woff'),
         url('../font/KleinSlabserif-Medium.otf') format('opentype'),
         url('../font/KleinSlabserif-Medium.ttf') format('truetype');
}

/* Poppins-ExtraBold */
@font-face {
    font-family: 'Poppins-ExtraBold';
    src: url('../font/Poppins-ExtraBold.woff') format('woff'),
         url('../font/Poppins-ExtraBold.otf') format('opentype'),
         url('../font/Poppins-ExtraBold.ttf') format('truetype');
}

/* Poppins-Light */
@font-face {
    font-family: 'Poppins-Light';
    src: url('../font/Poppins-Light.woff') format('woff'),
         url('../font/Poppins-Light.otf') format('opentype'),
         url('../font/Poppins-Light.ttf') format('truetype');
}

/* AppleSDGothicNeoM */
@font-face {
    font-family: 'AppleSDGothicNeoM';
    src: url('../font/AppleSDGothicNeoM.woff') format('woff'),
         url('../font/AppleSDGothicNeoM.otf') format('opentype'),
         url('../font/AppleSDGothicNeoM.ttf') format('truetype');
}

/* Pretendard-Regular */
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('../font/Pretendard-Regular.woff') format('woff'),
         url('../font/Pretendard-Regular.otf') format('opentype'),
         url('../font/Pretendard-Regular.ttf') format('truetype');
}

/* Pretendard-Light */
@font-face {
    font-family: 'Pretendard-Light';
    src: url('../font/Pretendard-Light.woff') format('woff'),
         url('../font/Pretendard-Light.otf') format('opentype'),
         url('../font/Pretendard-Light.ttf') format('truetype');
}

/* Pretendard-SemiBold */
@font-face {
    font-family: 'Pretendard-SemiBold';
    src: url('../font/Pretendard-SemiBold.woff') format('woff'),
         url('../font/Pretendard-SemiBold.otf') format('opentype'),
         url('../font/Pretendard-SemiBold.ttf') format('truetype');
}


/* 공통 영역 */
.clearfix:after {content:'';display:block;clear:both}
.hidden {display:none}
/* css reset */
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, sub, sup, tt, var,
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, button, input {	margin:0;padding:0;border:0;font-size:100%;font: inherit;box-sizing:border-box;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

a {text-decoration:none}
a:link, a:visited {text-decoration:none}
a:hover, a:active {text-decoration:none}
img {border:none;vertical-align:middle}
ol, ul, li {list-style:none}
*{box-sizing: border-box}

table {border-collapse: collapse;border-spacing: 0}
fieldset {border:none}
legend{width:1px;height:1px;overflow:hidden;visibility:hidden;line-height:0;font-size:0;position:absolute; left:-999px}

button, input[type="button"] {padding:0;margin:0;border:none;vertical-align:middle;cursor:pointer}
input{margin:0;padding:0;border:0}
input[type=text]::-ms-clear {display:none}
input[type=password]::-ms-clear {display:none}
textarea {resize:none}
input, select, button, textarea{outline: none}

h1,h2,h3,h4,h5{color: #131313;}

p{color: #555;letter-spacing: -.5px;font-weight:400;}


.gradient .gr_01{
     background: linear-gradient(-45deg, #222, #333, #000, #999);
     background-size: 400% 400%;
     animation: gradient 17s ease infinite;
}

.gradient .gr_02{
     background: linear-gradient(-45deg, #ffeacf, #e8b67a, #bb9362, #ffeed8);
     background-size: 400% 400%;
     animation: gradient 17s ease infinite;
}

@keyframes gradient {
 0% {
  background-position: 0% 50%;
 }
 50% {
  background-position: 100% 50%;
 }
 100% {
  background-position: 0% 50%;
 }

}