@charset "UTF-8";

body{margin:0;}

.cm_message{position:fixed;left:0;top:0;width:100%;height:100%;}

.cm_message .box{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 30px);max-width:350px;box-sizing:border-box;}
.cm_message .box .logo{position:relative;text-align:center;}
.cm_message .box .logo img{position:relative;display:block;margin:0 auto;height:35px;}
.cm_message .box .code{position:relative;font-size:40px;font-weight:900;color:#000000;line-height:1;margin-top:50px;text-align:center;}
.cm_message .box .code.code_text{font-size:10px;}
.cm_message .box .msg{position:relative;font-size:20px;font-weight:700;color:#000000;line-height:1;margin-top:18px;white-space:nowrap;text-align:center;}
.cm_message .box .button_area{position:relative;margin-top:30px;}
.cm_message .box .button_area ul{position:relative;margin:0;padding:0;list-style:none;text-align;center;}
.cm_message .box .button_area ul li{position:relative;}
.cm_message .box .button_area .button{position:relative;margin:0;padding:0;width:100%;box-sizing:border-box;border-radius:5px;height:50px;line-height:50px;display:block;text-align:center;text-decoration:none;color:#ffffff;font-size:18px;font-weight:700;background-color:#000000;cursor:pointer;border:0;box-sizing:border-box;-webkit-appearance:none;transition:background-color ease 0.3s,border-color ease 0.3s;}
.cm_message .box .button_area .button:hover{background-color:#222222;}
.cm_message .box .msg + .button_area{margin-top:50px;}

.cm_message .box .form_list{position:relative;margin-top:30px;}
.cm_message .box .form_list ul{position:relative;margin:0;padding:0;list-style:none;}
.cm_message .box .form_list ul li{position:relative;}
.cm_message .box .form_list ul li:nth-child(n+2){margin-top:10px;}
.cm_message .box .form_list input[type="text"],
.cm_message .box .form_list input[type="email"],
.cm_message .box .form_list input[type="password"]{position:relative;display:block;width:100%;outline:none;height:50px;padding:0 10px 0 55px;box-sizing:border-box;font-size:16px;font-weight:400;color:#000000;background-color:#eeeeee;border:0;border-radius:5px;border:1px solid transparent;background-repeat:no-repeat;background-position:left 15px center;background-size:25px;transition:background-color ease 0.3s,border-color ease 0.3s;}
.cm_message .box .form_list input[type="text"]:focus,
.cm_message .box .form_list input[type="email"]:focus,
.cm_message .box .form_list input[type="password"]:focus{border-color:#000000;background-color:#ffffff;}
.cm_message .box .form_list .input_user{background-image:url(../img/icon_user.png);}
.cm_message .box .form_list .input_password{background-image:url(../img/icon_password.png);}

.cm_message .waves{position:absolute;z-index:0;left:0;bottom:0;width:100%;height:15vh;min-height:100px;max-height:150px;}
.cm_message .waves .parallax > use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;}
.cm_message .waves .parallax > use:nth-child(1){animation-delay:-2s;animation-duration:7s;}
.cm_message .waves .parallax > use:nth-child(2){animation-delay:-3s;animation-duration:10s;}
.cm_message .waves .parallax > use:nth-child(3){animation-delay:-4s;animation-duration:13s;}
.cm_message .waves .parallax > use:nth-child(4){animation-delay:-5s;animation-duration:20s;}

@keyframes move-forever{
	0%{transform:translate3d(-90px,0,0);}
	100%{transform:translate3d(85px,0,0);}
}

@media all and (max-width:1000px){
	.cm_message .waves{height:80px;min-height:80px;}
}