@charset "utf-8";
/* CSS Document */

body{
background:url(../img/h1.jpg) no-repeat top center;
background-position: top center;
background-size: 100%;
}
#main{
width:100%;
margin:2em auto;
}
h2{
display:inline-block;
color:#fff;
text-align:center;
font-size:110%;
margin:3em auto 5em;
line-height:1.7;
width:100%;
animation: fadeIn 8s ease 0s 1 normal;
-webkit-animation: fadeIn 8s ease 0s 1 normal;
}
@keyframes fadeIn { 
0% {opacity:0;} 
100% {opacity:1;} 
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
h2 img{
display:block;
padding-bottom:10px;
margin:0 auto;
}
#banner ul{
margin:0 auto 2em;
text-align:center;
}
#banner li{
display:inline-block;
margin:0;
padding:0;
text-align:center;
font-size:90%;
}
#banner li img{
width:268px;
height:auto;
border:4px solid #46C98D;
border-radius:10px;
margin:0 15px 5px;
}
#info_box{
width:900px;
margin:0 auto;
}
#news{
vertical-align:top;
display:inline-block;
width:510px;
}
#news dt{
border-bottom:2px dotted #555;
padding:0.4em 0;
font-size:115%;
font-weight:bold;
color:#2CAEFF;
}
#news dt span{
font-size:85%;
float:right;
display:block;
padding-right:0.5em;
}
#news li{
border-bottom:2px dotted #555;
padding:1em 0;
text-indent:1em;
}
#news li a{padding:0.8em 0;}
#news li span{color:#2CAEFF;}
#link{
display:inline-block;
padding-left:25px;
}
#link li img{
border-radius:10px;
margin-bottom:15px;
width:355px;
height:auto;
}
#link li a:hover img{opacity:0.7;}
#link dt{
padding:0.4em 0;
font-size:115%;
font-weight:bold;
color:#F66;
}
#link dt span{
font-size:85%;
float:right;
display:block;
padding-right:0.5em;
}
@media screen and (max-width: 1000px) {h2{color:#46C98D;}}
@media screen and (max-width: 900px) {
#main{
width:90%;
margin:1em auto;
}
h2{margin:3em auto 2em;}
#banner li{
margin:0 auto 1.2em;
padding:0;
}
#info_box{width:100%;}
#news{
display:inline-block;
width:100%;
margin-bottom:2em;
}
#link{
display:block;
padding-left:0;
}
#link li{
width:48.5%;
display:inline-block;
}
#link li img{
width:100%;
height:auto;
margin-bottom:15px;
}
#link li:nth-of-type(1),
#link li:nth-of-type(3)
{
display:inline-block;
margin-right:1.7%;
}
}
@media screen and (max-width: 640px) {
body{
background:url(../img/h1.jpg) no-repeat top center;
background-position: top center;
background-size: 180%;
}
h2{
color:#46C98D;
text-align:justify;
font-size:90%;
margin:3em auto 2em;
padding:2em 0 0;
}
h2 img{
display:block;
padding:0 0 10px;
width:220px;
height:auto;
margin:0 auto;
}
h2 br{display:none;}
#banner ul{margin:0 auto 1em;}
#news li{text-indent:0;font-size:90%;}
#news li span{display:block;}
#news dt span{
float:none;
display:block;
padding-right:0;
}
}
@media screen and (max-width:480px) {
#link li{
width:100%;
display:inline-block;
}
#link li img{
width:100%;
height:auto;
margin-bottom:15px;
}
#link li:nth-of-type(1){
display:inline-block;
margin-right:0;
}
#banner li img{
width:80%;
height:auto;
border:4px solid #46C98D;
border-radius:10px;
margin:0 auto 5px;
}
}
#service{
clear:both;
}
#service h3{
font-size:110%;
color:#46C98D;
padding-bottom:0.5em;
}
#service ul{
padding-top:0.5em;
}
#service li{
display:inline-block;
padding-right:1.5em;
}
#service li:nth-of-type(3){
padding-right:0;
}
#service li dt{
font-weight:bold;
color:#46C98D;
}
#service li dd{
font-size:90%;
}
#service dd img{
width:31.5%;
height:auto;
padding-top:1em;
padding-right:10px;
}
#service dd img:nth-of-type(3){
padding-right:0;
}
@media screen and (max-width: 640px) {
#service dd img{
width:100%;
}
}
iframe {
margin:2em 0;
padding:0;
display:inline-block;
width:510px;
}
@media screen and (max-width: 640px) {
iframe {
width:100%;
margin:2em 0 0;
}
}
@media screen and (max-width:480px) {
iframe {
height:220px;
}
}