@charset "utf-8";

@font-face {
   font-family: 'KleinSlabserif-Medium';
   src: url(../font/KleinSlabserif-Medium.woff) format('woff'),
        url(../font/KleinSlabserif-Medium.otf) format('otf'),
        url(../font/KleinSlabserif-Medium.ttf) format('truetype');
    
    font-family: 'Poppins-ExtraBold';
   src: url(../font/Poppins-ExtraBold.woff) format('woff'),
        url(../font/Poppins-ExtraBold.otf) format('otf'),
        url(../font/Poppins-ExtraBold.ttf) format('truetype');
    
    font-family: 'Poppins-Light';
   src: url(../font/Poppins-Light.woff) format('woff'),
        url(../font/Poppins-Light.otf) format('otf'),
        url(../font/Poppins-Light.ttf) format('truetype');
    
    font-family: 'AppleSDGothicNeoM';
   src: url(../font/AppleSDGothicNeoM.woff) format('woff'),
        url(../font/AppleSDGothicNeoM.otf) format('otf'),
        url(../font/AppleSDGothicNeoM.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%;
 }

}