@charset "UTF-8";

body{margin:0;padding:0;}

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

.cm_member .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_member .box .logo{position:relative;display:flex;flex-wrap:nowrap;flex-direction:column;align-items:center;justify-content:center;gap:10px;}
.cm_member .box .logo img{position:relative;display:block;height:80px;}
.cm_member .box .logo .text{position:relative;margin:0;padding:0;font-size:18px;font-weight:600;color:#000000;line-height:1.4;text-align:center;}
.cm_member .box .code{position:relative;font-size:50px;font-weight:900;color:#000000;line-height:1;margin-top:50px;text-align:center;}
.cm_member .box .msg{position:relative;font-size:20px;font-weight:600;color:#000000;line-height:1.6;margin-top:50px;text-align:center;}
.cm_member .box * + .msg{margin-top:20px;}
.cm_member .box .buttons{position:relative;margin-top:70px;}
.cm_member .box .buttons ul{position:relative;margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;flex-direction:column;gap:10px;}
.cm_member .box .buttons ul li{position:relative;}
.cm_member .box .buttons .button{position:relative;margin:0;padding:0;width:100%;border:0;border-radius:8px;height:52px;font-size:18px;font-weight:700;line-height:1.4;text-decoration:none;color:#FFFFFF;text-align:center;background-color:#000000;cursor:pointer;box-sizing:border-box;-webkit-appearance:none;transition:background-color ease 250ms,border-color ease 250ms;display:flex;flex-wrap:nowrap;flex-direction:row;align-items:center;justify-content:center;}
.cm_member .box .buttons .button:hover{background-color:#111111;}
.cm_member .box .buttons .button:active{background-color:#222222;}
.cm_member .box .form_list + .buttons{margin-top:50px;}

.cm_member .box .form_list{position:relative;margin-top:50px;}
.cm_member .box .form_list ul{position:relative;margin:0;padding:0;list-style:none;}
.cm_member .box .form_list ul li{position:relative;}
.cm_member .box .form_list ul li:nth-child(n+2){margin-top:10px;}
.cm_member .box .form_list input[type="text"],
.cm_member .box .form_list input[type="email"],
.cm_member .box .form_list input[type="password"]{position:relative;display:block;width:100%;outline:none;height:50px;padding:0 10px 0 45px;border-radius:5px;border:1px solid #dddddd;font-size:18px;font-weight:400;color:#000000;box-sizing:border-box;background-color:#FAFAFA;background-repeat:no-repeat;background-position:left 10px center;background-size:25px;transition:background-color ease 250ms,border-color ease 250ms;}
.cm_member .box .form_list input[type="text"]:focus,
.cm_member .box .form_list input[type="email"]:focus,
.cm_member .box .form_list input[type="password"]:focus{border-color:#000000;background-color:#FFFFFF;}
.cm_member .box .form_list .input_user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(170,170,170,1)'%3E%3Cpath d='M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z'%3E%3C/path%3E%3C/svg%3E");}
.cm_member .box .form_list .input_password{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(170,170,170,1)'%3E%3Cpath d='M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z'%3E%3C/path%3E%3C/svg%3E");}

.cm_member .waves{position:absolute;z-index:0;left:0;bottom:0;width:100%;height:15vh;min-height:100px;max-height:150px;}
.cm_member .waves .parallax > use{animation:move-forever 25s cubic-bezier(0.55,0.5,0.45,0.5) infinite;}
.cm_member .waves .parallax > use:nth-child(1){animation-delay:-2s;animation-duration:7s;}
.cm_member .waves .parallax > use:nth-child(2){animation-delay:-3s;animation-duration:10s;}
.cm_member .waves .parallax > use:nth-child(3){animation-delay:-4s;animation-duration:13s;}
.cm_member .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_member .waves{height:80px;min-height:80px;}
}