@charset "utf-8";

*{
	margin:0;
	padding:0;
	}

body{
	font-family:Verdana, Geneva, sans-serif;
	}	

ul{
	list-style:none;
	}
	
header{
	background-color:#333;
	}
	
header h1{
	padding:5px 10px;
	color:#fff;
	font-size:18px;
	}

#wrap{
	padding:10px;
	}

nav{
	margin:20px 0;
	}

.pan{
	display:flex;
	font-size:15px;
	}

.pan a{
	text-decoration:none;
	color:#000;
	}
	
section h1{
	padding:5px 0;
	border-bottom: solid 3px #ffc778;
	position: relative;
	font-size:22px;
	}
	
section h1:after {
	position:absolute;
	content:" ";
	display:block;
	border-bottom:solid 3px #003;
	bottom:-3px;
	width:30%;
}

section h2{
	margin-top:15px;
	padding:5px 0;
	width:70%;
	border-bottom:solid 3px #ffc778;
	position:relative;
	font-size:20px;
	}

section p{
	margin-top:15px;
	font-size:16px;
	}
	
section h2:after {
	position:absolute;
	content:" ";
	display:block;
	border-bottom:solid 3px #003;
	bottom:-3px;
	width:30%;
}

	
.right ul li a{
	display:block;
	text-decoration:none;
	color:#fff;
	text-align:center;
	background-color:#CCC;
	}
	

.right ul .view a{
	background-color:#333;
	}
	
.right ul li a:hover{
	background:#333;
	}
	
dl{
	margin-top:25px;
	}

dt a{
	text-decoration:none;
	color:#000;
	}

dt{
	padding:3px 5px;
	width:60%;
	border-left:8px double #ffc778;
	border-bottom:1px solid #003;
	}

dd{
	margin:15px;
	}
	
footer{
	padding:15px;
	margin-top:60px;
	text-align:center;
	background-color:#333;
	font-size:20px;
	color:#fff;
	}


@media screen and (min-width:769px){
	
	#wrap{
		margin:0 auto;
		width:1020px;
		}
		
	.flexflex {
      display: -webkit-flex;
      display: flex;
    }
	
	.right ul li a{
		width:250px;
		margin:0 30px 10px 30px;
		padding:18px 0;
		border-radius:20px;
		}
	
 	 .left {
  }

}



@media screen and (max-width:768px){

	aside{
		margin-top:30px;
		}
	
	.right ul li a{
		padding:5px 0;
		margin-bottom:8px;
		border-radius:10px;
			}
	
	
}

@media screen and (max-width:420px){
	
	dt{
		width:100%;
		}
}