<!DOCTYPE html>
<html>
<head>
<title>โรงเรียนราชโบริกานุเคราะห์ - ระบบตารางสอน</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="google" content="notranslate" />
<meta name="description" content="โรงเรียนราชโบริกานุเคราะห์ ระบบตารางเรียน">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="shortcut icon" href="img/logo.ico">
<link rel="stylesheet" href="fonts/font-awesome.css">
<link rel="stylesheet" href="fonts/glyphicon.css">  
<link rel="stylesheet" href="fonts/th_baijam.css">
<link rel="stylesheet" href="fonts/kanit.css">

<script src="js/jquery.js"></script>

<script type="text/javascript">
	function Submit(frm,desc){		
		document.getElementById(frm).method = "post";
		document.getElementById(frm).action = desc;
		document.getElementById(frm).submit();
	}
	function Login(){
		if(document.getElementById('txtUserID').value==""){
			alert('กรุณากรอกรหัสผู้ใช้ User ID');
			document.getElementById('txtUerID').focus();
			document.body.scrollTop = 0;
			return;
		}
		
		document.getElementById('frmLogin').method = "post";
		document.getElementById('frmLogin').action = "login.php";
		document.getElementById('frmLogin').submit();
	}	
</script>

<!--CONTROLS-->
<style>		
	/*==============================================
		INPUT FORM CONTROL
	/*==============================================*/
	input[type=text],input[type=password] {
		display: inline-block;
		padding: 8px 8px 8px 8px;
		border: 1px solid #ccc;
		margin: 0px;
		border-radius: 4px;
		width: 100%;
	}
	textarea {
		display: inline-block;
		padding: 8px 8px 8px 8px;
		border: 1px solid #ccc;
		margin: 0px;
		border-radius: 4px;
		width: 100%;
		height: 150px;
	}
	input[type=select], select {
		display: inline-block;
		padding-top: 6px;
		padding-left: 8px;
		padding-right: 8px;
		padding-bottom: 6px;
		border: 1px solid #ccc;
		border-radius: 4px;
		width: 100%;
		resize: vertical;
		cursor: pointer;
	}
	label {
		padding: 8px 8px 8px 0px;
		display: inline-block;
		text-align:right;
	}
	input[type=submit] {
		background-color: #4CAF50;
		color: white;
		padding: 12px 20px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		float: right;
	}
	input[type=submit]:hover {
			background-color: #45a049;
	}
	h1,h2,h3,h4,h5 {
		margin:0px;
	}
	/*==============================================
		BUTTON SCROLL TOP
	/*==============================================*/
	.scrolltop {
		display: none;
		width: 100%;
		margin: 0 auto;
		margin-right: 5px;
		position: fixed;
		bottom: 2px;
		right: 2px;
		z-index: 1000;
	}
	.scrolltop > .item {
		position: absolute;
		right: 2px;
		bottom: 5px;
		padding: 2px;
		margin: 0px;
	}
	.scrolltop > .item > .scroll {
		position: relative;
		bottom: 2px;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2),
								0 2px 2px 0 rgba(0, 0, 0, 0.2),
								0 2px 2px 0 rgba(0, 0, 0, 0.2),
								0 2px 2px 0 rgba(0, 0, 0, 0.2);	
		background-image: linear-gradient(to right, #3498DB , #3498DB);
		border-radius: 50%;
		padding: 10px;
		text-align: center;
		color: #ffffff;
		margin: 5px;
		cursor: pointer;
		transition: 0.5s;
		-moz-transition: 0.5s;
		-webkit-transition: 0.5s;
		-o-transition: 0.5s; 		
	}
	.scrolltop > .item > .scroll:hover {
		transition: 0.5s;
		-moz-transition: 0.5s;
		-webkit-transition: 0.5s;
		-o-transition: 0.5s; 		
	}
	.scrolltop > .item > .scroll:hover .fa {
		padding-top:-10px;
	}
	.scrolltop > .item > .scroll .fa {
		font-size:30px;
		margin-top:-5px;
		margin-left:1px;
		transition: 0.5s;
		-moz-transition: 0.5s;
		-webkit-transition: 0.5s;
		-o-transition: 0.5s; 	
	}
	.isDisabled {
		pointer-events: none;
		color: currentColor;
		cursor: not-allowed;
		opacity: 0.5;
		text-decoration: none;
	}
	.center {
		margin: auto;
		padding: 13px;
	}	
</style>

<!--BODY-->
<style>
	* {
		-webkit-box-sizing: border-box;
			 -moz-box-sizing: border-box;
						box-sizing: border-box;
	}
	*:before,
	*:after {
		-webkit-box-sizing: border-box;
			 -moz-box-sizing: border-box;
						box-sizing: border-box;
	}
	body {
		margin:auto;
		font-family: 'Kanit','THBaijam', sans-serif;
		/*max-width: 1440px;*/
		background: url('img/bg.png') #fff;
		background-repeat:repeat;
    background-size:100% 100%;
	}
	.page {
		width: 100%;
		margin-left:auto;
		margin-right:auto;
		min-height: 600px;
	}
</style>

<!--SCROLL STICKY-->
<style>	
	.sticky {
		position: fixed;
		top: 0;
		width: 100%;
		background-color: orage;
		padding: 0px;
		opacity: 1;
		color: white;
	}	
</style>

<!--SPACE1-->
<style>
	.space1 {
		min-height: 0px;
	}
</style>

<!--SPACE2-->
<style>
	.space2 {
		min-height: 10px;
		max-height: 10px;
	}
</style>

</head>
<body>
<div class="page"> 
  <!--HEADER-->
  <style>
    .sec-head {
			position: fixed;
      width:100%;
      overflow: hidden;
      padding-bottom:0px;
      z-index:1099;
    }
    .sec-head > .nav {
      border: none;
      overflow: hidden;
      margin: auto;
      padding:0px;
      width: 100%;
			padding-bottom:10px; 
      background-image: linear-gradient(to left, white , white);
    }
    .sec-head > .nav > .nav-collapse {
      position: relative;
      margin: auto;
      padding-right: 25px;
      text-align: center;
			color:white;
			max-height:50px;
    }
		.sec-head img{
			margin: 0px;
			width: 30px;
		}
  </style>
  <style>		
    @media only screen and (max-width: 699px) {
			.sec-head {
				display: none;
			}			
    }
		@media only screen and (max-width: 799px) and (min-width: 700px) {
			.sec-head {
				display: none;
			}		
		}
		@media only screen and (max-width: 1023px) and (min-width: 800px) {
			.sec-head {
				display: none;
			}			
		}
		@media only screen and (max-width: 1279px) and (min-width: 1024px) {

		}
		@media only screen and (max-width: 1359px) and (min-width: 1280px) {
		
		}
		@media only screen and (max-height: 1280px) and (min-height: 1280px) {
		
		}
		@media only screen and (max-width: 1439px) and (min-width: 1360px) {

		}
		@media only screen and (max-width: 1535px) and (min-width: 1440px) {

		}
		@media only screen and (max-height: 1440px) and (min-height: 1440px) {

		}
		@media only screen and (max-width: 1599px) and (min-width: 1536px) {

		}
		@media only screen and (max-height: 1536px) and (min-height: 1536px) {
	
		}
		@media only screen and (max-width: 1919px) and (min-width: 1600px) {

		}
		@media only screen and (max-width: 1919px) and (min-width: 1680px) {

		}
		@media only screen and (max-height: 1600px) and (min-height: 1600px) {
	
		}
		@media only screen and (min-width: 1920px) {

    }
		@media only screen and (min-height: 1920px) {
	
		}
  </style>
  <div class="sec-head">
    <div class="nav" style="">
      <div class="nav-collapse">
        <table align="center" border="0">
        	<tr>
          	<td>
            	<table>
              	<tr>
                	<td><img src="img/logo.png" alt="" align="absmiddle" /></td>
                </tr>
              </table>
            </td>
            <td>
            <table>
              	<tr>
                	<td align="left"><span style="color:#3498DB; font-size:32px; font-weight:bold">โรงเรียนราชโบริกานุเคราะห์</span> </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>  
      </div>
    </div>          
  </div>

	<!--TOP MENU-->
  <style>
    .sec-navtop {
			position: fixed;
			top: 60px;
      width:100%;
      overflow: hidden;
      padding-bottom:20px;
      z-index:1088;
    }
    .sec-navtop > .nav {
      border: none;
      overflow: hidden;
      margin: auto;
      padding:0px;
      width: 100%;
      background-image: linear-gradient(to left, #3498DB , #A569BD);
			box-shadow: -8px 0px 8px -4px rgba(115,115,115,0.75),
								8px 0px 8px -4px rgba(115,115,115,0.75);
    }
    .sec-navtop > .nav >	.nav-logo {
      display: none;
      float: left;
      margin: 0px;
      display: inline-block;
			color: white;
			font-size: 12px;			
    }
    .sec-navtop > .nav >	.nav-logo > img {
      display: none;
      width: 70px;
      border:none;
    }
    .sec-navtop > .nav >	.nav-title {
      display: none;
      float: left;
      margin: 0px;
			color: white;
			font-size: 20px;			
    }		
    .sec-navtop > .nav > .nav-collapse {
      position: relative;
      margin: auto;
      padding-right: 25px;
      text-align: center;
			color:white;
			min-height:60px;
			padding-top:17px;
    }
    .sec-navtop > .nav > .nav-collapse > span {
      cursor: pointer;
      margin-right: 15px;
      font-size: 18px;
    }
    .sec-navtop > .nav > .nav-collapse > span:hover {
      color: yellow;
    }
    /*==============================================
      TOP NAV TOGGLE BUTTON
    /*==============================================*/
    .sec-navtop > .nav > .nav-btn-toggle {
      position: relative;	
      float: right;
      border-radius: 5px;
      margin-top: 3px;
      margin-right: 10px;
      margin-bottom: 2px;
    }
    .sec-navtop > .nav > .nav-btn-toggle > a {
      margin-left: 15px;
      margin-right: 15px;
      font-size: 34px;
      color: white;
    }
    .sec-navtop > .nav > .nav-btn-toggle {
      display: none;
    }
  </style>
  <style>		
		@media only screen and (max-width: 213px) {
			.sec-navtop {
				display: block;
				position: fixed;
				top: 0px;
				margin-bottom: 0px;
			}		
			.sec-navtop > .nav {
				width: 100%;
				overflow: hidden;
				position: fixed;
			}
			.sec-navtop > .nav >	.nav-logo {
				display: block;
			}
			.sec-navtop > .nav >	.nav-title {
				display: none;
				padding-left: 10px;
				padding-top: 13px;
				font-size: 13px;
			}
			.sec-navtop > .nav >	.nav-logo > img {
				display: block;
				width: 20px;
				margin-left: 10px;
				margin-top: 10px;
				border-radius: 10%;
			}			
			.sec-navtop > .nav > .nav-collapse {
				display: none;
			}
			.sec-navtop > .nav > .nav-btn-toggle {
				display: block;		
				float: right;
				margin-right: 0px;
			}
			.sticky {
				display: none;
			}
					
			#nav_left {
				display: inline-block;
			}	
			.space1 {
				min-height: 0px;
			}
		}
		@media only screen and (max-width: 320px) and (min-width: 214px) {
			.sec-navtop {
				display: block;
				position: fixed;
				top: 0px;
				margin-bottom: 0px;
			}		
			.sec-navtop > .nav {
				width: 100%;
				overflow: hidden;
				position: fixed;
			}
			.sec-navtop > .nav >	.nav-logo {
				display: block;
			}
			.sec-navtop > .nav >	.nav-title {
				display: block;
				padding-left: 10px;
				padding-top: 13px;
				font-size: 16px;
			}
			.sec-navtop > .nav >	.nav-logo > img {
				display: block;
				width: 20px;
				margin-left: 10px;
				margin-top: 10px;
				border-radius: 10%;
			}			
			.sec-navtop > .nav > .nav-collapse {
				display: none;
			}
			.sec-navtop > .nav > .nav-btn-toggle {
				display: block;		
				float: right;
			}
			.sticky {
				display: none;
			}
					
			#nav_left {
				display: inline-block;
			}	
			.space1 {
				min-height: 60px;
			}
		}
    @media only screen and (max-width: 699px) and (min-width: 321px) {
			.sec-navtop {
				display: block;
				position: fixed;
				top: 0px;
				margin-bottom: 0px;
			}		
			.sec-navtop > .nav {
				width: 100%;
				overflow: hidden;
				position: fixed;
			}
			.sec-navtop > .nav >	.nav-logo {
				display: block;
			}
			.sec-navtop > .nav >	.nav-title {
				display: block;
				padding-left: 10px;
				padding-top: 10px;
			}
			.sec-navtop > .nav >	.nav-logo > img {
				display: block;
				width: 20px;
				margin-left: 10px;
				margin-top: 10px;
				border-radius: 10%;
			}			
			.sec-navtop > .nav > .nav-collapse {
				display: none;
			}
			.sec-navtop > .nav > .nav-btn-toggle {
				display: block;		
				float: right;
			}
			.sticky {
				display: none;
			}
					
			#nav_left {
				display: inline-block;
			}	
			.space1 {
				min-height: 60px;
			}			
    }
		@media only screen and (max-width: 799px) and (min-width: 700px) {
			.sec-navtop {
				display: block;
				position: fixed;
				top: 0px;
				margin-bottom: 0px;
			}		
			.sec-navtop > .nav {
				width: 100%;
				overflow: hidden;
				position: fixed;
			}
			.sec-navtop > .nav >	.nav-logo {
				display: block;
			}
			.sec-navtop > .nav >	.nav-title {
				display: block;
				padding-left: 10px;
				padding-top: 10px;
			}
			.sec-navtop > .nav >	.nav-logo > img {
				display: block;
				width: 20px;
				margin-left: 10px;
				margin-top: 10px;
				border-radius: 10%;
			}			
			.sec-navtop > .nav > .nav-collapse {
				display: none;
			}
			.sec-navtop > .nav > .nav-btn-toggle {
				display: block;		
				float: right;
			}
			.sticky {
				display: none;
			}
					
			#nav_left {
				display: inline-block;
			}	
			.space1 {
				min-height: 60px;
			}			
		}
		@media only screen and (max-width: 1023px) and (min-width: 800px) {
			.sec-navtop {
				display: block;
				position: fixed;
				top: 0px;
				margin-bottom: 0px;
			}		
			.sec-navtop > .nav {
				width: 100%;
				overflow: hidden;
				position: fixed;
			}
			.sec-navtop > .nav >	.nav-logo {
				display: block;
			}
			.sec-navtop > .nav >	.nav-title {
				display: block;
				padding-left: 10px;
				padding-top: 10px;
			}
			.sec-navtop > .nav >	.nav-logo > img {
				display: block;
				width: 20px;
				margin-left: 10px;
				margin-top: 10px;
				border-radius: 10%;
			}			
			.sec-navtop > .nav > .nav-collapse {
				display: none;
			}
			.sec-navtop > .nav > .nav-btn-toggle {
				display: block;		
				float: right;
			}
			.sticky {
				display: none;
			}
					
			#nav_left {
				display: inline-block;
			}	
			.space1 {
				min-height: 60px;
			}	
		}
		@media only screen and (max-width: 1279px) and (min-width: 1024px) {

		}
		@media only screen and (max-width: 1359px) and (min-width: 1280px) {
			
		}
		@media only screen and (max-height: 1280px) and (min-height: 1280px) {
		
		}
		@media only screen and (max-width: 1439px) and (min-width: 1360px) {

		}
		@media only screen and (max-width: 1535px) and (min-width: 1440px) {

		}
		@media only screen and (max-height: 1440px) and (min-height: 1440px) {

		}
		@media only screen and (max-width: 1599px) and (min-width: 1536px) {

		}
		@media only screen and (max-height: 1536px) and (min-height: 1536px) {
	
		}
		@media only screen and (max-width: 1919px) and (min-width: 1600px) {

		}
		@media only screen and (max-width: 1919px) and (min-width: 1680px) {

		}
		@media only screen and (max-height: 1600px) and (min-height: 1600px) {
	
		}
		@media only screen and (min-width: 1920px) {

    }
		@media only screen and (min-height: 1920px) {
	
		}
  </style>
  <div id="MyHeader" class="sec-navtop">
    <div class="nav">
    	<div class="nav-logo">
        <img src="img/logo.png" alt="" align="absmiddle" />
      </div>
      <div class="nav-title">
      	โรงเรียนราชโบริกานุเคราะห์
      </div>
      <div id="MyHeader2" class="nav-collapse">
        <span onClick="window.location='index.php?src=student';">ตารางนักเรียน</span>
        <span onClick="window.location='index.php?src=teacher';">ตารางผู้สอน</span>
        <span onClick="window.location='index.php?src=place';">ตารางสถานที่</span>
        <span onClick="window.location='index.php?src=report';">พิมพ์</span>        
        <span onClick="window.location='index.php?src=download';">ดาวน์โหลด</span>
        <span style="display:none" onClick="window.location='index.php?src=upload';">อัพโหลด</span>
        <span style="display:" onClick="window.location='signin.php';">เข้าระบบ</span>
        <span style="display:none" onClick="window.location='logout.php';">ออกจากระบบ</span>
      </div>
      <div class="nav-btn-toggle">
        <a href="javascript:void(0);" onClick="toggleNavLeft();"><i class="fa fa-bars"></i></a>
      </div>
    </div>          
  </div>
  
  <!--LEFT MENU-->
  <style>
		.nav-left {
			display: none;
			overflow: auto;
			background-image: linear-gradient(to left, #3498DB , #A569BD);
			height: 100%;
			width: 0px;
			position: fixed;
			z-index: 1999;
			top: 1px;
			left: 0;
			transition: 0.5s;
			padding-top: 10px;
			margin-right: 10px;
			box-shadow: 0px 0px 5px #000;
			text-align: center;
		}
		.nav-left a:first-child {
			border-top: none;
		}
		.nav-left a {
			border-bottom:none;
			margin-left: 0px;
			margin-right: 0px;
			padding: 1px 8px 5px 5px;
			text-decoration: none;
			font-size: 18px;
			color: white;
			display: block;
			transition: 0.3s;
			white-space: nowrap;
		}
		.nav-left a:hover {
			color: blue;
		}
		.nav-left > ul {
			display-style-list: none;
			display: inline-block;
			margin: 0px;
			padding: 0px;
			width: 100%;
			overflow: hidden;
		}
		.nav-left > ul > img {
			display: block;
			padding: 0px;
			margin: auto;
			width: 15%;
		}
		@media only screen and (max-width: 213px) {
			.nav-left {
				max-width: 130px;
				overflow: hidden;
			}
			.nav-left a {
				font-size: 14px;
			}
		}
		@media only screen and (max-width: 320px) and (min-width: 214px) {
			.nav-left {
				max-width: 180px;
			}			
		}
	</style>
  <div id="nav_left" class="nav-left">
  	<ul>
    	<img src="img/logo.png" alt="" align="absmiddle" />
    </ul>
    <a href="#" onClick="window.location='index.php?src=student';">ตารางนักเรียน</a>
    <a href="#" onClick="window.location='index.php?src=teacher';">ตารางผู้สอน</a>
    <a href="#" onClick="window.location='index.php?src=place';">ตารางสถานที่</a>
    <a href="#" onClick="window.location='index.php?src=report';">พิมพ์</a>    
    <a href="#" onClick="window.location='index.php?src=download';">ดาวน์โหลด</a>
    <a href="#" style="display:none" onClick="window.location='index.php?src=upload';">อัพหลด</a>
    <a href="#" style="display:" onClick="window.location='signin.php';">เข้าระบบ</a>
    <a href="#" style="display:none" onClick="window.location='logout.php';">ออกจากระบบ</a>
    <br />
    <br />
    <br />
  </div>
  
  <div class="space1"></div>
  
	  
  <!--MENU BOTTON / QRCODE-->  
<style>
  .sec-botton {
    margin: auto;
		margin-bottom: 25px;
    padding: 0px;
		padding-top: 130px;
    max-width: 100%;
    color: #2E4053;
    width: 100%;
    overflow: hidden;
  }
  .sec-botton > .content{
    margin: auto;
    padding: 0px;
    max-width: 100%;
    color: #2E4053;
    width: 90%;
    overflow: hidden;
  }
  .sec-botton > .content > .col {
    display: inline-block;
    position: relative;
    float: left;
    margin: 5px;
    padding: 20px;
    width: 100%;
    vertical-align: top;
    text-align: center;
  }
  .sec-botton > .content > .col > .group {
    display: inline-block;
    position: relative;
    margin: auto;
    width: 50%;						
    max-width: 100%;
    text-align: center;
  }			
  .btnregis {
    float: center;
    display: inline-block;
    position: relative;
    border-radius: 5px;
    border: none;
    background-color:#008CBA;
    color: white;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 5px;;
    cursor: pointer;
    width: 70%;
  }
  .btnregis:hover {
    opacity: 0.7;
  }
</style>
<style>		
	@media only screen and (max-width: 213px) {
		.sec-botton {
			padding-top: 50px;
			margin-bottom: 20px;
		}		
    .sec-botton > .content{
      margin: 0;
      padding: 0px;
      width: 100%;
      overflow: hidden;
    }
    .sec-botton > .content > .col {
      float: none;
      padding: 10px;
      margin: 0px;
      width: 100%;
    }
    .sec-botton > .content > .col .group {
      padding-top: 0px;
      margin: auto;
      width: 100%;						
      max-width: 100%;
    }	
    .btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 100%;
    }		
	}
	@media only screen and (max-width: 320px) and (min-width: 214px) {
		.sec-botton {
			padding-top: 5px;
			margin-bottom: 20px;
		}		
    .sec-botton > .content{
      margin: 0;
      padding: 0px;
      width: 100%;
      overflow: hidden;
    }
    .sec-botton > .content > .col {
      float: none;
      padding: 10px;
      margin: 0px;
      width: 100%;
    }
    .sec-botton > .content > .col .group {
      padding-top: 0px;
      margin: auto;
      width: 100%;						
      max-width: 100%;
    }	
    .btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 70%;
    }		
	}
  @media only screen and (max-width: 699px) and (min-width: 321px) {
		.sec-botton {
			padding-top: 5px;
			margin-bottom: 20px;
		}		
    .sec-botton > .content{
      margin: 0;
      padding: 0px;
      width: 100%;
      overflow: hidden;
    }
    .sec-botton > .content > .col {
      float: none;
      padding: 10px;
      margin: 0px;
      width: 100%;
    }
    .sec-botton > .content > .col .group {
      padding-top: 0px;
      margin: auto;
      width: 100%;						
      max-width: 100%;
    }	
    .btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 70%;
    }
  }
  @media only screen and (max-width: 799px) and (min-width: 700px) {
		.sec-botton {
			padding-top: 5px;
		}		
    .sec-botton > .content{
      margin: 0;
      padding: 0px;
      width: 100%;
      overflow: hidden;
    }
    .sec-botton > .content > .col {
      float: none;
      padding: 10px;
      margin: 0px;
      width: 100%;
    }
    .sec-botton > .content > .col .group {
      padding-top: 0px;
      margin: auto;
      width: 100%;						
      max-width: 100%;
    }	
    .btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 70%;
    }
  }
  @media only screen and (max-width: 1023px) and (min-width: 800px) {
		.sec-botton {
			padding-top: 5px;
		}		
    .sec-botton > .content{
      margin: 0;
      padding: 0px;
      width: 100%;
      overflow: hidden;
    }
    .sec-botton > .content > .col {
      float: none;
      padding: 10px;
      margin: 0px;
      width: 100%;
    }
    .sec-botton > .content > .col .group {
      padding-top: 0px;
      margin: auto;
      width: 100%;						
      max-width: 100%;
    }	
    .btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 70%;
    }
  }
  @media only screen and (max-width: 1279px) and (min-width: 1024px) {
    .btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 70%;
    }    
  }
  @media only screen and (max-width: 1359px) and (min-width: 1280px) {
  	.btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 70%;
    }
  }
  @media only screen and (max-height: 1280px) and (min-height: 1280px) {
  	.btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 70%;
    }
  }
  @media only screen and (max-width: 1439px) and (min-width: 1360px) {
		.btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 70%;
    }
  }
  @media only screen and (max-width: 1535px) and (min-width: 1440px) {
		.btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 70%;
    }
  }
  @media only screen and (max-height: 1440px) and (min-height: 1440px) {
		.btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 70%;
    }
  }
  @media only screen and (max-width: 1599px) and (min-width: 1536px) {
		.btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 70%;
    }
  }
  @media only screen and (max-height: 1536px) and (min-height: 1536px) {
		.btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 70%;
    }
  }
  @media only screen and (max-width: 1919px) and (min-width: 1600px) {
		
  }
  @media only screen and (max-width: 1919px) and (min-width: 1680px) {
		.btnregis {
      margin: 5px 0px 5px 0px; /*top left bottom right*/
      width: 70%;
    }
  }
  @media only screen and (max-height: 1600px) and (min-height: 1600px) {
		
  }
  @media only screen and (min-width: 1920px) {

  }
  @media only screen and (min-height: 1920px) {
    
  }
</style>
<div class="sec-botton">
  <div class="content">
    <div class="col">
      <div class="group">
				          <div class="btnregis" onClick="window.location='index.php?src=student_1&clsid=7';">
            มัธยมศึกษาปีที่ 1          </div>
                  <div class="btnregis" onClick="window.location='index.php?src=student_1&clsid=8';">
            มัธยมศึกษาปีที่ 2          </div>
                  <div class="btnregis" onClick="window.location='index.php?src=student_1&clsid=9';">
            มัธยมศึกษาปีที่ 3          </div>
                  <div class="btnregis" onClick="window.location='index.php?src=student_1&clsid=10';">
            มัธยมศึกษาปีที่ 4          </div>
                  <div class="btnregis" onClick="window.location='index.php?src=student_1&clsid=11';">
            มัธยมศึกษาปีที่ 5          </div>
                  <div class="btnregis" onClick="window.location='index.php?src=student_1&clsid=12';">
            มัธยมศึกษาปีที่ 6          </div>
               
      </div>
    </div>     
  </div>
</div>
  
  <div style="min-height:20px;"></div>

  <!--FOOTER-->
  <style>
    .sec-footer {
			position: fixed;
			bottom: 0;
      background-image: linear-gradient(to left, #E5E8E8 , #BFC9CA);
      width:100%;
			max-height: 30px;
      margin:auto;
      bottom:0;
      overflow: hidden;
      text-align:center;
      color: #1C2833;
    }
    .sec-footer > .content {
      background-color: transparent;
      display: inline-block;
      padding: 0px;
      margin: auto;
      width: 100%;
      font-size: 13px;
    }
  </style> 
  <style>		
    @media only screen and (max-width: 699px) {

    }
		@media only screen and (max-width: 799px) and (min-width: 700px) {

		}
		@media only screen and (max-width: 1023px) and (min-width: 800px) {

		}
		@media only screen and (max-width: 1279px) and (min-width: 1024px) {

		}
		@media only screen and (max-width: 1359px) and (min-width: 1280px) {
		
		}
		@media only screen and (max-height: 1280px) and (min-height: 1280px) {
		
		}
		@media only screen and (max-width: 1439px) and (min-width: 1360px) {

		}
		@media only screen and (max-width: 1535px) and (min-width: 1440px) {

		}
		@media only screen and (max-height: 1440px) and (min-height: 1440px) {

		}
		@media only screen and (max-width: 1599px) and (min-width: 1536px) {

		}
		@media only screen and (max-height: 1536px) and (min-height: 1536px) {
	
		}
		@media only screen and (max-width: 1919px) and (min-width: 1600px) {

		}
		@media only screen and (max-width: 1919px) and (min-width: 1680px) {

		}
		@media only screen and (max-height: 1600px) and (min-height: 1600px) {
	
		}
		@media only screen and (min-width: 1920px) {

    }
		@media only screen and (min-height: 1920px) {
	
		}
  </style>                   
  <div class="sec-footer">
    <div class="content" style="padding-bottom:20px;">
      Copyright © Ratchaborikanukroh School 2017
    </div>
  </div>
  
  <div class="scrolltop">
    <div class="item">
      <div id="scroll_top" class="scroll"><i class="fa fa-4x fa-angle-up"></i></div>
    </div>
  </div>    
    
</div>

<script src="js/main.js"></script>
</body>
</html>
