* {
	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 : #FFD0DC; /*배경색1*/
	--color2 : #eaeaea; /*배경색2*/
	--color3 : #694b4c; /*텍스트 색상*/
	--color4 : rgba(208, 207, 207, 0.6); /*반투명 배경색*/
	--color5 : #8a8a8a; /*그림자*/
	--colorA : #f63939; /*A테마컬러1*/
	--colorA2 : #ff8888; /*A테마컬러12*/
	--colorB : #424242; /*B테마컬러1*/
	--colorB2 : #7ea3d6; /*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; }
#A1 i, #A2 i, #A3 i { color: var(--colorA); }
#A4 i, #A5 i { color: var(--colorA2); }
#B1 i, #B2 i { color: var(--colorB); }
#B3 i, #B4 i { color: var(--colorB2); }
.btnBG i { color: var(--color5); }
.btnB 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: 240px; height: 360px; margin-bottom: 40px; }
.charabase img { position: absolute; }
#charaA {  }
#charaB { }
#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_body2, #b_body2, #a_hair2, #a_hair3, #b_hair2 { display: none; }

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

#ac1 { bottom: 0; right: -30px; }
#ac2 { bottom: 0; right: 28px;}
#ac3 { bottom: 0; right: 30px; }
#ac4 { bottom: -12px; right: 55px; }
#ac5 { bottom: 0; left: 0px; }
#ac6 { bottom: 0; left: -20px; }
#ac7 { top: 30px; left: -40px; }
#ac8 { top: 30px; left: 30px; }

#aacc1 { bottom: -30px; right: -40px; }
#aacc4 { top: 0px; left: -60px;  }
#aacc5 { top: -80px; left: -80px; }
#aacc6 { top: -130px; left: -40px; }
#aacc8 { top: -30px;right: -10px; }
#amini { top: -130px; left: 110px;  }

#bc1 { bottom: 0; left: -30px; }
#bc2 { bottom: 0; left: 10px; }
#bc3 { bottom: 0; left: 15px; }
#bc4 { bottom: -12px; left: 45px; }
#bc5 { bottom: 0; right: -5px; }
#bc6 { bottom: 0; right: -35px; ; }
#bc7 { top: 30px; right: -45px; }
#bc8 { top: 30px; right: 20px; }

#bacc1 { bottom: -10px; left: -70px; }
#bacc3 { top: 50px; left: 20px; }
#bacc4 { top: -20px; right: -60px; }
#bacc5 { bottom: 0; right: 0; }
#bacc6 { top: -130px; right: -30px; }
#bacc7 { top: -30px; left: -50px; }
#bacc8 { top: -30px; right: -10px; }
#bmini { top: -130px; right: 130px; }
#bacc0 { top: -5px; }