Add: register, faq

src/web/css/color_button.css

@@ -6,19 +6,30 @@ body{font-family:Open Sans; color:#555555;}
 h1{font-size:24px; font-weight:normal; margin:0.4em 0;}
 
 .container { width: 100%; margin: 0 auto; }
-.container .row { float: left; clear: both; width: 100%; }
+.container .row { /*float: left;*/ clear: both; width: 100%; }
-.container .col { float: left; margin: 0 0 1.2em; padding-right: 1.2em; padding-left: 1.2em; }
+.container .col { /*float: left;*/ margin: 0 0 1.2em; padding-right: 1.2em; padding-left: 1.2em; }
 .container .col.one, .container .col.two, .container .col.three, .container .col.four, .container .col.five, .container .col.six, .container .col.seven, .container .col.eight, .container .col.nine, .container .col.ten, .container .col.eleven, .container .col.twelve { width: 100%; }
 
+.container .floatLeft { float: left; }
+.container .floatNone { float: none; }
+.container .floatRight { float: right; }
+
+.container .alignLeft {text-align: left; }
+.container .alignCenter {text-align: center; }
+.container .alignRight {text-align: right; }
+
+.container .width100 { width: 100px; }
+.container .width200 { width: 200px; }
+.container .width400 { width: 400px; }
 
 @media screen and (min-width: 767px) {
   .container{width: 100%; max-width: 1024px; margin: 0 auto;}
-  .container .row{width:100%; float:left; clear:both;}
+  .container .row{/*width:100%;*/ /*float:left;*/ clear:both;}
-  .container .col{float: left; margin: 0 0 1em; padding-right: .5em; padding-left: .5em;}
+  .container .col{/*float: left;*/ margin: 0 0 1em; padding-right: .5em; padding-left: .5em;}
   .container .col.one { width: 8.33%; }
-  .container .col.two { width: 16.66%; }
+  .container .col.two { width: 150px; /*width: 16.66%;*/ }
   .container .col.three { width: 24.99%; }
-  .container .col.four { width: 50%; }
+  .container .col.four { width: 200px; /*width: 50%;*/ }
   .container .col.five { width: 41.65%; }
   .container .col.six { width: 49.98%; }
   .container .col.seven { width: 58.31%; }
@@ -37,7 +48,7 @@ a{text-decoration:none;}
 /********************
 GENERIC BUTTON STYLES
 ********************/
-.btn {font-size: 18px; white-space:nowrap; width:100%; padding:.4em 1.5em; font-family: Open Sans, Helvetica,Arial,sans-serif; line-height:24px; display: inline-block;zoom: 1; color: #fff; text-align: center; position:relative; -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; transition: border .25s linear, color .25s linear, background-color .25s linear;}
+.btn {font-size: 18px; white-space:nowrap; /*width:100%;*/ padding:.4em 1.5em; font-family: Open Sans, Helvetica,Arial,sans-serif; line-height:24px; display: inline-block;zoom: 1; color: #fff; text-align: center; position:relative; -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; transition: border .25s linear, color .25s linear, background-color .25s linear;}
 
 /*SEA GREEN BUTTON STYLES*/
 .btn.btn-sea{background-color: #08bc9a; border-color: #08bc9a; -webkit-box-shadow: 0 3px 0 #088d74; box-shadow: 0 3px 0 #088d74;}

src/web/css/color_button_backup.css

@@ -0,0 +1,131 @@
+@charset "utf-8";
+
+<style type="text/css">
+
+body{font-family:Open Sans; color:#555555;}
+h1{font-size:24px; font-weight:normal; margin:0.4em 0;}
+
+.container { width: 100%; margin: 0 auto; }
+.container .row { float: left; clear: both; width: 100%; }
+.container .col { float: left; margin: 0 0 1.2em; padding-right: 1.2em; padding-left: 1.2em; }
+.container .col.one, .container .col.two, .container .col.three, .container .col.four, .container .col.five, .container .col.six, .container .col.seven, .container .col.eight, .container .col.nine, .container .col.ten, .container .col.eleven, .container .col.twelve { width: 100%; }
+
+
+@media screen and (min-width: 767px) {
+  .container{width: 100%; max-width: 1024px; margin: 0 auto;}
+  .container .row{width:100%; float:left; clear:both;}
+  .container .col{float: left; margin: 0 0 1em; padding-right: .5em; padding-left: .5em;}
+  .container .col.one { width: 8.33%; }
+  .container .col.two { width: 16.66%; }
+  .container .col.three { width: 24.99%; }
+  .container .col.four { width: 50%; }
+  .container .col.five { width: 41.65%; }
+  .container .col.six { width: 49.98%; }
+  .container .col.seven { width: 58.31%; }
+  .container .col.eight { width: 66.64%; }
+  .container .col.nine { width: 74.97%; }
+  .container .col.ten { width: 83.3%; }
+  .container .col.eleven { width: 91.65%; }
+  .container .col.tweleve { width: 100%; }
+}
+
+/*All the button styles*/
+
+* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
+a{text-decoration:none;}
+
+/********************
+GENERIC BUTTON STYLES
+********************/
+.btn {font-size: 18px; white-space:nowrap; width:100%; padding:.4em 1.5em; font-family: Open Sans, Helvetica,Arial,sans-serif; line-height:24px; display: inline-block;zoom: 1; color: #fff; text-align: center; position:relative; -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; transition: border .25s linear, color .25s linear, background-color .25s linear;}
+
+/*SEA GREEN BUTTON STYLES*/
+.btn.btn-sea{background-color: #08bc9a; border-color: #08bc9a; -webkit-box-shadow: 0 3px 0 #088d74; box-shadow: 0 3px 0 #088d74;}
+.btn.btn-sea:hover{background-color:#01a183;}
+.btn.btn-sea:active{ top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+
+/*DARK BLUE BUTTON STYLES*/
+.btn.btn-dark-blue{background-color: #237fbc; border-color: #237fbc; -webkit-box-shadow: 0 3px 0 #1a5c87; box-shadow: 0 3px 0 #1a5c87;}
+.btn.btn-dark-blue:hover{background-color:#166ea8;}
+.btn.btn-dark-blue:active{ top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+
+/*RED/ROUGE BUTTON STYLES*/
+.btn.btn-rouge{background-color: #c0392b; border-color: #c0392b; -webkit-box-shadow: 0 3px 0 #8f2a1f; box-shadow: 0 3px 0 #8f2a1f;}
+.btn.btn-rouge:hover{background-color:#ac3420;}
+.btn.btn-rouge:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+
+/*DARK BUTTON STYLES*/
+.btn.btn-dark{background-color: #2c3d51; border-color: #2c3d51; -webkit-box-shadow: 0 3px 0 #080c0f; box-shadow: 0 3px 0 #080c0f;}
+.btn.btn-dark:hover{background-color:#202d3d;}
+.btn.btn-dark:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+
+/*ORANGE BUTTON STYLES*/
+.btn.btn-orange{color: #000; background-color: #f59e00; border-color: #f59e00; -webkit-box-shadow: 0 3px 0 #b37401; box-shadow: 0 3px 0 #b37401;}
+.btn.btn-orange:hover{background-color:#dd9003;}
+.btn.btn-orange:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+
+/*SUNFLOWER BUTTON STYLES*/
+.btn.btn-sunflower{color: #000; background-color: #f2c500; border-color: #f2c500; -webkit-box-shadow: 0 3px 0 #b19001; box-shadow: 0 3px 0 #b19001;}
+.btn.btn-sunflower:hover{background-color:#e3ba02;}
+.btn.btn-sunflower:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+
+/*RED BUTTON STYLES*/
+.btn.btn-red{background-color: #ea4f37; border-color: #ea4f37; -webkit-box-shadow: 0 3px 0 #b13825; box-shadow: 0 3px 0 #b13825;}
+.btn.btn-red:hover{background-color:#a53422;}
+.btn.btn-red:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+
+/*CONCRETE BUTTON STYLES*/
+.btn.btn-concrete{background-color: #7e8c8d; border-color: #7e8c8d; -webkit-box-shadow: 0 3px 0 #4e5b5c; box-shadow: 0 3px 0 #4e5b5c;}
+.btn.btn-concrete:hover{background-color:#6a7879;}
+.btn.btn-concrete:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+
+/********************
+SOCIAL BUTTON STYLES
+********************/
+
+/*FACEBOOK*/
+.btn.btn-facebook{background-color: #2479b6; border-color: #2479b6; -webkit-box-shadow: 0 3px 0 #1c6394; box-shadow: 0 3px 0 #1c6394;}
+.btn.btn-facebook:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+/*TWITTER*/
+.btn.btn-twitter{background-color: #2a91db; border-color: #2a91db; -webkit-box-shadow: 0 3px 0 #1d6ea7; box-shadow: 0 3px 0 #1d6ea7;}
+.btn.btn-twitter:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+/*GOOGLE PLUS*/
+.btn.btn-google-plus{background-color: #be3b26; border-color: #be3b26; -webkit-box-shadow: 0 3px 0 #842719; box-shadow: 0 3px 0 #842719;}
+.btn.btn-google-plus:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+/*DRIBBBLE*/
+.btn.btn-dribbble{background-color: #f62d7e; border-color: #f62d7e; -webkit-box-shadow: 0 3px 0 #d3235a; box-shadow: 0 3px 0 #d3235a;}
+.btn.btn-dribbble:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+/*YOU TUBE*/
+.btn.btn-you-tube{background-color: #cf3728; border-color: #cf3728; -webkit-box-shadow: 0 3px 0 #9a1e1a; box-shadow: 0 3px 0 #9a1e1a;}
+.btn.btn-you-tube:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+/*LinkedIn*/
+.btn.btn-linkedin{background-color: #0074ba; border-color: #0074ba; -webkit-box-shadow: 0 3px 0 #00497b; box-shadow: 0 3px 0 #00497b;}
+.btn.btn-linkedin:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+/*Dropbox*/
+.btn.btn-dropbox{background-color: #0083e4; border-color: #0083e4; -webkit-box-shadow: 0 3px 0 #015593; box-shadow: 0 3px 0 #015593;}
+.btn.btn-dropbox:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+/*Wordpress*/
+.btn.btn-wordpress{background-color: #1d7794; border-color: #1d7794; -webkit-box-shadow: 0 3px 0 #114657; box-shadow: 0 3px 0 #114657;}
+.btn.btn-wordpress:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+/*Pinterest*/
+.btn.btn-pinterest{background-color: #c8232a; border-color: #c8232a; -webkit-box-shadow: 0 3px 0 #89171b; box-shadow: 0 3px 0 #89171b;}
+.btn.btn-pinterest:active{ top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+/*Skype*/
+.btn.btn-skype{background-color: #2eabde; border-color: #2eabde; -webkit-box-shadow: 0 3px 0 #1b6684; box-shadow: 0 3px 0 #1b6684;}
+.btn.btn-skype:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+/*Instagram*/
+.btn.btn-instagram{background-color: #5182aa; border-color: #5182aa; -webkit-box-shadow: 0 3px 0 #1f415d; box-shadow: 0 3px 0 #1f415d;}
+.btn.btn-instagram:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+/*RSS*/
+.btn.btn-rss{background-color: #f8a933; border-color: #f8a933; -webkit-box-shadow: 0 3px 0 #ab7422; box-shadow: 0 3px 0 #ab7422;}
+.btn.btn-rss:active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
+
+/**********
+Icon styles
+**********/
+.btn i {padding-right:0.8em; line-height:22px;}
+.icon-only{padding: 1em;}
+.icon-only i{padding-right:0; font-size:22px; line-height:22px; }
+
+
+</style>

src/web/css/module.css

@@ -19,7 +19,7 @@ header {
 	color: black;
 	background-color: #007196;
 	clear: left;
-	text-align: center;
+	/*text-align: center;*/
 }
 
 article {
@@ -32,7 +32,7 @@ footer {
 	color: black;
 	background-color: #007196;
 	clear: left;
-	text-align: center;
+	/*text-align: center;*/
 }
 
 
@@ -41,6 +41,7 @@ footer {
 	/*color: red;*/
 }
 
+/*
 .player_free {
 	display: inline-block;
 	width: 100%;
@@ -52,5 +53,6 @@ footer {
 	width: 100%;
 	background-color: #0ff;
 }
+*/
 
 </style>

src/web/maestro/register.html

@@ -0,0 +1,48 @@
+<html>
+
+
+<head>
+	<title>마에스트로 계정 등록</title>
+	<link rel="icon" href="/favicon.ico" type="image/x-icon" />
+	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+	<link rel="stylesheet" type="text/css" href="./../css/module.css">
+	<link rel="stylesheet" type="text/css" href="./../css/color_button.css">
+
+	<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
+	<script type="text/javascript">
+		$(document).ready(function() {
+			$("#home").click(function(event) {
+				console.log("home clicked");
+			})
+
+			$("#header").load("./../module/header.html");
+			$("#section").load("./../module/maestro_section_register.html");
+			$("#footer").load("./../module/footer.html");
+
+			console.log("ready");
+
+		});
+	</script>
+</head>
+
+
+
+<body bgcolor="white">
+
+	<div id="wrapper">
+
+		<header id="header">
+		</header>
+
+		<section id="section">
+		</section>
+
+		<footer id="footer">
+		</footer>
+
+	</div>
+
+</body>
+
+
+</html>

src/web/main/faq.html

@@ -0,0 +1,48 @@
+<html>
+
+
+<head>
+	<title>자주 묻는 질문</title>
+	<link rel="icon" href="/favicon.ico" type="image/x-icon" />
+	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+	<link rel="stylesheet" type="text/css" href="./../css/module.css">
+	<link rel="stylesheet" type="text/css" href="./../css/color_button.css">
+
+	<script type="text/javascript" src="./../../../resources/jquery/jquery-3.3.1.min.js"></script>
+	<script type="text/javascript">
+		$(document).ready(function() {
+			$("#home").click(function(event) {
+				console.log("home clicked");
+			})
+
+			$("#header").load("./../module/header.html");
+			$("#section").load("./../module/home_section_faq.html");
+			$("#footer").load("./../module/footer.html");
+
+			console.log("ready");
+
+		});
+	</script>
+</head>
+
+
+
+<body bgcolor="white">
+
+	<div id="wrapper">
+
+		<header id="header">
+		</header>
+
+		<section id="section">
+		</section>
+
+		<footer id="footer">
+		</footer>
+
+	</div>
+
+</body>
+
+
+</html>

src/web/module/footer.html

@@ -1,14 +1,14 @@
 <div class="container" style="line-height: 40px;">
-	<span id="company" style="float: left;">
+	<span id="company">
 		JINAJU
 	</span>
 
-	<span id="support_email" style="float: center;">
+	<span id="support_email">
 		문의 : support@jinaju.com
 	</span>
 
-	<span class="col two" style="float: right;">
+	<span class="col alignRight">
-		<a href="#" id="faq" class="btn btn-sunflower">FAQ</a>
+		<a href="./../main/faq.html" id="faq" class="btn btn-sunflower">FAQ</a>
 	</span>
 
 </div>

src/web/module/header.html

@@ -1,13 +1,13 @@
 <div class="container">
-	<span class="col two">
+	<span class="col alignLeft">
-		<a href="./../main/index.html" id="home" class="btn btn-orange" style="padding: 1.1em;">첫 화면</a>
+		<a href="./../main/index.html" id="home" class="btn btn-orange" style="padding: 20px;">첫 화면</a>
 	</span>
 
-	<span class="col two" style="float: right;">
+	<span class="col alignRight">
 		<a href="./../maestro/login.html" id="login_maestro" class="btn btn-sea">마에스트로<br/>로그인</a>
 	</span>
 
-	<span class="col two" style="float: right;">
+	<span class="col alignRight">
 		<a href="./../client/login.html" target="_blank" id="login_player" class="btn btn-rouge">플레이어<br/>로그인</a>
 	</span>
 

src/web/module/home_section.html

@@ -7,7 +7,7 @@
 
 	<div class="maestro_free">
 		<div class="col four" style="float: center;">
-			<a href="#" id="maestro_free_menu" class="btn btn-sea">마에스트로<br/>무료체험</a>
+			<a href="./../maestro/main_menu.html" id="maestro_free_menu" class="btn btn-sea">마에스트로<br/>관리자 메뉴 체험</a>
 		</div>
 		<ol>
 			<li>
@@ -27,7 +27,7 @@
 		&nbsp;
 		&nbsp;
 		<div class="col four" style="float: center;">
-			<a href="#" id="maestro_register" class="btn btn-sea">마에스트로<br/>가입</a>
+			<a href="./../maestro/register.html" id="maestro_register" class="btn btn-sea">마에스트로<br/>가입</a>
 		</div>
 		<ol>
 			<li>

src/web/module/home_section_faq.html

@@ -0,0 +1,28 @@
+<div class="container">
+
+	<h1>마에스트로 계정</h1>
+
+	<ol>
+		<li>
+			계정 생성 요청 후, 입금이 확인되면 계정을 활성화시킵니다.
+		</li>
+		<li>
+			생성된 계정의 마에스트로 혹은 플레이어가 첫 로그인한 날부터 유효기간을 세기 시작합니다.
+		</li>
+		<li>
+			업그레이드가 되면, 기존 사용한 기간은 보너스로 드리고 새로 1년동안 유효합니다.
+		</li>
+	</ol>
+
+	<hr>
+
+	<h1>플레이어 관리</h1>
+
+	<ol>
+		<li>
+			플레이어의 입장 코드는 숫자로만 입력을 받습니다.
+			한글/영어 타자에 익숙하지 않은 학생들을 고려하였습니다.
+		</li>
+	</ol>
+
+</div>

src/web/module/maestro_section_login.html

@@ -1,29 +1,51 @@
-<div class="container">
+<style>
-	<div class="maestro_free">
+
+.login {
+	background-color: #ff0000;
+	padding: 20px;
+}
+
+.register {
+	background-color: #0000ff;
+	padding: 20px;
+}
+
+</style>
+
+<div class="container">
+	<div class="login">
+
+		<div>1</div>
+		<div>2</div>
+		<div>3</div>
+		<div>4</div>
+		<div>5</div>
+
+		<div>
 		<form action="/action_page.php" method="get" id="maestro_login">
 			마에스트로 아이디
 			<input type="text" name="maestro_id"><br/>
 			암호
 			<input type="password" name="maestro_id"><br/>
 		</form>
-
-<!-- 
-		<div class="col four" style="float: center;">
-			<a type="submit" form="maestro_login" value="로그인" class="btn btn-sea">로그인</a>
-		</div>
- -->
-
-		<div class="col four" style="float: center;">
-			<a href="./../maestro/main_menu.html" id="faq" class="btn btn-sea">로그인</a>
 		</div>
 
-		&nbsp;
+			<div class="col alignCenter">
-		&nbsp;
+				<a href="./../maestro/main_menu.html" id="faq" class="btn btn-sea width400">로그인</a>
-		&nbsp;
+			</div>
 
-		<div class="col four" style="float: center;">
+	</div>
-			<a href="#" id="faq" class="btn btn-sea">마에스트로<br/>가입</a>
+
+
+
+	<div class="register">
+
+		<div>
+			<div class="col alignCenter" style="float: center;">
+				<a href="#" id="faq" class="btn btn-sea width400">마에스트로<br/>가입</a>
+			</div>
 		</div>
+
 		<ol>
 			<li>
 				1만원 : 플레이어 20명

src/web/module/maestro_section_register.html

@@ -0,0 +1,102 @@
+<div class="container">
+	<div class="maestro_manager_user">
+
+		<h1>마에스트로 계정 신청</h1>
+
+		<form action="/action_page.php" method="get" id="register">
+			(필수) 마에스트로 아이디 : <input type="text" name="id">
+			<button >중복 확인</button><br/>
+			(필수) 암호 : <input type="password" name="password"><br/>
+			(필수) 이메일 : <input type="password" name="email"><br/>
+			(필수) 플레이어 수 : 
+			<select>
+				<option value="1">20명 : (1년) 1만원</option>
+				<option value="1">50명 : (1년) 2만원</option>
+				<option value="1">100명 : (1년) 3만원</option>
+			</select>
+			<br/>
+			<br/>
+			<input type="checkbox" name="accept_clauses">아래 약관을 읽었으며, 모든 내용에 동의합니다.<br/>
+			<br/>
+			<button type="submit" form="register">등록 신청</button>
+		</form>
+
+
+		<h1>약관 주요 내용 요약</h1>
+
+		<p style="text-align: right;">마지막 갱신 : 2018년 6월 26일</p>
+
+		<div class="col four" style="float: center;">
+			<a href="#" id="maestro_register" class="btn btn-sea">약관 읽기</a>
+		</div>
+
+
+		<ol>
+			<li>결제는 계좌 이체(송금)으로만 가능합니다. 신용카드 결제는 준비되지 않았습니다.</li>
+			<li>결제는 계좌 이체(송금)으로만 가능합니다. 신용카드 결제는 준비되지 않았습니다.</li>
+			<li>서버가 불안정할 수 있습니다. 문제 발생시 메일로 알려주시면 최대한 빨리 정상화 하겠습니다.</li>
+			<li>결제후 1년이 지나면 마에스트로 계정과 학생들의 계정이 비활성화 됩니다.</li>
+			<li>비활성화 되기 전에 연장 결제 해주시면, 남은 기간도 함께 연장됩니다.</li>
+			<li>비활성화된 계정은, 6개월후에 삭제됩니다. 마에스트로 계정 및 학생들의 계정 정보 모두가 사라집니다.</li>
+			<li>서비스 업그레이드는 가능합니다. 업그레이드한 날부터 1년간 업그레이드 서비스가 시작됩니다.</li>
+		</ol>
+
+
+		<hr>
+
+		<h2>신청 정보 확인</h2>
+
+		마에스트로 아이디 : <span></span><br/>
+		암호 : <span></span><br/>
+		플레이어 수 : <span></span><br/>
+
+		<h3>입금 계좌</h3>
+		<div>
+			카카오뱅크 : 9999-999999<br/>
+			계좌 이름 : 박지상<br/>
+			금액 : <span class="price_account"></span>원
+			<div>보내는 사람 이름 : 요청하신 마에스트로 아이디 <span class="maestro_id"></span>로 입력해주세요.</div>
+			<div class="tip">보내는 사람 이름을 마에스트로 아이디로 해주실 경우, 가장 빠르게 계정을 활성화 해드릴 수 있습니다.</div>
+		</div>
+
+		<div>
+			신청 내용이 모두 맞는지 확인해주세요.
+			아래의 등록 신청 버튼을 누르면, 입력하신 이메일 주소로도 입금 내용을 보내드립니다.
+			신청후에 <span class="price_account"></span>원을 송금해주세요.
+		</div>
+
+		<br/>
+
+		<div class="col four" style="float: center;">
+			<a href="#" id="send_register" class="btn btn-sea">마에스트로 계정 등록</a>
+		</div>
+
+
+		<hr>
+
+		<h2>신청 정보 확인</h2>
+
+		<div>마에스트로 아이디</div>
+		<div class="maestro_id"></div>
+		<div>가 신청되었습니다.</div>
+
+		<h3>입금 계좌</h3>
+		<div>
+			카카오뱅크 : 9999-999999<br/>
+			계좌 이름 : 박지상<br/>
+			금액 : <span class="price_account"></span>원
+			<div>보내는 사람 이름 : 요청하신 마에스트로 아이디 <span class="maestro_id"></span>로 입력해주세요.</div>
+			<div class="tip">보내는 사람 이름을 마에스트로 아이디로 해주실 경우, 가장 빠르게 계정을 활성화 해드릴 수 있습니다.</div>
+		</div>
+
+		<br/>
+
+		<div>
+			방금 이메일 주소로 입금 안내 내용을 보내드렸습니다.
+		</div>
+
+
+	</div>
+
+
+</div>