@charset "utf-8";



/* RESET CSS */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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;
	font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a{
	text-decoration: none;
}

img{
	vertical-align: top;
	pointer-events: none;
}





a{
	position: relative;
}



/* SEO */
.visibilityHidden{
	overflow: hidden;
    display: inline-block;
    position: absolute;
    z-index: -1;
    border: 0;
    width: 1px;
    height: 1px;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
}


/* FONT SETTING */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");

*{
	
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: -0.02rem;
	color: #111;
	
}

.righteous{
	font-family: 'righteous', cursive;
}

/* font-responsive */

@media screen and (max-width: 1500px){
	*{ font-size: 15px; }
}

@media screen and (max-width: 1024px){
	*{ font-size: 14px; }
}

@media screen and (max-width: 767px){
	*{ font-size: 13px; }
}

@media screen and (max-width: 320px){
	*{ font-size: 12px; }
}


/* COLOR-SYSTEM */
:root{
	--bg: #fff;

	--text-color01: #111;
	--text-color02: #4a4a4a;
	--text-color03: #8a8a8a;
	
	--bg-color01: #faf9fc;
	--bg-color02: #fcfaff;
	--bg-color03: #f2eff7;
	
	--gray: #e7e7e7;
	--gray01:#c8c8c8;
	
	--pink01: #f84d76;
	--pink02: #fb96ae;
	--pink03: #ffd3de;
	--pink04: #fee5ec;
	
	--green01: #2ea712;
	--green02: #7ecb6c;
	--green03: #beefb2;
	--green04: #d8f9d0;
	
	--yellow01: #ff9a22;
	--yellow02: #f9cf74;
	--yellow03: #fde7b7;
	--yellow04: #fef2d9;

	--orange01: #ff5400;
	
	--purple01: #6a00e3;
	--purple02: #974fe9;
	--purple03: #c198f0;
	--purple04: #e5d4f8;
	--purple05: #efe3fc;

	--line-color: rgba(0,0,0,0.3);

	
	
	
}

.dark {
  --bg: #222;
}

body{
	transition: 0.4s;
}

body.dark{
	background-color: var(--bg);
}

/* cursor */
.cursor {
  position: fixed;
  background: #2128bd;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  will-change: transform;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  z-index: 10000;
}

::-moz-selection {
  color: #fff;
  background: #2128bd;
}

::selection {
  color: #fff;
  background: #2128bd;
}


/* 공통스타일 */

	/* 100vw 빠져나가는 애들 자르기  */
	body{
		overflow: auto;
	}

	body::-webkit-scrollbar{
		width: 5px;
		background: transparent;
	}

	body::-webkit-scrollbar-thumb{
		background-color: var(--purple01);
		border-radius: 50px;
	}

	body::-webkit-scrollbar-track{
		background-color: var(--purple04);
	}

	.wrapper{
		
		width: calc(100vw * 0.8);
		margin: 0 auto;
		
	}