#narr { 
	position: absolute; 
	bottom: 64px; left: 0;  
	width: 100%;
	z-index: 4002;
    display: none;
    
    color:#fff;
}

#narr .groups { 
	width: 1000px;
	max-width: 95%;
	margin: auto;
	position: relative;
 } 
#narr .textgroup { 
	display: table; 
	background: rgba(50,50,50,0.8);
	border-radius: 5px;
 }
#narr .icon { display: table-cell; vertical-align: middle; width:48px; padding: 10px; padding-right: 0; position:relative; height: 100%; }
#narr .icon i { 
	width: 48px; height: 48px; display: block; text-align: center; background: #626263; border-radius: 64px; 
	line-height: 48px;
	font-size: 32px;
	z-index: 5; 
	position: relative;
}

#narr .icon ul { 
    position: absolute; left:50%; top: 60px; width: 48px; height: 48px; margin-left: -19px; margin-top: -24px; z-index: 4;
 }
#narr .icon ul li { 
	width: 100%; height: 100%; border-radius: 48px; border: 2px solid #fff; position: absolute; left:0; top: 0; opacity: 0;
	transition: opacity .2s linear;
	animation: spkanimte 4s ease-in-out infinite;
	transform: scale(0.8);
}

#narr .icon ul li:first-child {
    animation-delay: 0;
}

#narr .icon ul li:nth-child(2) {
    animation-delay: 0.8s;
}

#narr .icon ul li:nth-child(3) {
    animation-delay: 1.6s;
}

#narr .icon ul li:nth-child(4) {
    animation-delay: 2.4s;
}

#narr .icon ul li:nth-child(5) {
    animation-delay: 3.2s;
}

@keyframes spkanimte {
    0% {
        transform: scale(0.8);
        opacity: .8;
    }
    50% {
        transform: scale(1.2);
        opacity: .5;
    }
    100% {
        transform: scale(1.5);
        opacity: .1;
    }
}


#narr .text { 
	display: table-cell; padding: 10px 10px 10px 10px; vertical-align: middle; font-size: 11px; line-height: 18px;
	width: 100%;
	text-align: center;
	/*word-break: keep-all;
	*/
}
#narr .text .insert { height: 100px; overflow-y: auto; padding-right: 10px; color: #fff; }

#narr .text p { margin: 5px 0; padding: 0;}

#narr .close { 
	position: absolute; right: 0; top: -50px;
	border-radius: 44px;
	width: 36px; 
	height: 36px; 
	font-size: 20px;
	text-align: center; 
	background: rgba(0,0,0,0.8);
	cursor: pointer;
    display: table;
}
#narr .close i { display: table-cell; vertical-align: middle;}

#narr .audio { 
	height: 6px; border-radius: 5px;
	position: absolute; 
	top: 0; background: #ca2327;
	width: 0;
	transition: width 1.4s linear;

}
#narr .audio audio { display: none; }




.mobile-ver #narr { 
	bottom: 5px; left: 5%;  
	width: 90%; margin-left: 0;
	background: rgba(50,50,50,0.8);
	border-radius: 5px;
	display: none;
}

.mobile-ver #narr .icon { width:32px; }
.mobile-ver #narr .icon i { 
	width: 32px; height: 32px;
	line-height: 32px;
	font-size: 24px;
}
.mobile-ver #narr .text { padding-right: 10px; }