﻿/*-----------------------------------------------------	*/
/*	for all						*/
/*-----------------------------------------------------	*/

/* ------ clearfix ------ */
.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {display:table;line-height:0;content: "";}
.clearfix:after {clear:both;}

/* IE6,7 */
.ie6 body {background:url(null) fixed;filter:expression('');}
.ie7 body {filter:expression('');}

/* fixed */
.fixed_tl {position:fixed;top:0;left:0;}
.ie6 .fixed_tl {position:absolute;top:expression(document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTop || 0 + 0 + 'px');left:expression(document.documentElement && document.documentElement.scrollLeft || document.body && body.scrollLeft || 0 + 0 + 'px');}
.fixed_tr {position:fixed;top:0;right:0;}
.ie6 .fixed_tr {position:absolute;top:expression(document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTop || 0 + 0 + 'px');right:expression(this.style.filter = '', '0');}
.fixed_bl {position:fixed;bottom:0;left:0;}
.ie6 .fixed_bl {position:absolute;bottom:expression(this.style.filter = '', '0');left:expression(document.documentElement && document.documentElement.scrollLeft || document.body && body.scrollLeft || 0 + 0 + 'px');}
.fixed_br {position:fixed;bottom:0;right:0;}
.ie6 .fixed_br {position:absolute;bottom:expression(this.style.filter = '', '0');right:expression(this.style.filter = '', '0');}

img {
	-ms-interpolation-mode: bicubic;
}
/* ------ General Settings ------ */

#main img {
	max-width: 100%;
	height: auto;
	width: auto\9;
	vertical-align:top;
	font-size:0;
	line-height:0;
}

th {font-weight:normal;text-align:left;}

th,td {vertical-align:top;}

body {
	background-color: #000;
	color:#eee;
}

.text-center {
	text-align: center;
}

h1,h2,h3,h4,h5 { 
	color: #ffffff;
	line-height: 1em;
}

p {
	line-height: 1.8em;
}

#contents {
	width: 100%;
	clear:both;
	color: #efefef;
	background: #00008b;
	background: url(../images/bg.png) ,linear-gradient(to right, #040438, #16165b, #00008b, #16165b, #040438);
	background-repeat: repeat;
	background-position: 90%;
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.small {
	font-size: 70%;
	margin-bottom:10px;
}

.txtleft {
	text-align:left;
}

.txtright {
	text-align:rightt;
}

.right {
	float:rightt;
}

rt { 
    -webkit-text-size-adjust: 100%;
    font-weight: 100; 
    font-size: 50%;
}


.btn {
  text-align: center;
  display: inline-block;
  position: relative;
  padding: 0.3em 1em;
  border-radius: 7px;
  color: #fff;
  background-color: #0A0AFF;
  text-decoration: none;
  -webkit-transition: background-color .3s, box-shadow .3s, -webkit-transform .3s;
  transition: background-color .3s, box-shadow .3s, transform .3s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

a.btn {
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn.next {
  padding-right: 2em;
}

.btn.prev {
  padding-left: 2em;
}

.btn.inline {
  margin: 0 .3em;
  padding: .3em;
  line-height: 1;
}

a.btn:hover {
  text-decoration: none;
  background-color: #2E76DB;
  box-shadow: 0 5px 0 #000056, 0 10px 3px rgba(0,0,0,.1);
  -ms-transform: translateY(-5px);
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
a.btn:active {
  background-color: #000056;
  box-shadow: 0 2px 0 #111, 0 4px 1px rgba(0,0,0,.1);
  -ms-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
}

.btn.next::after,
.btn.prev::before {
  content: "";
  z-index: 1;
  position: absolute;
  top: 50%;
  width: .5em;
  height: .5em;
  border-style: solid;
  border-color: white;
  -ms-transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}

.btn.next::after {
  right: 1em;
  border-width: .2em .2em 0 0;
}

.btn.prev::before {
  left: 1em;
  border-width: 0 0 .2em .2em;
}

.next:hover::after,
.prev:hover::before {
  -webkit-animation: larger .3s;
  animation: larger .3s;
}

.next:active::after,
.prev:active::before {
  -webkit-animation: smaller .3s;
  animation: smaller .3s;
}

.pagetop{
  float:right;
  text-align: center;
  font-size:80%;
  display: block;
  padding: 0.3em 1em;
  margin-bottom:10px;
  border-radius: 7px;
  color: #fff;
  background-color: #000;
  -webkit-transition: background-color .3s, box-shadow .3s, -webkit-transform .3s;
  transition: background-color .3s, box-shadow .3s, transform .3s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.pagetop a{
  text-decoration: none;
}
/* ------ Header ------ */

#tgsHeader {
	width: 100%;
	position: relative;
	background-color: #040438;
	border-bottom:1px solid #111;
	-webkit-box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.2);
	-ms-box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.2);
}

#header-inner {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	overflow: hidden;
	*zoom: 1;
}

#tagline {
	padding-top: 5px;
	line-height: 160%;
	font-size: 70%;
	color: #ccc;
}

#logo {
	padding: 15px 0;
}

#logo a {
	display: block;
	max-width: 640px;
}
#logo img {
	width: 100%;
}
#gnav-btn {
	display :none;
}

#gnav {
	clear: both;
	width: 100%;
	background-color: #00000a;
}

#gnav nav {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	overflow: hidden;
	*zoom: 1;
}

#gnav nav ul {
	float: left;
	border-left: solid 1px #111;
	border-right: solid 1px #333;
}

#gnav nav ul li {
	float: left;
}
#gnav nav ul li a {
	display: block;
	padding: 8px 10px 6px;
	border-left: solid 1px #333;
	border-right: solid 1px #111;
	font-size: 83%;
}
.menubt:link,
.menubt:visited {
	background-color: #00000a;
	color: #ccc;
	text-decoration: none;
}
.menubt:hover,
.menubt:active,
.menubt.current {
	background-color: #333;
	color: #fff;
	text-decoration: none;
}

#gnav  img {
	margin-bottom:2px;
	margin-right: -3px;
}
#gnav nav ul li a[title^="coming"] {
	background-color: #00000a;
	color: #666;
	text-decoration: none;
	pointer-events:none;
	cursor: default;
}

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

#main {
	width: 980px;
	margin: 0 auto;
	padding-top: 10px;
	overflow: hidden;
	*zoom: 1;
}

#left-column {
	float: left;
	width: 740px;
	padding-bottom: 20px;
}

article section {
	padding: 0 0 30px;
	border-top: solid 1px #ddd;
}

article section:first-child {
	border-top: none;
}

article section h2 {
	padding: 30px 0 20px;
	font-size: 110%;
	font-weight: bold;
	line-height: 140%;
	color: #fff;
	-webkit-text-shadow: 0px 1px 0px #000;
	text-shadow: 0px 1px 0px #000;
	border-top: solid 1px #fff;
}

#contents-title {
	padding: 10px 0 20px;
	font-size: 110%;
	font-weight: bold;
	line-height: 140%;
	color: #fff;
	-webkit-text-shadow: 0px 1px 0px #000;
	text-shadow: 0px 1px 0px #000;
	border-top: none;
}
#contents-title img {
	margin-top:2px;
}

article section p {
	font-size: 90%;
	line-height: 160%;
	color: #555;
}

.box {
	background: rgba(45, 45, 51, 0.7);
	margin-bottom: 30px;
	padding: 15px;
	border-top: none;
	border-bottom: solid 1px #222222;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
	-ms-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.7);
}

article .box h2 {
	padding: 10px 0;
	border-top: none;
}

.tit img {
	margin-top:-10px;
}

.box .tit img {
	margin-top:-5px;
}
article .box p {
	font-size: 83%;
}

.news-box {
	font-size: 83%;
	color: #eee;
	line-height: 160%;
	margin-top: 10px;
}

.news-box dt {
	float: left;
	width: 8em;
}

.news-box dd {
	margin-left: 8em;
}

/* ------ Right Column ------ */

#right-column {
	float: right;
	width: 220px;
	padding-bottom: 20px;
}

#right-column .box {
	margin-bottom: 20px;
	padding: 0 15px 15px;
}

#right-column .banner {
	margin-bottom: 20px;
	padding: 10px 0 0;
}

#right-column .banner li {
	padding-bottom: 10px;
	text-align: center;
}

#right-column .banner img {
	border: solid 1px #666;
	*width:auto;
	*max-width:none;
}



/*-----------------------------------------------------	*/
/*	for - 979px					*/
/*-----------------------------------------------------	*/

@media screen and (max-width: 979px) {

	#header-inner {
		width: 90%;
	}

	#gnav {
	}

	#gnav nav {
		width: 98%;
	}

	#gnav nav ul li {
	}

	#gnav nav ul li a {
		padding: 8px 10px 6px;
	}

	#main {
		width: 100%;
	}

	#left-column {
		float: none;
		width: 100%;
		margin: 0 auto;
		padding:1%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}

	#right-column {
		float: none;
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
		*zoom: 1;
		padding:1%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}

	#right-column-inner {
		width: 100%;
	}

	#right-column .box {
		float: left;
		padding: 0 2.5% 15px;
	}

	#right-column .banner {
		padding: 10px 10px 0;
	}

	#right-column .banner li {
		float: left;
		margin:5px;
	}

	#footer-inner {
		width: 100%;
	}

}



/*-----------------------------------------------------	*/
/*	for - 767px					*/
/*-----------------------------------------------------	*/

@media screen and (max-width: 767px) {

	html {
		*overflow-x: hidden;
	}

	#gnav-btn {
		position: absolute;
		top:30px; left:0;
		display: block;
		width: 50px;
		padding: 0;
		margin: 0;
		z-index: 10;
	}

	#header-inner {
		position: relative;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}

	#tagline {
		float: none;
		padding: 5px 0 5px;
		text-align: center;
	}

	#logo {
		padding: 0 10px 15px 60px;
	}

	#logo a {
		margin: 0 auto;
	}

	#gnav-btn div {
		width: 40px;
		margin-left: 10px;
		border-bottom: solid 1px #444;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}

	#gnav-btn a {
		display: block;
		height: 30px;
		line-height: 30px;
		color: #ccc;
		font-size: 20px;
		border: solid 1px #111;
		text-align: center;
		vertical-align: top;
		text-decoration: none;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-webkit-text-shadow: 0px -1px 0px #700;
		text-shadow: 0px -1px 0px #111;
	}

	#gnav-btn a:link,
	#gnav-btn a:visited {
		background: #444;
		background: -moz-linear-gradient(top, #444, #333);
		background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#333));
		background: -webkit-linear-gradient(top, #444, #333);
		background: -o-linear-gradient(top, #444, #333);
		background: linear-gradient(to bottom, #444, #333);
	}
	#gnav-btn a:hover,
	#gnav-btn a:active,
	#gnav-btn a.current {
		background: #555;
		background: -moz-linear-gradient(top, #555, #444);
		background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#444));
		background: -webkit-linear-gradient(top, #555, #444);
		background: -o-linear-gradient(top, #555, #444);
		background: linear-gradient(to bottom, #555, #444);
	}

	#gnav {
		position: absolute;
		width: 250px;
		top: 0;
		left: -250px;
	}

	#gnav nav ul {
		float: none;
		width: 100%;
		border-left: none;
		border-right: none;
		border-top: solid 1px #111;
	}

	#gnav nav ul li {
		float: none;
		width: 100%;
	}

	#gnav nav ul li a {
		display: block;
		padding: 10px 20px 8px;
		font-size: 90%;
		border-left: none;
		border-right: none;
		border-bottom: solid 1px #111;
		border-top: solid 1px #333;
		*zoom: 1;
	}

	.sqexch{
	display:none;
	}
	
}


/*-----------------------------------------------------	*/
/*	for - 479px					*/
/*-----------------------------------------------------	*/

@media screen and (max-width: 479px) {

	.box {
		padding: 0 20px 20px;
	}

	#contents-title {
		font-size: 110%;
	}

	.box {
		margin-bottom: 20px;
		padding: 5px;
	}

	.news-box dt {
		float: none;
		width: auto;
		font-size: 80%;
		color: #cccccc;
	}

	.news-box dd {
		margin: 0 0 15px 0;
	}

	#right-column {
		*margin-bottom: 0;
	}

	#right-column-inner {
		width: 100%;
	}

	#right-column .banner {
		margin-right: 0;
		padding: 2px 5px 0;
	}

	#right-column .banner li {
		margin: 0;
		padding:5px;
		width: 50%;
		text-align:center;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	#right-column .banner li img {
		width:auto;
		max-width:100%;
		height:auto;
	}
	
}

