<?php
/**
 * @var $termsMemberJoin
 * @var $termsMemberPrivacy
 * @var $appName
 */
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title><?=$appName?> 약관</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

    <!-- jQuery 3 -->
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>


<style type="text/css">
	p, li, ul, img, a, div, input, select, div, dl, dd, dt, h1, a, h1, h2, h3, h4, h5, h6 {
	}

	html {
	}

	body {
		margin: 0;
		padding: 0;
		font-family: '나눔고딕', 'NanumGothic', sans-serif;
        font-size: 12px;
	}

	ol, li, dl, dd, dt {
		list-style: none !important;
	}

	a {
		text-decoration: none;
	}

	img {
		border: none;
	}

	table {
		border-collapse: collapse;
	}

	* {
		-webkit-text-size-adjust: none;
	}

	h2 {
		color: #a8a8a8;
		padding: 2% 0 2% 0;
		font-size: 14px;
		border-bottom: 2px solid #ccc;
		font-weight: 600;
		margin-bottom: 2%;
	}

	.top_div {
		width: 90%;
		clear: both;
		height: 250px;
        margin: 0 auto;
	}

	.top_btns {
		width: 49%;
		float: left;
		cursor: pointer;
		text-align: center;
		padding: 10px 0px;
		font-size: 13pt;
		border: 1px solid #dddddd;
		background-color: #f0f0f0;
	}

	#top {
		text-align: center;
		background: #ffffff;
		padding: 30px 0px;
	}

	#top img {
		width: 50%;
	}

	.content_div {
		width: 90%;
		height: 100%;
        margin: 0 auto;
	}

	.doc_divs {
		width: 100%;
		margin: 0 auto;
		border: 1px solid gray;
		#font-size: 25pt;
	}

	.html_content {
		padding: 0 3%;
	}

</style>
</head>
</script>

<script>
	function view(doc_name) {
		$(".doc_divs").css('display', 'none');
		$("#" + doc_name).css('display', 'block');
	}
</script>

<body>
<div id="total_div">
	<div class="top_div">
		<div id="top">
			<h1><?=$appName?><br>서비스 이용 약관</h1>
		</div>
		<div class="top_btns" onclick="view('join_info')">
			회원가입약관
		</div>
		<div class="top_btns" onclick="view('private_info')">
			개인정보처리방침안내
		</div>
	</div>
	<div class="content_div">
		<div class="doc_divs" id="join_info">
			<div class="html_content">
				<h2 style="font-size:25pt">회원가입약관</h2>
				<?= $memberJoin ?>
			</div>
		</div>
	</div>
	<div class="doc_divs" style="display:none" id="private_info">
		<div class="html_content">
			<h2 style="font-size:25pt">개인정보처리방침안내</h2>
			<?= $memberPrivacy ?>
		</div>
	</div>
</div>

</body>
</html>
