@charset "utf-8";
/***************************************
    copyright by MakeWeb.com.tw 
***************************************/

#side1 {
	display: block;
	float: left;
	width: 20%;
	min-height: 500px;
}

#side2 {
	float: right;
	width: 78%;
	min-height: 500px;
}


/*-------------------------------------------------
 port-filter
--------------------------------------------------*/

.port-filter ul {
	display: table;
	margin: 0px auto;
	padding: 0; 
	list-style: none;
	/*border: 1px solid #f00;*/
}

.port-filter ul li {
	overflow: hidden;
	display: inline-block; 
	position: relative;
	padding: 14px 6px;
}
.port-filter ul li a {
	position: relative;
	padding: 6px 16px;
	transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-webkit-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
	border-radius: 6px;
	color: #FFF; 
	background: #333;
}
.port-filter ul li a:hover, .port-filter ul li a:focus, .port-filter ul li a.current {
	text-decoration: none;
	background: #FF0031;
	color: #FFF; 
}
.port-filter ul li a:after {
	content: '';
	position: absolute;
	border-style: solid;
	border-width:  8px 8px 0px 8px;
	border-color: #333 transparent transparent transparent; 
	display: block;
	width: 0;
	height: 0;
	bottom: -8px;
	left: calc( 50% - 8px );

	transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-webkit-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
}
.port-filter ul li a:hover:after, .port-filter ul li a:focus:after, .port-filter ul li a.current:after {
	border-color: #FF0031 transparent;
}



/*-------------------------------------------------
 list_vert
--------------------------------------------------*/
.list_vert ul{
	overflow: hidden;
	margin:0;
	padding:0;
	list-style:none;
}
.list_vert li {
	display: block;
}


.list_vert .more {
	display: block;
	/*text-align: right;*/
	float: right;
	margin: -30px 0 0 0;
	/*border:1px solid #00F;*/
}
.list_vert li .list_tilelist h2{
	color: #333;
}
.list_vert li .list_tilelist {
	margin: 10px 0;
	padding:0;
	color:#325895;
}
.list_vert li .list_tilelist ul {
	margin: 40px 0;
	/*border-bottom:2px solid #EEE;*/
}
.list_vert li .list_tilelist ul > div {
	overflow: hidden;
	width: 234px;
	/*height:254px;*/
	margin: 10px 24px;
	padding: 4px;
	/*border: 1px solid #CCC;*/
}
.list_vert li .list_tilelist ul > div a:hover {
	color:#333;
}
.list_vert li .list_tilelist ul > div .item_image{
	margin: 0px 0px;
	text-align: center;
	max-width: 226px;
	min-height: 226px;
	box-shadow: 0px 0px 5px 2px #DDD;
	/*border: 1px solid #CCC;*/
}
.list_vert li .list_tilelist ul > div .item_image img{
	display: block;
	max-width: 226px;
	max-height: 226px;
	/*width: 80%*/
}
.list_vert li .list_tilelist ul > div h4{
	margin: 10px 0 0 0;
	padding: 0;
	/*font-size: 1.6rem;*/
	text-align: center;
}
.list_vert li .list_tilelist ul > div .item_pic{
	overflow: hidden;
	padding: 4px;
	/*height: 20px;*/
	text-align: center;
}
.list_vert li .list_tilelist ul > div .item_pic img{
	height: 18px;
}
.list_vert li .list_tilelist ul > div .spicy_title{
	color: red;
}
.list_vert li .list_tilelist ul > div .item_description{
	/*font-size: 1.5rem;*/
	text-align: center;
}


/*iPhoe*/
@media screen and (max-width: 760px) {

	.list_vert li .list_tilelist ul > div {
		overflow: hidden;
		width: 44%;
		/*height:254px;*/
		margin: 10px 6px;
		padding: 4px;
		/*border: 1px solid #CCC;*/
	}
	.list_vert li .list_tilelist ul > div .item_image{
		/*position: relative;
		width: 10%;
		height: 0;
		padding-bottom: 10%;*/
		height:200px;
		min-height: 200px;
	}
	.list_vert li .list_tilelist ul > div .item_image img{
		width: 100%;
		/*max-height: 226px;*/
	}
	.list_vert li .list_tilelist ul > div h4{
		/*margin: 10px 0 0 0;*/
		/*padding: 0;*/
		height: 48px;
		font-size: 1.5rem;
		/*text-align: center;*/

	}
	.list_vert li .list_tilelist ul > div .item_description{
		font-size: 1.5rem;
		/*text-align: center;*/
	}

}