/* 기본값 s */
html,
body {
  position: relative;
  height: 100%;
  width: 100%;
  --color-texta: #1d1d1d;
  --color-textb: #fff;
}

body {
  background: #f5f1f0;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
  transition: 0.3s;
  box-sizing: border-box;
  font-weight: 300;
  cursor: none;
  font-family: 'SUIT';
}

* {
  margin: 0;
  padding: 0;
  cursor: none;
}

a {
	text-decoration: none;
	color: #000;
	display: block;
}

ul {
	list-style: none;
}

.img {
	background-repeat: no-repeat;
	background-size: cover;
}

.blind {
    overflow: hidden !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    color: transparent !important;
    clip: rect(0px, 0px, 0px, 0px) !important;
}
/* 기본값 e */


/* 스크롤바 s */
::-webkit-scrollbar-thumb {
	border-radius: 57px;
	background-color: #d0d0d0;
	width: 10px;
	height: 10px;
	/* -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1); */
}

::-webkit-scrollbar-track {
	background-color: #f6f6fe;
	height: 100px;
	margin-left: -6px;
}

::-webkit-scrollbar-button {
	width: 0px;
	height: 0;
}

::-webkit-scrollbar {
	width: 8px;
	height: 4px;
}
/* 스크롤바 e */


/* 포커스 s */
:focus {
    outline: 3px solid #aaa;
}
 
:focus:not(:focus-visible) {
    outline: 0;
}

select:focus {
	border: 1px solid var(--color-b-04);
    background: #fff url(./img/icon/arrow-top.png) 94% 50% / 8px no-repeat;

}

input[type="checkbox"]:focus {
    outline: 3px solid #aaa;
}
 
input[type="checkbox"]:focus:not(:focus-visible) {
    outline: 0;
}

input[type="radio"]:focus {
    outline: 3px solid #aaa;
}
 
input[type="radio"]:focus:not(:focus-visible) {
    outline: 0;
}

textarea:focus {
    outline: 3px solid #aaa;
}
 
textarea:focus:not(:focus-visible) {
    outline: 0;
}
/* 포커스 e */

/* 마우스 커서 s */

#cursorFollower {
    position: fixed;
    border-radius: 100%;
    top: 0;
    left: 0;
    will-change: transform;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
    transform: translate3d(0,0,0);
    z-index: 2;
}

#cursorFollower .default {
    width: 50px;
    height: 50px;
    border: 0.11vw solid #D7EC00;
    border-radius: 1000px;
    background: #E7E73F;
    position: absolute;
    will-change: transform;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
    transform: translate(-50%,-50%);
    transition: width 0.1s, height 0.1s;
    border-radius: 50px;
}

#cursorFollower .color_box {
    display: none;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 1000px;
    background-size: 100% 100%;
    transition: 0.5s all;
    position: absolute;
    will-change: transform;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
    transform: translate(-50%,-50%);
    transition: 0.5s background-color;
} 
 
.cursor_s {
    display: flex;
    padding: 10px;
    margin: 0;
    transition: color 0.3s;
    justify-content: center;
    align-items: center;
}


/* 마우스 커서 e */


/* header s */
/* header {
	width: calc(100% - 40px);
	position: fixed;
	z-index: 10;
	left: 20px;
	display: flex;
	align-items: center;
	top: 20px;
	justify-content: space-between;
} */

header {
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	position: fixed;
	z-index: 10;
	/* left: 20px; */
	display: flex;
	align-items: center;
/* 	top: 20px; */
	justify-content: space-between;
}

header .logo {
	box-sizing: border-box;
	display: flex;
	margin: 0px;
	perspective: 1000px;
	/* background: rgb(255, 255, 255); */
	height: 34px;
	width: 34px;
	z-index: 3;
	justify-content: center;
	align-content: center;
}
header .logo.on svg {
	color: #fff;
	fill: #fff !important;
}
header .logo svg {
	/* background: rgb(255, 255, 255); */
	transform-style: preserve-3d;
	width: 34px;
	height: 34px;
	color: #232323;
	fill: rgb(35, 35, 35);
}

header .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 200px;
}

.right-btn {
	width: 34px;
	height: 34px;
	margin: 0;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	/* cursor: pointer; */
}
.menubox.on span {
	background:#fff;
}
.right-btn button {
	border: none;
	background: none;
}
button {
	color:#000;
}
.menubox {
	width: 34px;
	gap: 7px;
	display: flex;
	flex-direction: column;
	transition: .3s;
	background: #0000;
	position: relative;
	z-index: 3;
	transition: .3s;
}

.menubox span {
	width: 34px;
	height: 5px;
	transition: .3s;
	background-color: #232323;
}

.menubox span:nth-child(2) {
	opacity: 1;
}

.right-btn.on .menubox {
	gap: 0;
	transition: .3s;
}

.right-btn.on .menubox span {
	height: 4px;
	transition: .3s;
}

.right-btn.on .menubox span:nth-child(1) {
	transform: rotate(46deg);
	position: absolute;
	top: 0;
	width: 34px;
	left: 0px;
	background-color: #fff;
}

.right-btn.on .menubox span:nth-child(2) {
	opacity: 0;
}

.right-btn.on .menubox span:nth-child(3) {
    transform: rotate(-46deg);
    position: absolute;
    width: 34px;
    right: 0px;
    background-color: #fff;
}

.menupage {
	top: 0;
	left: 100%;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0);
	display: flex;
	flex-direction: column;
	gap: 60px;
	justify-content: center;
	/* transition: cubic-bezier(0.62, 0.02, 0, 0.99); */
	/* visibility: hidden; */
	align-items: center;
	transition: 1s;
}

.menupage.on {
	left: 0;
}

.menupage .menutxt {
	position: relative;
	height: 82px;
	margin: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	align-content: center;
	transition: .3s;
}

.menupage .menutxt .list {
	font-size: 80px;
	font-weight: var(--font-w4);
	text-transform: uppercase;
	/* height: clamp(3rem, 8vw, 7.5rem); */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	font-family: 'SUIT';
	font-weight: 900;
	color: #fff;
	/* transition: .3s; */
}
.menupage .menutxt .list a:hover {
	color: #D9D9D9;
}
.menupage .menutxt .list a {
	/* opacity: 1; */
	display: flex;
	/* gap: clamp(16px, 2vw, 40px); */
	color: #fff;
	/* transition: .3s; */
}

.menupage .menutxt .list a .menu-txt {
	/* opacity: 1; */
	display: flex;
	font-family: var(--font-f2);
}

.menupage .menutxt .list a .menu-txt p {
	position: relative;
}

.menupage .menutxt .list a .menu-txt img {
	width: 100%;
	height: 90%;
	display: flex;
}

.menupage .menutxt .list a .menu-txt p span.m-hover {
	position: absolute;

}

.menupage .menutxt .list a .menu-txt p span.m-hover::after {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(12px, 1vw, 16px);
	position: absolute;
	height: 93%;
	transition: cubic-bezier(0.94, -0.13, 0.14, 1.37);
	font-family: var(--font-f2);
	/* transform: translateY(-3px); */
}

/* header e */





.arrow_btn {
	height: 40px;
	width: 40px;
	background: #fff url(./img/arrow_.png)50% 50% / 60% no-repeat;
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 6px;
	box-sizing: border-box;
}