@charset "utf-8";
/* CSS Document */
*{ 
	box-sizing: border-box;
	border:0;
	font: 14px Arial, Helvetica, sans-serif;
	line-height:22px;
	margin:0;
	padding:0;
	outline:0;
}
a{transition: all 0.3s ease-in-out 0s;}

address,caption,cite,code,dfn,em,th,var {font-weight: normal;font-style: normal;}
a,a:hover,img,div,input,background,li{text-decoration: none;outline: none; list-style:none; /* for Firefox */border:none;
hlbr:expression(this.onFocus=this.blur()); /* for IE */}

img { max-width:100%; height:auto;}

body { background:url(../images/bg1.jpg) center top repeat-x #FFFFFF; margin:0 auto; padding:0; border-top:3px solid #352472;}
#wrapper { margin:0 auto; width:960px;}



aside { width:20%; float:left;}
#idx-aside {
	background-image: linear-gradient(180deg,#FFF,#BCBCBC);
    border: 1px solid #BCBCBC;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    display: block;
    width: 200px;
    text-align: center;
    padding: 8px 0;
	}
.animate{
	width: 200px;
    background: #FFF;
    border: 1px solid #BCBCBC;
	border-bottom: none;
	}
.animate li a {
	display: block;
    padding: 5px 6px 5px 20px;
    border-bottom: 1px solid #999;
	color: #000;
    line-height: 15px;
	}
.animate li a:hover, .animate li a.cureen { background-color:#000; color:#FFF;}

section {width:77%; float:right;}
#idx-right {  background:url(../images/idx-rightbg.jpg) center 42px no-repeat #FFF;    text-align: center;    border-left: 1px solid #BCBCBC; border-right: 1px solid #BCBCBC;}
#idx-right pre {    background-image: linear-gradient(180deg,#FFF,#BCBCBC); border: 1px solid #BCBCBC; height: 42px; margin-bottom: 164px;}
#idx-right a { display:inline-block; width:calc(95% / 3);    margin-bottom: 30px;    vertical-align: top;}
#idx-right a img {        border: 1px solid #a2a2a2;}
#idx-right a p {    color: #e17a2f; font-weight: bold;}

article { clear:both; display:block; background-color:#CCCCCC; padding: 20px 5px 20px 25px;}
article .about {    width: 65%;  display: inline-block; border-right: 1px solid #000; margin-right: 5px;}
article .about img {float: left;  margin: 10px 10px 16px 0px;}
article .about p {line-height: 15px; margin: 10px 0;}
h1 {    color: #352474; font-size: 14px; line-height: 15px;}
article .news {width: 33%; display: inline-block; vertical-align: top;}
article .news p span {    color: #ff0000;    display: block;}
article .news p {    line-height: 15px; color:#000;}
h2 {color: #ff0000; font-size: 14px;}


@media screen and (max-width: 960px){
	#wrapper { margin:0 auto; width:100%;}

}

@media screen and (max-width: 760px){
	aside { width:100%;}
	#idx-aside { width:97%; border-radius: 10px; margin: 0 auto;}
	#idx-aside:focus + ul, .animate:hover{
			max-height: 1000px;
			/*display: block;*/
			visibility: visible;
		}

	.animate{
			-webkit-transition: 1s ease;
			-ms-transition: 1s ease;
			transition: 1s ease;
			overflow: hidden;
			max-height: 0;
			/*display: none;*/
			visibility: hidden;
			width: 97%;
    		margin: 0 auto;
		}
	.animate li a { text-align:center; font-size: large; padding: 10px;}
	section { width:100%;}
	#idx-right {width: 97%; margin: 10px auto 0; background-size: contain;}
	#idx-right pre {    margin-bottom: 100px;}
}

@media screen and (max-width: 560px){
	#idx-right a { width:100%;}
	article {    padding: 15px;}
	article .about {width: 100%; border-right: none;}
	article .news {width: 100%;    margin-top: 10px;}
	article .news p {    border-bottom: 1px solid #2D1A6F;}
	
}

@media screen and (max-width: 360px){
	article .about img {    width: 90%; float: none; margin: 0 auto; /*display: block;*/}
	h1 {    margin: 10px 0; font-size: large;}
	h2 {font-size: large;}
}