@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/AritaBuri/AritaBuri.css');
@import url('https://fonts.googleapis.com/css2?family=Bentham&display=swap');
/* ======================================
   기본 리셋
   ====================================== */
* {
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none;
}

/* ======================================
   HTML 기본 설정
   ====================================== */
html {
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-size-adjust: none;
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;
}

/* ======================================
   Body & 기본 폰트/레이아웃 설정
   ====================================== */
html,
body {
  color: #000;
  font-family: 'Arita Buri', serif;
  font-size: 16px;
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: 400;
  height: 100%;
  min-width: 320px;
  letter-spacing: -0.1em;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

/* ======================================
   요소별 초기화 (Reset)
   ====================================== */
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, a, abbr, address, cite, em, img,
strong, 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, section, summary, audio, video {
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

/* 헤딩 기본 스타일 */
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
  line-height: normal;
}

/* 기타 요소 마진/패딩 초기화 */
dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p,
blockquote {
  margin: 0;
  padding: 0;
}

/* ======================================
   폼 요소 기본 스타일
   ====================================== */
/* 폰트 상속 및 수직 정렬 */
input, textarea, select,
label, select, input, button {
  font-family: inherit;
  vertical-align: baseline;
}

select {
  -webkit-border-radius: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

input[type="text"],
input[type="date"],
input[type="password"],
input[type="submit"] {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

input[type="image"] {
  border: 0;
  height: auto;
}

input[type="file"] {
  background: none;
  border: 0;
}

textarea {
  overflow-y: auto;
}

input[type="checkbox"],
input[type="radio"] {
  vertical-align: middle;
}

label {
  cursor: pointer;
}

/* ======================================
   테이블 및 리스트 스타일
   ====================================== */
table {
  border-collapse: collapse;
  border-spacing: 0;
  display: table;
}

caption {
  display: table-caption;
}

colgroup {
  display: table-column-group;
}

col {
  display: table-column;
}

thead {
  display: table-header-group;
}

tbody {
  display: table-row-group;
}

tfoot {
  display: table-footer-group;
}

tr {
  display: table-row;
}

td, th {
  display: table-cell;
}

ol, ul, li {
  list-style: none;
  display: list-item;
}

/* ======================================
   이미지 및 기타 엘리먼트 스타일
   ====================================== */
img {
  border: 0;
  image-rendering: auto;
  vertical-align: middle;
}

img,
fieldset {
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

/* 인용문 스타일 */
blockquote, q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

/* 텍스트 스타일 */
em, address {
  font-style: normal;
}

/* ======================================
   기타 유틸리티 스타일
   ====================================== */
hr {
  clear: both;
  display: none;
  height: 0;
}

legend, caption {
  height: 0;
  line-height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  visibility: hidden;
  width: 0;
}

/* 숨김 처리할 요소들 */
[hidden],
area,
base,
basefont,
command,
datalist,
head,
input[type="hidden"],
link,
menu[type="context"],
meta,
noembed,
noframes,
param,
script,
source,
style,
track,
title {
  display: none;
}

/* 블록 요소 강제 설정 */
address, article, aside, blockquote, body, center, dd, dir, div, dl, dt, figure, figcaption,
footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, legend, listing, menu, nav, ol,
p, plaintext, pre, section, summary, ul, xmp {
  display: block;
}

/* 루비 텍스트 */
ruby {
  display: ruby;
}
rt {
  display: inline;
  display: ruby-text;
}

/* ======================================
   선택 영역 및 기타 효과
   ====================================== */
/* 텍스트 선택 영역 */
::selection {
  background: #222;
  color: #fff;
}

/* clearfix */
.clearfix::after {
  clear: both;
  content: '';
  display: block;
}

/* placeholder 색상 */
::-webkit-input-placeholder {
  color: #666 !important;
}
:-moz-placeholder {
  color: #666 !important;
  opacity: 1;
}
::-moz-placeholder {
  color: #666 !important;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #666 !important;
}

/* 포커스 시 테두리 */
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus {
  border: 1px solid #222;
  outline: none;
}

/* autofill 시 박스 쉐도우 제거 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset !important;
}

/* ======================================
   스크롤바 스타일 (Webkit)
   ====================================== */
html::-webkit-scrollbar {
  width: 2px;
}

html::-webkit-scrollbar-track {
  background: #111;
}

html::-webkit-scrollbar-thumb {
  background-color: #c00b15;
  border-radius: 100px;
}

.ssrf_font{font-family: "Wanted Sans Variable", "Wanted Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; letter-spacing:-0.04em;}

.scroll-animate{opacity:0;transition:all 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
.scroll-animate.active{opacity:1;}
.scroll-animate[data-animation="fadeInUp"]{transform:translateY(30px);}
.scroll-animate[data-animation="fadeInUp"].active{transform:translateY(0);}
.scroll-animate[data-animation="fadeInDown"]{transform:translateY(-30px);}
.scroll-animate[data-animation="fadeInDown"].active{transform:translateY(0);}
.scroll-animate[data-animation="fadeInLeft"]{transform:translateX(-30px);}
.scroll-animate[data-animation="fadeInLeft"].active{transform:translateX(0);}
.scroll-animate[data-animation="fadeInRight"]{transform:translateX(30px);}
.scroll-animate[data-animation="fadeInRight"].active{transform:translateX(0);}
.scroll-animate[data-animation="zoomIn"]{transform:scale(0.9);}
.scroll-animate[data-animation="zoomIn"].active{transform:scale(1);}
.scroll-animate[data-animation="fadeIn"]{opacity:0;}
.scroll-animate[data-animation="fadeIn"].active{opacity:1;}

.scroll-animate[data-animation="zoomBounce"]{opacity:0;transform:scale(0.3);}
.scroll-animate[data-animation="zoomBounce"].active{animation:zoomBounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;}
@keyframes zoomBounce{
	0%{opacity:0;transform:scale(0.3);}
	50%{opacity:1;transform:scale(1.15);}
	65%{transform:scale(0.95);}
	80%{transform:scale(1.05);}
	100%{opacity:1;transform:scale(1);}
}

.scroll-animate[data-animation="rotateIn"]{opacity:0;transform:rotate(-180deg) scale(0.5);}
.scroll-animate[data-animation="rotateIn"].active{animation:rotateIn 1s ease forwards;}
@keyframes rotateIn{
	0%{opacity:0;transform:rotate(-180deg) scale(0.5);}
	100%{opacity:1;transform:rotate(0deg) scale(1);}
}

.scroll-animate[data-animation="flipX"]{opacity:0;transform:perspective(1000px) rotateX(-90deg);}
.scroll-animate[data-animation="flipX"].active{animation:flipX 1s ease forwards;}
@keyframes flipX{
	0%{opacity:0;transform:perspective(1000px) rotateX(-90deg);}
	100%{opacity:1;transform:perspective(1000px) rotateX(0deg);}
}

.scroll-animate[data-animation="flipY"]{opacity:0;transform:perspective(1000px) rotateY(-90deg);}
.scroll-animate[data-animation="flipY"].active{animation:flipY 1s ease forwards;}
@keyframes flipY{
	0%{opacity:0;transform:perspective(1000px) rotateY(-90deg);}
	100%{opacity:1;transform:perspective(1000px) rotateY(0deg);}
}

.scroll-animate[data-animation="swing"]{opacity:0;transform-origin:top center;}
.scroll-animate[data-animation="swing"].active{animation:swing 1s ease forwards;}
@keyframes swing{
	0%{opacity:0;transform:rotate(-15deg);}
	20%{transform:rotate(10deg);}
	40%{transform:rotate(-10deg);}
	60%{transform:rotate(6deg);}
	80%{transform:rotate(-3deg);}
	100%{opacity:1;transform:rotate(0deg);}
}

.scroll-animate[data-animation="bounceDown"]{opacity:0;transform:translateY(-100px);}
.scroll-animate[data-animation="bounceDown"].active{animation:bounceDown 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;}
@keyframes bounceDown{
	0%{opacity:0;transform:translateY(-100px);}
	60%{opacity:1;transform:translateY(20px);}
	80%{transform:translateY(-10px);}
	100%{opacity:1;transform:translateY(0);}
}

.scroll-animate[data-animation="bounceUp"]{opacity:0;transform:translateY(100px);}
.scroll-animate[data-animation="bounceUp"].active{animation:bounceUp 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;}
@keyframes bounceUp{
	0%{opacity:0;transform:translateY(100px);}
	60%{opacity:1;transform:translateY(-20px);}
	80%{transform:translateY(10px);}
	100%{opacity:1;transform:translateY(0);}
}

.scroll-animate[data-animation="slideRotate"]{opacity:0;transform:translateX(-100px) rotate(-45deg);}
.scroll-animate[data-animation="slideRotate"].active{animation:slideRotate 1s ease forwards;}
@keyframes slideRotate{
	0%{opacity:0;transform:translateX(-100px) rotate(-45deg);}
	100%{opacity:1;transform:translateX(0) rotate(0deg);}
}

.scroll-animate[data-animation="pulse"]{opacity:0;}
.scroll-animate[data-animation="pulse"].active{animation:pulse 1s ease forwards;}
@keyframes pulse{
	0%{opacity:0;transform:scale(0.8);}
	50%{opacity:1;transform:scale(1.1);}
	100%{opacity:1;transform:scale(1);}
}

.scroll-animate[data-animation="rubberBand"]{opacity:0;}
.scroll-animate[data-animation="rubberBand"].active{animation:rubberBand 1s ease forwards;}
@keyframes rubberBand{
	0%{opacity:0;transform:scale(1, 1);}
	30%{transform:scale(1.25, 0.75);}
	40%{transform:scale(0.75, 1.25);}
	50%{transform:scale(1.15, 0.85);}
	65%{transform:scale(0.95, 1.05);}
	75%{transform:scale(1.05, 0.95);}
	100%{opacity:1;transform:scale(1, 1);}
}

.scroll-animate[data-animation="tada"]{opacity:0;}
.scroll-animate[data-animation="tada"].active{animation:tada 1s ease forwards;}
@keyframes tada{
	0%{opacity:0;transform:scale(1) rotate(0deg);}
	10%, 20%{transform:scale(0.9) rotate(-3deg);}
	30%, 50%, 70%, 90%{transform:scale(1.1) rotate(3deg);}
	40%, 60%, 80%{transform:scale(1.1) rotate(-3deg);}
	100%{opacity:1;transform:scale(1) rotate(0deg);}
}

.scroll-animate[data-animation="wobble"]{opacity:0;}
.scroll-animate[data-animation="wobble"].active{animation:wobble 1s ease forwards;}
@keyframes wobble{
	0%{opacity:0;transform:translateX(0%);}
	15%{transform:translateX(-25%) rotate(-5deg);}
	30%{transform:translateX(20%) rotate(3deg);}
	45%{transform:translateX(-15%) rotate(-3deg);}
	60%{transform:translateX(10%) rotate(2deg);}
	75%{transform:translateX(-5%) rotate(-1deg);}
	100%{opacity:1;transform:translateX(0%);}
}

.scroll-animate[data-animation="jello"]{opacity:0;transform-origin:center;}
.scroll-animate[data-animation="jello"].active{animation:jello 1s ease forwards;}
@keyframes jello{
	0%, 11.1%{opacity:0;transform:skewX(0deg) skewY(0deg);}
	22.2%{transform:skewX(-12.5deg) skewY(-12.5deg);}
	33.3%{transform:skewX(6.25deg) skewY(6.25deg);}
	44.4%{transform:skewX(-3.125deg) skewY(-3.125deg);}
	55.5%{transform:skewX(1.5625deg) skewY(1.5625deg);}
	66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg);}
	77.7%{transform:skewX(0.390625deg) skewY(0.390625deg);}
	88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg);}
	100%{opacity:1;transform:skewX(0deg) skewY(0deg);}
}

.scroll-animate[data-animation="heartBeat"]{opacity:0;}
.scroll-animate[data-animation="heartBeat"].active{animation:heartBeat 1.3s ease forwards;}
@keyframes heartBeat{
	0%{opacity:0;transform:scale(1);}
	14%{transform:scale(1.3);}
	28%{transform:scale(1);}
	42%{transform:scale(1.3);}
	70%{transform:scale(1);}
	100%{opacity:1;transform:scale(1);}
}


.scroll-animate[data-animation="zoomBounce"],
.scroll-animate[data-animation="rotateIn"],
.scroll-animate[data-animation="flipX"],
.scroll-animate[data-animation="flipY"],
.scroll-animate[data-animation="swing"],
.scroll-animate[data-animation="bounceDown"],
.scroll-animate[data-animation="bounceUp"],
.scroll-animate[data-animation="slideRotate"],
.scroll-animate[data-animation="pulse"],
.scroll-animate[data-animation="rubberBand"],
.scroll-animate[data-animation="tada"],
.scroll-animate[data-animation="wobble"],
.scroll-animate[data-animation="jello"],
.scroll-animate[data-animation="heartBeat"]{
	animation-fill-mode:both;
}

/* delay 0ms */
.scroll-animate[data-delay="0"].active{animation-delay:0ms;}
/* delay 100ms */
.scroll-animate[data-delay="100"].active{animation-delay:100ms;}
/* delay 200ms */
.scroll-animate[data-delay="200"].active{animation-delay:200ms;}
/* delay 300ms */
.scroll-animate[data-delay="300"].active{animation-delay:300ms;}
/* delay 400ms */
.scroll-animate[data-delay="400"].active{animation-delay:400ms;}
/* delay 500ms */
.scroll-animate[data-delay="500"].active{animation-delay:500ms;}
/* delay 600ms */
.scroll-animate[data-delay="600"].active{animation-delay:600ms;}
/* delay 700ms */
.scroll-animate[data-delay="700"].active{animation-delay:700ms;}
/* delay 800ms */
.scroll-animate[data-delay="800"].active{animation-delay:800ms;}
/* delay 900ms */
.scroll-animate[data-delay="900"].active{animation-delay:900ms;}
/* delay 1000ms */
.scroll-animate[data-delay="1000"].active{animation-delay:1000ms;}