@charset "utf-8";
a{color:#eca92b;text-decoration:none;}
a:hover{color:#bc7d03;}
a:active, a:focus{outline:0;}


body{
	width:100%;
	background-color: #385786;
	margin: 0px;
	padding: 0px;
	}
.header {
	width: 96%;
	height: 60px;
	margin: 10px 2%;
	}
.header_logo  {
	float: left;
	padding-top: 13px;
	padding-bottom: 10px;
	padding-left: 2%;
	}
.top_conent {
	float: left;
	width: 96%;
	margin-right: 2%;
	margin-left: 2%;
	}
.top_index {
	float: left;
	width: 100%;
	text-align: center;
	font-size: 2em;
	color: #FFF;
	letter-spacing: 0.3em;
	}
.molecule_list {
	float: left;
	padding-top: 0%;
	padding-right: 0%;
	padding-bottom: 2%;
	padding-left: 0%;
	text-align: left;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 3%;
	width: 97%;
	}
.list_btn_index01, .list_btn_index02, .list_btn_index03 {
	width: 94%;
	text-align: center;
	text-shadow: 0px 0px 10px rgba(100,50,10,0.7);
	background: linear-gradient(180deg, rgba(223, 136, 94, 1), rgba(223, 135, 93, 1), rgba(211, 104, 66, 1));
	font-weight: bold;
	color: #FFF;
	border:2px solid;
	border-color:#EAB095;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all  0.8s ease;
	padding: 1%;
	margin-top: 3%;
	margin-right: 2%;
	margin-bottom: 1%;
	margin-left: 1%;
	font-size: 2em;
	display: inline-block;
	vertical-align: top;
	}
.list_btn_index01 {
	text-shadow: 0px 0px 10px rgba(100,50,10,0.7);
	background: linear-gradient(180deg, rgb(223, 136, 94), rgb(223, 135, 93), rgb(211, 104, 66));
	color: #FFF;
	border-color:#EAB095;
	}
.list_btn_index02 {
	text-shadow: 0px 0px 10px rgba(100,50,10,0.7);
	background: linear-gradient(180deg, rgb(65, 163, 164), rgb(85, 183, 184), rgb(55, 153, 154));
	color: #FFF;
	border-color:rgb(95, 193, 194);
	}
.list_btn_index03 {
	text-shadow: 0px 0px 10px rgba(100,50,10,0.7);
	background: linear-gradient(180deg, rgb(211, 201, 74), rgb(211, 200, 73), rgb(202, 180, 47));
	color: #FFF;
	border-color:rgb(231, 220, 93);
	}
.list_btn_item01, .list_btn_item02, .list_btn_item03 {
	Wfont-size: 1.4em;
	margin: 1%;
	width: 17%;
	text-align: center;
	text-shadow: 0px 0px 50px rgba(0,0,0,.9);
	font-weight: bold;
	color: #FFF;
	box-sizing:border-box;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all  0.8s ease;
	padding-top: 6%;
	padding-bottom: 5%;
	display: inline-block;
	vertical-align: top;
	padding-right: 0%;
	padding-left: 0%;
	font-size: 1.6em;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	}
.list_btn_item01 {
	text-shadow: 0px 0px 10px rgba(100,50,10,0.7);
	background: linear-gradient(180deg, rgba(223, 136, 94, 1), rgba(223, 135, 93, 1), rgba(211, 104, 66, 1));
	color: #FFF;
	border-color:#EAB095;
	}
.list_btn_item02 {
	text-shadow: 0px 0px 10px rgba(100,50,10,0.7);
	background: linear-gradient(180deg, rgba(65, 163, 164, 1), rgba(85, 183, 184, 1), rgba(55, 153, 154, 1));
	color: #FFF;
	border-color:rgb(115, 213, 214);
	}
.list_btn_item03 {
	text-shadow: 0px 0px 10px rgba(100,50,10,0.7);
	background: linear-gradient(180deg, rgb(211, 201, 74), rgb(211, 200, 73), rgb(202, 180, 47));
	color: #FFF;
	border-color:rgb(231, 220, 93);
	}
a.list_btn01, a.list_btn02, a.list_btn03{
	width: 17%;
	text-align: center;
	text-shadow: 0px 0px 10px rgba(100,50,10,0.7);
	background: linear-gradient(180deg, rgba(20, 40, 30, .30), rgba(10, 10, 30, .30));
	font-weight: bold;
	color: #FFF;
	border:2px solid;
	border-color:rgba(20, 30, 40, .50);
	box-sizing:border-box;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all  0.8s ease;
	padding: 1%;
	vertical-align: top;
	display:inline-block;
	margin: 1%;
	font-size: 1.2em;
	}
a.list_btn01 {
	text-shadow: 0px 0px 10px rgba(100,50,10,0.7);
	background: linear-gradient(180deg, rgba(20, 40, 30, .30), rgba(10, 10, 30, .30));
	color: #FFF;
	border-color:rgba(20, 30, 40, .50);
	vertical-align: top;
	display:inline-block;
	}
a.list_btn02 {
	text-shadow: 0px 0px 10px rgba(100,50,10,0.7);
	background: linear-gradient(180deg, rgba(20, 40, 30, .30), rgba(10, 10, 30, .30));
	color: #FFF;
	border-color:rgba(20, 30, 40, .50);
	vertical-align: top;
	display:inline-block;
	}
a.list_btn03 {
	text-shadow: 0px 0px 10px rgba(100,50,10,0.7);
	background: linear-gradient(180deg, rgba(20, 40, 30, .30), rgba(10, 10, 30, .30));
	color: #FFF;
	border-color:rgba(20, 30, 40, .50);
	vertical-align: top;
	display:inline-block;
	}
.list_space {
	width: 17%;
	text-align: center;
	text-shadow: 0px 0px 10px rgba(100,50,10,0.7);
	background: linear-gradient(180deg, rgba(20, 40, 30, .0), rgba(10, 10, 30, .0));
	font-weight: bold;
	color: #FFF;
	border:2px solid;
	border-color:rgba(20, 30, 40, .0);
	box-sizing:border-box;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	transition: all  0.8s ease;
	padding: 1%;
	vertical-align: top;
	display:inline-block;
	margin: 1%;
	font-size: 1.2em;
}

a.list_btn01:hover, a.list_btn02:hover, a.list_btn03:hover{
	opacity: 0.8;
	text-shadow: 0px 0px 10px rgba(255,255,255,0.8);
	background: -moz-linear-gradient(top, #E79D72, #F3BC9E 1%, #E79D72 50%, #F3BC9E 99%, #F3BC9E);
	background: -webkit-gradient(linear, left top, left bottom, from(#E79D72), color-stop(0.01, #F3BC9E), color-stop(0.5, #F3BC9E), color-stop(0.99, #E79D72), to(#F3BC9E));
	color: #FFF;
	border:2px solid #F2D0BF;
	text-decoration: none;	
	vertical-align: top;
	display:inline-block;
	}
a.list_btn01:hover{
	text-shadow: 0px 0px 10px rgba(255,255,255,0.8);
	background: -moz-linear-gradient(top, #E79D72, #F3BC9E 1%, #E79D72 50%, #F3BC9E 99%, #F3BC9E);
	background: -webkit-gradient(linear, left top, left bottom, from(#E79D72), color-stop(0.01, #F3BC9E), color-stop(0.5, #F3BC9E), color-stop(0.99, #E79D72), to(#F3BC9E));
	color: #FFF;
	border:2px solid #F2D0BF;
	}
a.list_btn02:hover{
	text-shadow: 0px 0px 10px rgba(255,255,255,0.8);
	background: linear-gradient(180deg, rgba(85, 183, 184, 1), rgba(65, 163, 164, 1));
	color: #FFF;
	border:2px solid rgb(105, 203, 204);
	}
a.list_btn03:hover{
	text-shadow: 0px 0px 10px rgba(255,255,255,0.8);
	background: linear-gradient(180deg, rgb(211, 201, 74), rgb(211, 200, 73), rgb(202, 180, 47));
	color: #FFF;
	border:2px solid #F2D0BF;
	}
.list_btn01 p {
	background: linear-gradient(90deg, rgba(193, 89, 50, 1), rgba(213, 109, 70, 1), rgba(193, 89, 50, 1));
}
.list_btn02 p {
	background: linear-gradient(90deg, rgba(55, 153, 154, 1), rgba(65, 163, 164, 1), rgba(55, 153, 154, 1));
}
.list_btn03 p {
	background: linear-gradient(90deg, rgb(202, 180, 47), rgb(211, 200, 73), rgb(202, 180, 47));
}

.indeximg img {
	width: 100%;
	border: 1px solid #666;
	box-sizing:border-box;
}
.indeximg img:hover {
	opacity: 0.6;	
}
	.atom{
	width:100%;
	float: left;
	padding-top: 0%;
	padding-right: 2%;
	padding-bottom: 2%;
	padding-left: 2%;
	z-index: 2;
	background-color: #D26640;
	color: #F3BC9E;
	}
	.atom_frame {
	border: 1px solid #ADADAD;
	color: #FFF;
	width: 100%;
	padding: 20px;
	}

.molecule_text i {
	font-family:'Times New Roman', 'TimesNewRomanPS-ItalicMT';
	font-weight: bold;
}



/* PC */
@media only screen and (min-width:1000px){	
	body{
	width:100%;
	height:100%;
	padding:0;
	}
}


/* mobile */
@media only screen and (max-width:1150px){
	body{
	width:100%;
	padding:0;
	}
	.header {
	width: 80%;
	height: 60px;
	margin: 10px 10%;
	}
	.top_conent {
	float: left;
	width: 80%;
	margin-right: 10%;
	margin-left: 10%;
	}
	.top_index {
	float: left;
	width: 100%;
	text-align: center;
	font-size: 24px;
	color: #FFF;
	letter-spacing: 0.3em;
	}
	.list_btn_index01, .list_btn_index02, .list_btn_index03 {
	width: 95%;
	padding: 1%;
	margin-top: 3%;
	margin-right: 2%;
	margin-bottom: 1%;
	margin-left: 1%;
	font-size: 2em;
	display: inline-block;
	vertical-align: top;
	}
	a.list_btn01, a.list_btn02, a.list_btn03 {
	margin: 1%;
	padding-top: 1%;
	padding-left: 1%;
	padding-right: %;
	padding-bottom: 1%;
	width: 30%;
	display:inline-block;
	}
	.list_space {
	margin: 1%;
	padding-top: 1%;
	padding-left: 1%;
	padding-right: %;
	padding-bottom: 1%;
	width: 30%;
	display:inline-block;
	}
	.list_btn_item01, .list_btn_item02, .list_btn_item03 {
	margin: 1%;
	width: 30%;
	padding-top: 9%;
	padding-right: 1%;
	padding-bottom: 9%;
	padding-left: 1%;
	display:inline-block;
	}
}
/* mobile middle*/
@media only screen and (max-width:800px){
	body{
	width:100%;
	padding:0;
	}
	.header {
	width: 80%;
	height: 60px;
	margin: 10px 10%;
	}
	.top_conent {
	float: left;
	width: 80%;
	margin-right: 10%;
	margin-left: 10%;
	}
	.top_index {
	float: left;
	width: 100%;
	text-align: center;
	font-size: 24px;
	color: #FFF;
	letter-spacing: 0.3em;
	}
	.molecule_list {
	float: left;
	width: 100%;
	margin: 0px;
	padding: 0px;
	}
	.list_btn_index01, .list_btn_index02, .list_btn_index03 {
	width: 95%;
	padding: 1%;
	margin-top: 3%;
	margin-right: 2%;
	margin-bottom: 1%;
	margin-left: 2%;
	}
	a.list_btn01, a.list_btn02, a.list_btn03 {
	margin: 2%;
	padding-top: 1%;
	padding-left: 3%;
	padding-right: 3%;
	padding-bottom: 1%;
	width: 45%;
	display:inline-block;
	}
	.list_space {
	margin: 2%;
	padding-top: 1%;
	padding-left: 3%;
	padding-right: 3%;
	padding-bottom: 1%;
	width: 45%;
	display:none;
	}
	.list_btn_item01, .list_btn_item02, .list_btn_item03 {
	margin: 2%;
	width: 45%;
	padding-top: 12%;
	padding-right: 3%;
	padding-bottom: 12%;
	padding-left: 3%;
	display:inline-block;
	}
}

/* mobile small*/
@media only screen and (max-width:550px){
	body{
	width:100%;

	padding:0;
	}
	.header {
	width: 80%;
	min-width:200px;
	height:60px;
	margin: 10px 10%;
	}
	.header_logo img {
	width: 90%;
	height: 90%;
	}
	.top_conent {
	float: left;
	width: 80%;
	margin-right: 10%;
	margin-left: 10%;
	}
	.top_index {
	float: left;
	width: 100%;
	text-align: center;
	font-size: 24px;
	color: #FFF;
	letter-spacing: 0.3em;
	}
	.molecule_list {
	float: left;
	width: 100%;
	margin: 0px;
	padding: 0px;
	}
	a.list_btn01, a.list_btn02, a.list_btn03 {
	margin: 3%;
	padding-top: 1%;
	padding-left: 3%;
	padding-right: 3%;
	padding-bottom: 1%;
	width: 94%;
	}
	.list_space {
	margin: 3%;
	padding-top: 1%;
	padding-left: 3%;
	padding-right: 3%;
	padding-bottom: 1%;
	width: 94%;
	}
	.list_btn_item01, .list_btn_item02, .list_btn_item03 {
	margin: 3%;
	width: 94%;
	padding-top: 1%;
	padding-right: 3%;
	padding-bottom: 0%;
	padding-left: 3%;
}
}