@charset "UTF-8";
/**
*
* @authors Your Name (you@example.org)
* @date    2016-12-10 16:57:22
* @version $Id$
*/

/*
purple #B1658B;
red #CA2420;
blue #326295;
orange #F89829;
*/

.socialblock{
	display: block;
	width: 900px;
	max-width: 100%;
	margin: 0 auto;

	background: #FFF;
}

.socialblock .title{
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 10px 5px;
	text-align: center;
	color: #FFF;
	letter-spacing: 0;
	font-size: 18px;

	background: #6eadc2;
}

.socialblock .title a.my-close-btn{
	position: absolute;
	display: inline-block;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	color: #FFF;
	text-decoration: none;
}

.socialblock .title a.my-close-btn:hover{
	color: #FFF;
	text-decoration: none;
}

.socialblock .group{
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	padding: 40px 0;
}

.socialblock .group .item{
	display: inline-block;
	text-align: center;
	max-width: 180px;
}

.socialblock .group .item a{
	display: inline-block;
	text-align: center;
	text-decoration: none;
}
.socialblock .group .item a:hover{
	text-decoration: none;
}

.socialblock .group .item a span.alias{
	display: inline-block;
	width: 100%;
	padding-bottom: 10px;
	color: #000;

	font-size: 18px;
	letter-spacing: 0;
}

.socialblock .group .item a .cover{
	display: inline-block;
	width: 100%;
}

.socialblock .group .item.fb a .cover{
	width: 132px;
}

.socialblock .group .item.line a .cover{
	width: 180px;
}

.socialblock .group .item a .cover img{
	width: 100%;
}


/*小於等於768*/
@media (max-width: 768px) {

	.container-sub.spec{
		padding: 0;
	}

	.kv .item .box {
	  aspect-ratio: 16 / 18;
	  overflow: hidden;
	  position: relative;
	}

	.socialblock{
		width: 340px;
	}

	.socialblock .title{
		padding: 5px;
		font-size: 14px;
	}

	.socialblock .group{
		padding: 10px 0;
		flex-wrap: wrap;
	}

	.socialblock .group .item{
		padding: 10px 0 0 0;
	}

	.socialblock .group .item a span.alias{
		font-size: 14px;
		padding-bottom: 5px;
	}

	.socialblock .group .item.fb a .cover{
		width: 80px;
	}

	.socialblock .group .item.line a .cover{
		width: 100px;
	}

}

/*小於等於575*/
/*mobile*/
@media (max-width: 575px) {

}

@media (max-width: 480px) {

	
}

/*小於等於414*/
@media (max-width: 414px) {
	
}

/*小於等於380*/
@media (max-width: 380px) {

}



/*小於等於350*/
@media (max-width: 350px) {

	.wrap{
		min-width: 350px;
	}
}