/* For Mobile */
@media only screen and (max-width: 768px) {
	[class*="col-"] {
		width: 100%;
	}

	/*header*/
	#header {
		color: #fff;
		background-color: #0124bf;
		padding: 5px;
		background-image: url("./img/ComplexSystemWall.png");
		background-color: #0124bf;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
	}	


	#header_title {
		margin-top: 10px;
		padding-bottom: 0px;
		background: rgba(192, 192, 192, 0.7);
		display: block;
	}

	#header_subtitle {
		background: rgba(192, 192, 192, 0.7);
		display: block;
		width: 17em;
	}

	#header_select_language {
		text-align: right;
		cursor: pointer;
	}


	/*------side navigation------*/
	.Side_Navigation {
		width: 94%;
		max-width: 400px;
		margin: 20px auto 20px;
		background-color: #f0f0f0;
		border-radius: 5px;
	}


	#side_navigation_now::after {
		display: inline-block;
		width: 6px;
		height: 6px;
		margin: 0 0 0 15px;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.Side_Navigation input {
		display: none;	
	}

	.Side_Navigation label {
		position: relative;
		display: block;
		padding: 5px;
		cursor: pointer;
	}

	.Side_Navigation label::after {
		position: absolute;
		top: 50%;
		right: 10px;
		display: block;
		content: '';
		width: 8px;
		height: 8px;
		margin-top: -7px;
		border-top: 1px solid #888;
		border-right: 1px solid #888;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}

	.Side_Navigation ul {
		position: relative;
		height: 0;
		overflow: hidden;
		list-style: none;
		margin-left: 0;
		padding-left: 20px;
		transition: height .2s ease-in-out;
	}

	.Side_Navigation input:checked + label {
		border-bottom: 1px solid#ccc;
	}

	.Side_Navigation input:checked + label::after {
		margin-top: -3px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.Side_Navigation input:checked ~ ul {
		height: auto;
		padding-bottom: 5px;

	}


	/*---------main contents------*/

	#main_navigation {
		display: none;
	}

	#main_contents {
		padding-top: 10px;
		padding-bottom: 25px;
	}

	.main_contents h4 {

	}


	/*------footer----*/
	footer {		
		background-color: #e4e4e4;
		color: #505050;
		clear: both;
		width: 100%;
		text-align: center;
	}

	.footer_contents {
		display: inline-block;
		width: 100%;
		max-width: 500px;
		padding: 20px;
		margin: 0 auto;
		text-align: left;
	}

	.footer_contents a {
		text-decoration: none;
		color: #505055;
	}

	#footer_copy_right {
		text-align: center;
		color: #505040;
	}

} 












@media only screen and (min-width: 768px) {
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}

	/*-----header----*/
	#header {
		color: #fff;
		background-color: #0124bf;
		background-image: url("./img/ComplexSystemWall.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		padding-top: 10px;
	}	

	.header_title {

	}

	#header_title {
		margin-top: 10px;
		margin-left: 40px;
		padding-bottom: 0px;
		background: rgba(192,192,192,0.7);
		width: 9em;
	}

	#header_subtitle {
		margin-left: 40px;
		font-size: 34;
		background: rgba(192,192,192,0.7);
		display: inline-block;
	}

	#header_select_language {
		/*text-align: right;*/
		margin-left: 40px;
		background-color: rgba(192,192,192,0.7);
		display: inline-block;
		cursor: pointer;
	}


	/*------side navigation-------*/
	#side_navigation_now {
		display: none;
	}

	#accordion_menu {
		display: none;
	}

	.Side_Navigation {
		border-radius: 25px;
		background-color: #f0f0f0;
		padding: 20px;
		margin: 10px 20px 70px;
		position: sticky;
		top: 20px;
		float: left;
		z-index: 10;
		clear: both;
	}

	.side_navigation_menus {
		text-align: left;
		padding-left: 0;
	}

	.side_navigation_menus ul {
		list-style-type: none;
		margin-left: 0;
		padding-left: 0;
	}

	.side_navigation_menus li {
		display: inline;
	}


	.side_navigation_menus li a {
		margin-top: 4px;
		margin-bottom: 4px;
		padding-left: 2px;
		border-bottom: 1px solid#ccc;

		display: block;
		width: 100%;
		height: 100%;
		color: #505050;

		-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
		-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
		-o-transition: font-size 0.3s ease, background-color 0.3s ease;
		-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
		transition: font-size 0.3s ease, background-color 0.3s ease;
	}

	.side_navigation_menus li:last-child a{
		border-bottom:  none;
	}

	.side_navigation_menus li a:hover {
		/*font-size: 20px;*/
		background-color: #e5e5e5;
		text-decoration: underline;
	}




	/*----main contents----*/

	#main_contents {
		padding: 10px 20px 75px;
		display: block;
		float: right;
		width: 75%;

	}

	p.main_contents {

	}

	img.main_contents {
		float: right;
	}




	/*------footer----*/
	footer {		
		background-color: #e4e4e4;
		color: #505050;
		clear: both;
		width: 100%;
		text-align: center;
	}

	.footer_contents {
		display: inline-block;
		width: 500px;
		padding: 20px;
		margin: 0 auto;
		text-align: left;
	}

	.footer_contents a {
		text-decoration: none;
		color: #505055;
	}

	#footer_copy_right {
		text-align: center;
		color: #505040;
	}
}