@charset "UTF-8";
/* CSS Document */
/* Animations */
/* Page 1 */
@-webkit-keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes slide-in-fwd-center {
  0% {
    -webkit-transform: translateZ(-1400px);
            transform: translateZ(-1400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}


body, body * {
	vertical-align: baseline;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}

/* Div layer for the entire container. */
#dc_container {
	position: fixed;
	width: 100%;
    height: 100%;
	margin: auto;
	display:none;
	top: 0;
    left: 0;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: hidden;
	z-index: 999999999;
}

#dc_content {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 100;
}

#page_1{
	position: relative;
	z-index: 800;
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url("/cn-mnm/assets/bg1.jpg");
	background-position: center center;	}

#page_1 img{width:80%; height: auto; display:inline-flex;
	-webkit-animation: slide-in-fwd-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
	        animation: slide-in-fwd-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;			
}

#page_2{
	position: relative;	
	display: none; 
	align-items: center;
	z-index: 850;
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;
	flex-direction: column;
	background-image: url("/cn-mnm/assets/bg2.svg");
	background-position: center center;	
	background-size:cover;}

#mix {width:60%; height:auto; margin-top:10%;

}
#mix img{	-webkit-animation: slide-in-fwd-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
	        animation: slide-in-fwd-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;}
#video {width:90%; height:auto; margin-top:15%;}
#video iframe {width:100%; height:250px;	-webkit-animation: slide-in-fwd-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
	        animation: slide-in-fwd-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both;}


#button {width:35%; height:auto;  margin-top:15%;}
#button img {	-webkit-animation: slide-in-fwd-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s both;
	        animation: slide-in-fwd-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;}


#logocl {width:50%; height:auto; margin-top:15%;}
#logocl img{	-webkit-animation: slide-in-fwd-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
	        animation: slide-in-fwd-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s both;}

#info {
	position:absolute;
	bottom:5px;
	z-index: 999;
	left:5px;
	width:20px;
	height:20px;
}
#info img {
	position:inherit;
	width:100%
}
/* Invisible button for background clickthrough. */

#dc_background_exit{
	position: absolute;
	width: 25px;
	height: 25px;
	top: 10px;
	right: 10px;
	z-index: 998;
	cursor: pointer;
	opacity: 0;
}

#dc_bgImage{
	position: absolute;
	bottom: 0px;
	left: 0px;
}

#dc_expand_logo{
	position: absolute;
	left: 5px;
	top: 5px;
}

#dc_btnClose{
	display:none;
	position: absolute;
	width: 52px;
	height: 21px;
	top: 0px;
	right: 0px;
	z-index: 999;	
	cursor: pointer;
}