@charset "utf-8";

/*--------------------------------------
message
----------------------------------------*/
.contents{
	width:1000px;
	margin:0 auto;
	position:relative;
}

.wrapper{
	width:100%;
	min-width:1440px;
	margin:0 auto;
	position:relative;
}

#message{
	width:100%;
	min-width:1440px;
	margin:0 auto;
	position:relative;
	padding-bottom:70px;
}

#message #bg{
	width:100%;
	min-width:1440px;
	height:100%;
	background: url(../images/bg.png) center top;
	position:absolute;
	left:0;
	top:0;
	z-index:0;
}

#message h1{
	width:305px;
	margin:0 auto;
	padding-top:30px;
}

#message #message_inner{
	width:1000px;
	margin:25px auto 0;
	position:relative;
	background-color:#fff;
	border-radius:25px;
}

#message #message_inner h2{
	color: #FFF;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	line-height: normal;
	background-color:#E05959;
	border-radius: 25px 25px 0px 0px;
	padding:28px 0;
}

#message #message_inner p{
	width:590px;
	margin:0 auto;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 200%; /* 40px */
	padding:30px 0 50px;
}

#message #message_inner #character{
	width:191px;
	margin:0 auto;
	position:relative;
}

#message #message_inner span{
	display:block;
	color: #ABABAB;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	padding:8px 0 20px;
}

#btn_decide{
	width:250px;
	margin:40px auto 0;
	position:relative;
}

#btn_other{
	width:328px;
	margin:70px auto 0;
	position:relative;
}

#bnr_official{
	margin:70px auto 30px !important;
}

/*------------------------------------------
animation
------------------------------------------*/
/*#message #bg{
	animation: bgscroll 2s linear infinite;
}*/

@keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: -90px 0;}
}

@keyframes slideUp {
	0% { transform: translateY(30px) ; opacity:0;}
	100% { transform: translateY(0) ; opacity:1;}
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
    opacity: 0;
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
    opacity: 1;
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}

.bounceIn {
	animation-duration: 0.5s;
	animation-name: a-bounceIn;
	animation-fill-mode: both;
}


#message h1,
#message_inner,
#btn_decide,
#btn_other{
	opacity:0;
}


.is_loaded #message h1{
	animation-name: bounceIn;
	animation-duration: 0.6s;
	animation-delay: 1.4s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.is_loaded #message_inner{
  animation: slideUp 0.8s ease-out 2.0s forwards;
}

.is_loaded #btn_decide{
  animation: slideUp 0.8s ease-out 2.4s forwards;
}

.is_loaded #btn_other{
  animation: fadeIn 1.0s ease-out 2.8s forwards;
}