@charset"UTF-8";
/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
body {
   background: linear-gradient(to bottom, #dda0dd, #7b68ee); 
  margin:0 auto;
	width:960px;
	font-family: Zen Maru Gothic;
  color: rebeccapurple; 
}

.header{
	height: 300px;
}

.flex-container{
  flex-basis: 100%;
	height: 300px;
  margin: 0px auto;
  border: 5px solid #eee;
  display: inline-flex;
justify-content: center;
}  

.text{
	  position: absolute;
}
.item{
 overflow:hidden;
 display: inline-block;
 
	flex-shrink:0;
		position: relative;
	left: -100px;
}

.run{
  height: 20px;
  color: red;
	font-size: 1cm;
}
.run{
	flex-basis: 100% auto;
	height:50px;
	background-color: pink;	
	overflow: hidden; 
	position: relative;
	top: 10px;
}



.content
{ width :60%;
 float: left;
}

.sidebar1{
  background-color: pink;
  float: left;
  width: 20%;
  height: 1050px;
  font-family: "berkshire-swash";
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	
}

.sidebar1 li a{ /*超連結文字樣式*/
	color:#BF0060;/*文字顏色*/
	font-size:15px;/*文字大小*/
	text-decoration:none;/*不要超連結底線*/
	border-bottom:#91a06b 1px dashed;/*底線樣式 顏色 寬度 虛線樣式*/
	display:block;/*設定區塊*/
	padding:10px 0 5px 0; /*邊界 上右下左*/
	
}

.sidebar2{
  background-color: pink;
  width: 20%;
  height: 1050px;
  float:right;
  font-family: "berkshire-swash";
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	clear: both ; 
}

.sidebar2 li a	{
	width:200px;/*寬度*/
	height:40px;/*高度*/
	line-height:32px;/*行高*/
	color:	#460046	;
	background-color:#FF60AF;/*背景顏色*/
	text-decoration:none;
	text-align:center;/*文字置中對齊*/
}



 
.container li{
  text-align: center;
  padding: 15px;
  color: #333;
  width: 100px;
  list-style: none;
}

 .news{
	width:95%;
	height: 150px;
	background: darkgreen;
	 color: white;
	 font-family: "fascinate";
	overflow: scroll;
	display: inline-block;
    padding: 15px;
	align:center; 
    }

.newspic{position: absolute;}

.footer{
  background-color:pink;
	
	width: 100%;
	height : 50px;
	padding: 10px; 
  clear:both;
	position: relative;
		top:-220px
		
}


.box{
	display: inline-block;
	width:280px;
	background-color:hotpink;
	height: 300px ;
	overflow: scroll;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    scrollbar-gutter: stable;}


.box2{
	flex-basis:20%;
	background-color:hotpink;
	height: 200px ;
	overflow: hidden;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    scrollbar-gutter: stable;}

.areaboxes
{position: relative;
		top:-220px
		}

.pic{
	position: relative;
		top:10px;
		right:5px
		}
article{
    color:black;
	line-height :15px;
	position: relative;
top:-450px;
right:-30px}

h1 {
  text-align: center;
}

ul{ 
	list-style:none;
}

p
{line-height: 5px;}

@media (min-width: 960px){
}