@charset "UTF-8";

html{
	font-size:62.5%;
}
body{
	font-family:'Roboto', sans-serif,'微軟正黑體';
	font-weight: normal;
	padding:15px;
	background-color: #f6f7fb;
	font-size:1.6rem;
	color:#333;

}
*, *::before, *::after {
  box-sizing: border-box;
}
a:link,a:visited,a:active{
	text-decoration: none;
}

.header{
	padding:25px 0;
	border-bottom: none;
	text-align: center;
}
.high5idea-logo{
	width: 136px;
	height: 136px;
	transition: -webkit-transform 0.3s;
	transition:transform 0.3s;
}
.high5idea-logo:hover{
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
.nav{
	margin:35px auto 10px;
}
.nav ul{
	list-style: none;
	padding-left: 0;	
}
.nav-item{
	margin-top:20px;
	text-align: center;
	letter-spacing: 1px;
	font-weight: bold;
	font-size:2.2rem;
	color:#88ABFF;
}
.nav-item a{
	display: inline-block;
	color:#88ABFF;
}
.nav-item a::after{
	content:"";
	display:block;
	width:0;
	margin:6px auto 0;
	border-bottom: 1px solid #88ABFF;
	transition: width 0.3s ease-in-out;
}
.nav-item a:hover::after{
	width:100%;
}

/* 各尺寸區塊設定 */
.item{
	width:180px;
	margin-bottom:4px;
	padding:8px;
	border-bottom: 3px solid;
	border-radius: 5px;
	background-color:#fff;
	border-color: #88ABFF;
}

.item-l{
	width:732px;
}

.item .description{
	margin:10px;
	line-height: 2rem;
	
}
.item .image{
	display:block;
	width:100%;
	margin-bottom: 10px;
	height: 109px;
}
.item-m .image{
	display:block;
	width:100%;
	margin-bottom: 10px;
	height: 180px;
}
.item-l .image{
	display:block;
	width:100%;
	margin-bottom: 10px;
	height:403px;
}
.item .subject0,
.item .subject1,.item .subject2,
.item .subject3,.item .subject4{
	margin:15px 9px 10px;
	color:#2E2E2E;
	letter-spacing: 1px;
	font-size:1.8rem;
	font-weight: bold;
}

/* subject icon放置區域 */
.item .subject0::before,
.item .subject1::before,
.item .subject2::before,
.item .subject3::before,
.item .subject4::before{
	content:'';
	display:inline-block;
	width:18px;
	height:18px;
	border:2px solid;
	border-radius: 50%;
	margin-right:5px;
	vertical-align: middle;
	top:-1px;
	position: relative;
}
.item > a{
	display:block;
	margin:-8px -8px -11px;
	padding:8px 8px 11px;
	border-radius: inherit;
	color:#777;
	transition: all 0.3s;
}
.item > a:hover{
	box-shadow: 0 0 6px -1px rgba(0,0,0,0.3);
	opacity:0.8;
}
/* 區塊顏色 */
.subject0, .item .subject0::before{
	border-color: #88ABFF;
}
.subject1, .item .subject1::before{
	border-color: #DFFCD7;
}
.subject2, .item .subject2::before{
	border-color: #FDE4C7;
}
.subject3, .item .subject3::before{
	border-color: #D3FAFE;
}
.subject4, .item .subject4::before{
	border-color: #FDCAFF;
}

/* Masonry fitWidth */
.grid {
  margin: 0 auto;
}
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-item {
  width: 320px;
  height:320px;
  float: left;
}
.grid-item--height2 { height:500px; }






/* smart phone setting */
/*ipad*/
@media (max-width: 1024px) {
  body {
    background-image: none;
  }
}
/*other smart device*/
@media (max-width: 768px) {


}