@charset "UTF-8";
html {
    height: 100%;
}
body{
    height: 100%;
    margin: 0;
	background-color: #02060f;
	background-image: url(/impublic/technology/sgp/img/bg_sgp.jpg) !important;
    background-position: center center;
    background-size: cover;
	background-repeat:no-repeat;
    background-attachment: fixed !important;
	/*background-size:100%;
	background-attachment:fixed;*/
}
#main{
	position:relative;
	width:100%;
}
.pc-show{
	display:block;
}
.top_video{
	position:relative;
	/*max-width:1200px;*/
	width:100%;
	height:auto;
	margin:0 auto;
	text-align:center;
}
.top_video h1{
	display:block;
	/*max-width:1200px;*/
	width:100%;
	position:absolute;
	color:#fff;
	font-size:60px;
	letter-spacing:0.1em;
	top:38%;
	padding:0;
}
.top_video h1 img{
	max-width:680px;
	margin:0 auto;
}
@media screen and (max-width: 640px) {
	.top_video h1 img{
		max-width:480px;
		margin:0 auto;
	}
}

.top_video h1 span{
	font-size:0.6em;
}
.top_video video{
	width:100%;
	height:auto;
	z-index:-1;
}
.downbtn{
	display:block;
	width:100%;
	position:absolute;
	top:90%;
}
.downbtn img{
	width:34px;
	height:34px;
	margin:0 auto;
}
.sgp01{
	max-width:1200px;
	padding-top:0;
	margin:0 auto 80px;
	text-align:center;
	color:#fff;
}
.sgp01 h2{
	font-size:38px;
}
.sgp01 h2 span{
	font-size:0.6em;
}
.sgp01 .algn-l{
	margin:60px 80px;
	text-align:left;
}
@media screen and (max-width: 640px) {
	.sgp01 div{
		margin:60px 30px;
	}
	.sgp01 h2{
		font-size:30px;
	}
}

.sgp01 img{
	max-width:1078px;
	margin:0 auto 60px;
}
.sgp01 h3{
	margin-bottom:40px;
}
.sgp01 ul{
	position:relative;
	text-align:center;
}
.sgp01 li{
	float:left;
	margin-right:5px;
}
.sgp01 li:last-child{
	margin-right:0;
}
.sgp01 li span{
	display:block;
	position:absolute;
	margin:0 auto;
}
.sgp01 li .arrow_s{
	position:absolute;
	max-width:34px;
}
.sgp01 .linkimage{
	max-width:296px;
}
.sgp01:after{
	display:block;
	content:"";
	clear:both;
}

/*
.wrap0 {
	padding-bottom: 60px !important;
}
.wrap1 {
	padding-bottom: 20px !important;
}
.wrap2 {
	padding-bottom: -20px !important;
}
.wrap3 {
	padding-bottom: -60px !important;
}
.wrap4 {
	padding-top: 0px !important;
	padding-bottom: 60px;
}*/
.wrap0 {
	margin-bottom: 20px !important;
}
.wrap1 {
	margin-bottom: -20px !important;
}
.wrap2 {
	margin-bottom: -60px !important;
}
.wrap3 {
	margin-bottom: -100px !important;
}
.wrap4 {
	padding-top: 0px !important;
	padding-bottom: 60px !important;
}
#section0 {
	padding-top: 140px;
}
#section1 {
	padding-top: 100px;
}
#section2 {
	padding-top: 140px;
}
#section3 {
	padding-top: 180px;
}
#section4 {
	padding-top: 220px;
}


/* ----------------------  */
.ssc{height: 164px;color:#fff;font-size: 18px;line-height: 24px; font-weight: bold; text-align: center;
/*padding: 40px 10px 60px;*/
display: block;position: relative;top:40px;}
.ssc:after{content:"";position: absolute;top: 20%;margin-top: 10px;left: 50%;background: url(/impublic/technology/sgp/img/ssc-arrow.png) center center no-repeat;z-index: 2;width: 16px;padding-bottom: 70px;margin-left: -8px;}


.ssc1,.ssc2,.ssc3,.ssc4,.ssc5{display: block;text-align: center;opacity: 1; transition: 1.2s;}

@media screen and (min-width: 641px) {.ssc1:hover,.ssc2:hover,.ssc3:hover,.ssc4:hover,.ssc5:hover{opacity: 0.8;  background-size: auto 110%;}
}

.ssc1{background: url(/impublic/technology/sgp/img/btn01.png) center center no-repeat;background-size: auto 100%;transition: 1.2s;}
.ssc2{background: url(/impublic/technology/sgp/img/btn02.png) center center no-repeat;background-size: auto 100%;transition: 1.2s;}
.ssc3{background: url(/impublic/technology/sgp/img/btn03.png) center center no-repeat;background-size: auto 100%;transition: 1.2s;}
.ssc4{background: url(/impublic/technology/sgp/img/btn04.png) center center no-repeat;background-size: auto 100%;transition: 1.2s;}
.ssc5{background: url(/impublic/technology/sgp/img/btn05.png) center center no-repeat;background-size: auto 100%;transition: 1.2s;}

.column-row{margin:-2px -1px 0;}
.column-row:after{content:"";display: table;clear: both;}
div[class*="col-"]{padding:0 1px;float: left;margin-top: 2px;}

#es-main{margin:0 auto;}
#es-main .column-row{margin:0 auto; max-width: 1200px; width: 100%;}
#es-main div[class*="col-"]{float: left; margin:5px 5px 5px 0; overflow: hidden; width: 24%;　height: 172px;}
#es-main div[class*="col-"]:last-child{margin:5px 0;}
#es04 div[class*="col-"]{padding:0}

@media screen and (max-width: 1200px) {
	#es-main{margin:0 20px;}
}
@media screen and (max-width: 640px) {
	#es-main{margin:0;}
}

/* ----------------------  */

@media screen and (max-width: 980px) {
	.pc-show{
		display:none;
	}
}

.sgp_img{
	position:relative;
}
@media screen and (max-width: 1200px) {
	.sgp_img img{
		max-width:96%;
		margin:0 20px;
	}
}
@media screen and (max-width: 640px) {
	.sgp_img img{
		width:600px;
		margin:0 20px;
	}
}
.only_pc h2{
	position:absolute;
	color:#fff;
	font-size:38px;
	letter-spacing:0.1em;
	top:40%;
	left:60%;
}
.only_pc h2.l{
	left:54%;
}
.only_sp h2{
	position:absolute;
	color:#000;
	font-size:36px;
	letter-spacing:0.1em;
	top:10%;
	left:56%;
}
.only_sp h2.l{
	left:50%;
	text-align:center;
}
.only_sp h2.wbg{
	left:56%;
	width:220px;
	height:60px;
	background-color:rgba(255,255,255,0.8);
	text-align:center;
}

.only_sp h2.r{
	left:5%;
	text-align:center;
}


.sgp_h3{
	max-width:1200px;
	margin:60px auto 40px;
	text-align:center;
}
@media screen and (max-width: 1200px) {
	.only_sp h2{
		left:68%;
	}
	.only_sp h2.wbg{
		left:68%;
	}
	.sgp_h3{
		max-width:96%;
	}
}
@media screen and (max-width: 997px) {
	.only_sp h2{
		left:60%;
	}
	.only_sp h2.wbg{
		left:60%;
	}
}
@media screen and (max-width: 640px) {
	.sgp_h3{
		max-width:600px;
	}
	.only_sp h2{
		left:56%;
	}
	.only_sp h2.wbg{
		left:50%;
	}
}

.sgp_h3 h3{
	color:#fff;
	font-size:28px;
	letter-spacing:0.1em;
	padding-bottom:20px;
	border-bottom:1px solid #fff;
}
.sgp_h3 .subtext{
	color:#fff;
	font-size:16px;
	padding:30px 20px 0;
	line-height:24px;
	letter-spacing:0.2em;
}
.detail_bar{
	max-width:1200px;
	height:22px;
	margin:0 auto;
	/*line-height:30px;*/
	text-align:center;
	/*padding-top:6px;*/
	color:#fff;
	background-color:#aaaaaa;
}
.detail01, .detail02, .detail03, .detail04{
	/**/display:none;
	background: rgba(0,0,0,0.3);
	max-width:1200px;
	margin:0 auto;
	padding:0 0 60px;
}
.detail_button{
	max-width:1200px;
	height:30px;
	text-align:center;
	color:#fff;
	background-color:#aaaaaa;
	cursor:pointer;
	margin:0 auto 80px;
	background-image:url('/impublic/technology/sgp/img/btn_open.png');
	background-position:50% 70%;
	background-repeat: no-repeat;
	position:relative;
	z-index:5;
}
.detail_button.opened{
	background-image:url('/impublic/technology/sgp/img/btn_close.png');
	background-position:50% 50%;
}
@media screen and (max-width: 1200px) {
	.detail_bar{
		margin:0 20px;
	}
	.detail_button{
		margin:0 20px 80px;
	}
}
.detailtext{
	max-width:50%;
	margin:0 auto;
	padding:0 20px;
	color:#fff;
	text-align:left;
	letter-spacing:0.2em;
}
.detailtext_m{
	font-size:20px;
	margin-bottom:30px;
	letter-spacing:0.2em;
}
.detailtext_s{
	font-size:16px;
	line-height:24px;
}
.detailtext.l{
	float:left;
}
.detailtext.r{
	float:right;
}
.detailtext_wide{
	max-width:1200px;
	margin:0 auto;
	padding:30px 20px 0 20px;
	color:#fff;
	text-align:left;
	letter-spacing:0.2em;
}
.detailtext_center{
	max-width:1200px;
	margin:0 auto;
	padding:30px 0 0 40px;
	color:#fff;
	text-align:left;
	letter-spacing:0.2em;
}
.animebox{
    max-width:1200px;
    min-height:100px;
	margin:0 auto;
	padding:60px 0 0;
}
.animebox:after{
	content:"";
	display:block;
	clear:both;
}
.animebox video{
	max-width:50%;
	height:auto;
	margin:0 auto;
}
.v-caption{
	width:50%;
	text-align:right;
	margin:0 auto;
	color:#fff;
	font-size: 12px;
	padding-top: 5px;
}

.animebox .ig{
	max-width:50%;
}
.animebox .ig.l{
	float:left;
}
.animebox .ig.r{
	float:right;
}
@media screen and (max-width: 1200px) {
	.animebox{
		background-color:transparent;
	}
	.animebox video{
		max-width:50%;
	}
	.animebox{
		max-width:1160px;
		margin:0 20px;
	}
}
@media screen and (max-width: 640px) {
	.animebox video{
    	max-width:560px;
    	height:auto;
    }
	.v-caption{
		width:100%;
    	max-width:560px;
    	text-align:right;
		font-size: 12px;
	}
	.detailtext{
		max-width:94%;
		margin:0 auto;
		padding:0 0 30px;
	}
	.animebox .ig{
		max-width:94%;
		margin:0 auto;
	}
	.animebox .ig.mt{
		margin-top:20px;
	}
	.detailtext.l, .detailtext.r, .animebox .ig.l, .animebox .ig.r{
		float:none;
	}
	.detailtext_wide{
		max-width:94%;
	}
	.detailtext_center{
		max-width:94%;
	}
}
.caution{
	max-width:1200px;
	margin:0 auto 60px;
	color:#fff;
	font-size:12px;
}
@media screen and (max-width: 1200px) {
	.caution{
		margin:0 20px 60px;
		font-size:12px;
	}
}

.nav-top{width: 170px;float: right; position:relative; z-index:10;}

#kms-nav{font-weight: bold;padding-top: 61px;}
#kms-nav ul{list-style: none;text-align: center;}
#kms-nav li + li{margin-top: 2px;}
#kms-nav li a{background: #333b9f;color:#fff;display: block;font-size: 16px;line-height: 19px;padding: 10px;}

#kms-nav li a:hover,
#kms-nav li a:active,
#kms-nav li.active a{background: #6db9eb;color:#fff;}

/* header menu */
/* @media screen and (max-width: 1280px) {
	.header .third_nav ul li {
		font-size: 11px !important;
		width:120px !important;
	}
}
@media screen and (max-width: 1000px) {
	.header .third_nav ul li {
		font-size: 10px !important;
		width:90px !important;
		margin: 10px 4px !important;
	}
}
@media screen and (max-width: 739px) {
	.header .third_nav ul li {
		width:86px !important;
		font-size: 10px !important;
		margin: 10px 2px !important;
	}
	.sec_nav_list{
		display:none;
	}
}
@media screen and (max-width: 688px) {
	.header .third_nav ul li {
		width:86px !important;
		margin: 10px 0 !important;
	}
} */
.header .third_nav ul li{
	line-height: 18px !important;
	position: relative;
}

.header .third_nav ul li:nth-child(6){
	line-height: 28px;
	vertical-align: middle;
}
.header .third_nav ul li b{
color: #383d9b;
}

.header .third_nav ul li.cur {
    background: #383d9b;
    padding: 3px;
}
@media screen and (max-width: 40em){
br {
    display: none;
}
.m-show{
  display: block;
}

.m_other_nav .title i{
          left: 87%;
}

}