.step-badge .avatar, .step-badge .hello, .step-badge .score-div {
	opacity: 0;
	transition-delay: unset;
	transition-duration: unset;
}

.animation-complete .avatar, .animation-complete .hello, .animation-complete .exit {
	transition-delay: 0s !important;
	transition-duration: 0s !important;
}

.step-badge #badge-board {
	pointer-events: visiblePainted;
	opacity: 1;
}

.layer.step-badge .world-canvas canvas {
	transform: translate(-860px, 200px) scale(0.65);
}

#badge-board, #tutorial-badge-board {
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 1920px;
	height: 1080px;
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.5s;
}

#tutorial-badge-board {
	opacity: 1;
}

.badge-menu-title {
	margin-top: 40px;
	height: 100px;
	width: 420px;
	margin-bottom: 100px;
	margin-left: 50px;
}

.badge-menu-title img {
	float: left;
	width: 100px;
	margin-right: 26px;
}

.badge-menu-title p {
	font-family: BarlowLight, sans-serif;
	float: left;
	font-size: 42px;
	color: #fff;
}

.badge-menu {
	float: left;
	width: 524px;
	height: 1080px;
	background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.badge-menu-item.active .badge-menu-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 433px;
	height: 108px;
  background: linear-gradient(10deg, rgba(237, 131, 123, 1) -30%, rgba(255, 255, 255, 0) 30%);
  opacity: 0.4;
}

.badge-menu-line {
	margin-left: 50px;
	border-bottom: 1px solid #fff;
	width: 384px;
	height: 1px;
}

.badge-quest {
	margin-top: 66px;
}

.badge-menu-item.active .badge-menu-line {
	margin-left: 0;
	border-bottom: unset;
	width: 434px;
	height: 4px;
	background: linear-gradient(to right, rgba(237, 131, 123, 1), rgba(135, 75, 70, 0));
}

.badge-underline {
	position: absolute;
	top: 120px;
	width: 205px;
	height: 1px;
	background-color: #ED837B;
	opacity: 0.5;
	transition: 0.8s;
}

.badge-underline.badge-2 {
	transform: translate(205px, 0);
}

.badge-underline.badge-4 {
	transform: translate(410px, 0);
}

.badge-underline.badge-5 {
	transform: translate(615px, 0);
}

.badge-underline.badge-1 {
	transform: translate(820px, 0);
}

.badge-underline.badge-all {
	transform: translate(1025px, 0);
}

.badge-scroll-area {
	position: relative;
	float: left;
	width: 1396px;
	height: 1080px;
	overflow-y: auto;
}

.badge-menu-item {
	position: relative;
	height: 108px;
	width: 524px;
}

.badge-menu-item.active p:nth-child(1) {
	color: #ED837B;
}

.badge-menu-item p:nth-child(1) {
	font-family: BarlowBold, sans-serif;
	line-height: 108px;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	text-align: left;
	margin-left: 50px;
}

.badge-menu-item p:nth-child(2) {
	position: absolute;
	bottom: 10px;
	right: 16px;
	font-size: 18px;
	color: #fff;
	opacity: 0;
	transition: opacity 1s;
}

.active.badge-menu-item p:nth-child(1), .active.badge-menu-item p:nth-child(2) {
	opacity: 1;
}

.badge-total-count {
	opacity: 0.5;
}

.badge-scroll-area .badge {
	margin-top: 24px;
	width: 120px;
	height: 162px;
	float: left;
	margin-left: 25px;
	margin-right: 30px;
}

.badge-scroll-area .badge img {
	width: 100%;
}

.badge-scroll-area .badge p {
	font-size: 17px;
	color: #fff;
	text-align: center;
}

.badge-scroll-area > div {
	display: none;
}

.badge-scroll-area > div.active {
	display: block;
	width: 1230px;
	margin-left: 76px;
	height: fit-content;
}

#badge-board .float-left, #tutorial-badge-board .float-left {
	float: left;
	width: 40%;
}

#badge-board .float-right, #tutorial-badge-board .float-right {
	float: right;
	width: 60%;
	text-align: right;
}

.photo-progress-body img {
	width: 100%;
	border-radius: 20px;
}

.badge-left-top-border-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.world-progress {
	position: relative;
  width: 100%;
  height: 220px;
  margin-top: 28px;
  margin-bottom: 50px;
}

.world-progress-bar {
    height: 30px;
    margin-top: 95px;
    /*width: 960px;
    margin-left: 220px;*/
    width: 630px;
 		margin-left: 550px;
}

#badge-quest .world-progress-bar {
	width: 630px;
  margin-left: 550px;
}

.world-progress p:nth-child(1) {
	font-family: BarlowBold, sans-serif;
	display: block;
    width: 500px;
    height: 136px;
    position: absolute;
    top: 34px;
    left: 0;
    font-size: 48px;
    font-weight: bold;
    color: #fff;
    z-index: 1;
    letter-spacing: 8px;
}

.world-progress p:nth-child(3) {
	position: absolute;
    top: 99px;
    left: 564px;
    font-size: 18px;
    line-height: 22px;
}

.world-progress p:nth-child(4) {
	position: absolute;
    top: 100px;
    right: 0;
    font-size: 16px;
    color: #fff;
}

.world-orb video {
	opacity: 0;
	left: 150px;
}

.world-orb > img {
	display: none;
}

.world-orb-img {
	position: absolute;
  top: -54px;
  left: 64px;
  display: block !important;
}

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  height: 30px;
  border-radius: 30px;
  background: rgba(255,255,255,0.4);
}
progress[value]::-webkit-progress-bar {
  height: 30px;
  border-radius: 30px;
  background: rgba(255,255,255,0.4);
}
progress[value]::-webkit-progress-value {
  height: 30px;
  border-radius: 30px;
  background: rgba(255,255,255,1);
}
progress[value]::-moz-progress-bar {
  height: 30px;
  border-radius: 30px;
  background: rgba(255,255,255,0.4);
}

.badge-progress progress[value] {
	height: 10px;
  	background: rgba(94,63,224,0.4);
}

.badge-progress progress[value]::-webkit-progress-bar {
  	height: 10px;
  	background: rgba(94,63,224,0.4);
}

.badge-progress progress[value]::-webkit-progress-value {
  	height: 10px;
  	background: rgba(94,63,224,1);
}

.badge-progress progress[value]::-moz-progress-bar {
  	height: 10px;
  	background: rgba(94,63,224,0.4);
}

.badge-progress-bar {
	position: absolute;
	top: 18px;
	right: 66px;
	width: 308px;
	height: 10px; 
}

.float-right span {
	line-height: 46px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-align: right;
}

.world-orb {
	position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    height: 220px;
}

.world-orb img {
	/*position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translate3d(0, -50%, 0px);
    opacity: 0;*/
}

.badge-progress-header, .medal-progress-header {
	position: relative;
	height: 46px;
	width: 1230px;
	margin-bottom: 30px;
}

.photo-progress-header {
	position: relative;
	height: 64px;
	width: 1230px;
	margin-bottom: 45px;
}

.badge-progress-header .float-left p:nth-child(1),
.photo-progress-header .float-left p:nth-child(1) {
	font-family: BarlowLight, sans-serif;
	font-size: 38px;
	line-height: 46px;
	color: #fff;
}

.badge-progress-header .float-left p:nth-child(2),
.photo-progress-header .float-left p:nth-child(2) {
	font-size: 16px;
	line-height: 18px;
	color: #fff;
}

.badge-icon {
	float: left;
	width: 180px;
	height: 180px;
	margin: 15px;
	filter: grayscale(1);
	opacity: 0.2;
	transition: 0.5s;
}

.badge-icon.active {
	filter: grayscale(0);
	opacity: 1;
}

.badge-icon:nth-child(6n) {
	margin-right: 0;
}

.badge-icon:nth-child(6n + 1) {
	margin-left: 0;
}

.badge-divider {
	width: 1230px;
	height: 1px;
	border-bottom: 1px solid #fff;
	margin-top: 90px;
	margin-bottom: 40px;
}

.photo-progress-body {
	padding-bottom: 200px;
}