@charset "utf-8";

.topmain {
background-image: url(/satreps/images/mainimg.jpg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
}

.topmainbox {
width: 1080px;
height: 500px;
margin: 0 auto;
text-align: left;
}

.topmainbox h3 {
display: inline-block;
font-size: 36px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.1em;
color: #FFF;
padding: 0 0 0.5em 0;
margin: 3.5em 0 0 0;
border-bottom: 1px solid #FFF;
}

.topmainbox p {
font-size: 26px;
margin: 0.5em 0;
color: #FFF;
}

@media screen and (max-width: 768px) {
	.topmainbox {
	width: 96%;
	height: 300px;
	}
	.topmainbox h3 {
	font-size: 24px;
	letter-spacing:0;
	margin: 2em 0 0 0;
	}
	.topmainbox p {
	font-size: 18px;
	}
}

/* 1¶ÎÄ¿£ºinformation
----------------------------------------------------- */

.index01 {
width: 990px;
margin:0 auto;
padding: 3em 0 3em 0;
text-align:left;
}

.index01 h3 {
font-size: 18px;
font-weight: bold;
padding: 0 0 4px 40px;
background-image: url(/satreps/images/icon_info.png);
background-position: 0 0.4em;
background-repeat: no-repeat;
}

.index01 h3 span a {
display: block;
float: right;
font-size: 14px;
font-weight: normal;
color: #FFF;
padding: 6px 1em;
background-color: #333;
text-decoration: none;
}

.index01box {
overflow:hidden;
padding: 2em 0 0 0;
border-top: 1px solid #333;
}

.index01box dl {
overflow:hidden;
padding:0 0 0.5em 0;
margin:0 0 0.5em 0;
}

.index01box dt {
width:24%;
float:left;
color: #1f6fb0;
font-weight: 700;
line-height: 1.4;
margin: 0 0 6px 0;
border-right: 1px solid #1f6fb0;
}

.index01box dt span.news {
font-size: 13px;
font-weight: normal;
color: #FFF;
padding: 2px 1em;
margin: 0 1.5em 0 0;
background-color: #1f6fb0;
}

.index01box dt span.research-activity {
font-size: 13px;
font-weight: normal;
color: #FFF;
padding: 2px 1em;
margin: 0 1.5em 0 0;
background-color: #12a289;
}

.index01box dd {
width:72%;
float:right;
line-height: 1.4;
}

.index01box dd a {
color: #000;
}

/* 2¶ÎÄ¿£º
----------------------------------------------------- */
.index02 {
padding: 4em 0 0 0;
background-color: #f2f2f2;
}

.index02 h3{
display: inline-block;
font-size: 34px;
font-weight: 700;
line-height:1.4;
padding: 0 0 0.7em 0;
margin: 0 0 1em 0;
border-bottom: 3px solid #028a87;
}

.index02 p {
font-size: 18px;
font-weight: 700;
line-height: 2.4;
}

.index02box {
width: 100%;
min-width: 1080px;
margin: 4.5em 0 0 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

.index02box section {
width: 25%;
height: 280px;
padding: 2em 2em 2em 2.2em;
color: #FFF;
text-align: left;
position: relative;
}

.index02box section h4 {
display: inline-block;
font-size: 26px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.2em;
padding: 0 2em 0.3em 0;
margin: 0 0 0.3em 0;
border-bottom: 1px solid #FFF;
}

.index02box section p {
font-size: 14px;
line-height: 1.8;
}

.index02box section p.more {
position: absolute;
top: 80%;
right: 2em;
}

.index02box section p.more a {
display: block;
font-size: 12px;
color: #1f6fb0;
padding: 0.2em 1.5em;
background-color: #FFF;
text-decoration: none;
}

.index02box section p.more a:hover {
color :#FFF;
background-color: #666;
}

.index02box section:nth-of-type(even) h4 {
color: #000;
border-bottom: 1px solid #000;
text-shadow: 1px 1px 2px #FFF;
}

.index02box section:nth-of-type(even)  p {
color: #000;
text-shadow: 1px 1px 2px #FFF;
}

.index02box section:nth-of-type(even)  p.more a {
display: block;
font-size: 12px;
color: #FFF;
padding: 0.2em 1.5em;
background-color: #666;
text-decoration: none;
}

.index02box section:nth-of-type(even)  p.more a:hover {
color :#666;
background-color: #CCC;
}

.index02box section.outline {
background-image:url(/satreps/images/index02box_photo01.jpg);
background-position: 0 0;
background-repeat:no-repeat;
background-size: cover;
}

.index02box section.system {
background-image:url(/satreps/images/index02box_photo02b.jpg);
background-position: center center;
background-repeat:no-repeat;
background-size: cover;
}

.index02box section.resaarch {
background-image:url(/satreps/images/index02box_photo03.jpg);
background-position: 0 0;
background-repeat:no-repeat;
background-size: cover;
}

.index02box section.activity {
background-image:url(/satreps/images/index02box_photo04.jpg);
background-position: 0 0;
background-repeat:no-repeat;
background-size: cover;
}

@media screen and (max-width: 768px) {
	.index01 {
	width: 90%;
	padding: 2em 0;
	}
	.index01box dl {
	margin: 0 0 1em 0;
	border-bottom: 1px dotted #CCC;
	}
	.index01box dt {
	width: 100%;
	float: none;
	border: none;
	}
	.index01box dd {
	width: 100%;
	float: none;
	}
	.index02 {
	padding: 3em 0 0 0;
	}
	.index02box {
	min-width: inherit;
	margin: 3em 0 0 0;
	}
	.index02_h {
	width:90%;
	margin: 0 auto;
	}
	.index02 h3{
	font-size: 20px;
	padding: 0 0 0.7em 0;
	margin: 0 0 1em 0;
	}
	.index02 p {
	font-size: 15px;
	line-height: 2.0;
	text-align: left;
	margin: 0 0;
	}
	.index02box section {
	width: 50%;
	height: 160px;
	padding: 1.5em 0.5em 0 1em;
	}
	.index02box section h4 {
	display: inline-block;
	font-size: 22px;
	letter-spacing: 0;
	}
	.index02box section p.more {
	right: 8px;
	margin: 0;
	}

}


/* 3¶ÎÄ¿£º¥Ð¥Ê©`
----------------------------------------------------- */
.bnbox {
background-color: #2d2d2d;
}

.bnbox ul {
width: 1180px;
margin: 0 auto;
padding: 4em 0 3.5em 0;
text-align: left;
}

.bnbox ul li {
display: inline-block;
margin: 0 2px 10px 2px;
}

.bnbox ul li img {
vertical-align: bottom;
}


@media screen and (max-width: 768px) {
	.bnbox ul {
	width:90%;
	padding: 3em 0 2.5em 0;
	}
	.bnbox ul li img {
	width:auto;
	height: 36px;
	}
}