* {
	cursor: url('images/cursor.png') 5 6, auto !important;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
	box-sizing: border-box;
	color: inherit;
	font-family: 'Hahmlet-Regular';
}
*::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }
*:hover { cursor: url('images/cursor.png') 5 6, auto !important; }
a:link { text-decoration: none; color: inherit; }
a:visited { text-decoration: none; color: inherit; }
a:active { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; color: inherit; }
@font-face {
    font-family: 'Hahmlet-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Hahmlet-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
	--color1 : #eee; /*배경색1*/
	--color2 : #b1b1b1; /*배경색2*/
	--color3 : #000000; /*텍스트 색상*/
	--color4 : rgba(107, 107, 107, 0.6); /*반투명 배경색*/
	--color5 : rgb(177, 15, 20); /*그림자*/
	--colorA : #353535; /*A테마컬러1*/
	--colorA2 : #ec5757; /*A테마컬러2*/
	--colorB : rgb(207, 207, 207); /*B테마컬러1*/
	--colorB2 : rgb(153, 124, 168); /*B테마컬러2*/
	--bggra : linear-gradient(to bottom, var(--color1), var(--color2));
	--fontK : 'Pretendard-Regular'; /*폰트*/
}

html { width: 100vw; height: 100vh; }

body {
	background-image: var(--bggra);
	background-repeat: no-repeat;
	background-attachment: fixed;
	width: 100vw;
	height: 100vh;
}

.blur {	filter: blur(10px); transition: all 0.1s linear; }
.visible { opacity: 1; visibility: visible; transition: all 0.1s linear; }
.hidden { opacity: 0;	visibility: collapse; transition: all 0.1s linear; }

.allwrap { width: 1560px; transition: all 0.1s linear; }

/*---데코---*/
.corner { width: 251px; height: 252px; position: fixed; z-index: 99; }
#topleft { top: 0; left: 0; transform: scaleY(-1) scaleX(-1);  }
#topright { top: 0; right: 0; transform: scaleY(-1); }
#bottomleft { bottom: 0; left: 0; transform: scaleX(-1); }
#bottomright { bottom: 0; right: 0; }

/*---조작버튼---*/
.buttons { position: fixed; bottom: 0; }
.buttons .btn { margin: 0 5px; font-size: 18pt; }
.buttons .btn i { transition: all 0.1s linear; }
.btnA.hair i { color: var(--colorA); }
.btnA.face i { color: var(--colorA2); }
.btnBG i { color: var(--color5); }
.btnB.hair i { color: var(--colorB); }
.btnB.face i { color: var(--colorB2); }
.btnB.top i { color: var(--colorB); }
.buttons .btn:hover i { color: white; transform: translateY(-10pt); text-shadow: 0 0 6px var(--color1); }

/*---정보 커버---*/

.infocover { width: 100vw; height: 100vh; position: fixed; z-index: 90; background-color: var(--color4); }
.coverinner { font-family: 'Hahmlet-Regular'; text-align: center; color: var(--color3); }
.coverinner strong { background-color: var(--color2); padding: 1px 2px; }
.coverinner a, .coverinner a:visited .coverinner a:link, .coverinner a:active, .coverinner .bi-x-lg { color: var(--color5); transition: all 0.2s ease; }
.coverinner a:hover, .coverinner .bi-x-lg:hover { color: white; }
.coverinner h1 { font-size: 14pt; color: var(--color5); margin-top: 40px; }
.coverinner .musicinfo { font-size: 10pt; }

/*---옷장,박스 정렬---*/
.closet { width: 360px; height: 500px; }
.charabox, .basetop { width: 800px; height: 650px; transition: all 0.2s ease; }
.charabox { background-image: url('images/bg/bg1.png'); }
.basetop { background-image: url('images/bg/basetop.png'); }
.charabase { width: 242px; height: 368px; margin-bottom: 40px; }
.charabase img { position: absolute; }
#closetA { background-image: url('images/bg/closet.png'); }
#closetB { background-image: url('images/bg/closet2.png'); }
.closetinbox { width: 240px; height: 280px; top: 112px; position: relative; }

/*---캐릭터---*/

#a_face2, .a_hair2, #a_fhair3 { display: none; }
.b_hair2, .b_hair3, .b_hair4, .b_top, #b_face2 { display: none; }

/*---의상---*/
.cc { position: absolute; transition: filter 0.2s ease; }
.cc:hover { filter: drop-shadow(0 0 5px var(--color5));}

.changeitem .fa-rotate {
	position: absolute; 
	opacity: 0;
	transition: all ease 200ms;
	left: 50%;
	top: -15px; 
	transform: translate(-50%, -50%);
}
.changeitem:hover .fa-rotate {
	opacity: 1; 
}


#abacc1a {
	transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	top: -25px; right: -30px; 
}
#aacc10 { top: 30px; right: -40px;  }
#aacc13 { top: -70px; right: -5px;  }

#ac1 { bottom: 40px; right: -40px; }
#ac5 { bottom: 0; right: 0; }
#ac6 { bottom: 0; right: 25px; }
#ac7 { bottom: 40px; right: 35px; }
#ac9 { bottom: 40px; right: 75px; }
#ac8 { bottom: 40px; right: 87px; }
#ac2 { bottom: 23px; left: -5px; }
#ac3 { bottom: 40px; left: -35px; }
#ac4 { bottom: 0; left: -80px; }
#ac11 { top: 30px; left: 60px; }
#ac14 { top: 30px; left: 30px; }
#ac12 { top: 30px; left: -50px; }
#ac10 { top: 30px; left: -15px; }
#ac13 { top: 30px; left: 10px; }
#abc9 { top: 30px; left: 80px; }

#aacc1 { width: 89px; height: 311px; top: 80px; right: -75px; }
#aacc1.on {	background-image: url('images/c/aacc1-1.png'); }
#aacc1.off { background-image: url('images/c/aacc1-2.png'); }

#abacc1 { width: 62px; height: 45px; top: 55px; right: -65px; }
#abacc1.on {	background-image: url('images/c/abacc1-1.png'); }
#abacc1.off { background-image: url('images/c/abacc1-2.png'); }
#aacc12 { width: 143px; height: 97px; top: -90px;  }
#aacc12.on {	background-image: url('images/c/aacc12-1.png'); }
#aacc12.off { background-image: url('images/c/aacc12-2.png'); }

#amini { left: 15px; top: -12px;  }




#bacc12 { width: 123px; height: 129px; top: -90px;  }
#bacc12.on {	background-image: url('images/c/bacc12-1.png'); }
#bacc12.off { background-image: url('images/c/bacc12-2.png'); }

#bacc10 { bottom: 10px; right: -75px;  }
#bacc10_2 { top: 45px; left: -40px;  }
#bacc13 { top: -70px; right: -5px;  }
#abacc1b { 	top: -5px; left: -30px;  }
#bc1 { bottom: 0; left: -40px; }
#bc2 { bottom: 0; left: -15px; }
#bc6 { bottom: 0; left: 35px; }
#bc7 { bottom: 0; left: 15px; }
#bc9 { bottom: 0; left: 60px; }
#bc8 { bottom: 0; left: 70px; }
#bc3 { bottom: 0; right: -15px; }
#bc5 { bottom: 0; right: -50px; }
#bc4 { bottom: 0; right: -90px; }
#bc11 { top: 30px; right: 50px; }
#bc14 { top: 30px; right: 30px; }
#bc12 { top: 30px; right: -50px; }
#bc10 { top: 30px; right: -15px; }
#bc13 { top: 30px; right: 10px; }
#abc9b { top: 30px; right: 80px; }
#bacc6 { bottom: -90px; left: 60px; }
#bmini { right: 15px; top: -12px; }
#bacc5 { bottom: -95px; left: -30px; }
#bacc1 { bottom: -90px; left: -100px; }
#bacc11 { top: -25px; right: -7px;  }