*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }


body {

	/*color: #333;*/ /*2016-12-14編輯*/

	font-family: Heiti TC, "微軟正黑體", "メイリオ", Microsoft JhengHei, Helvetica, Arial, sans-serif ; /*2016-12-14編輯*/

	/*font-weight: 300;*/ /*2016-12-14編輯*/

}

h1,

h1+p {

	margin: 30px 15px 0;

	font-weight: 300;

}

h1+p a {

	color: #333;

}

h1+p a:hover {

	text-decoration: none;

}

h2 {

	margin: 60px 15px 0;

	padding: 0;

	font-weight: 300;

}

h2 span {

	margin-left: 1em;

	color: #aaa;

	font-size: 85%;

}



.column {

	/*margin: 15px 15px 0;*/ /*2017-05-19編輯*/

	padding: 0;

}

.column:last-child {

	/*padding-bottom: 60px;*//*2016-11-23編輯*/

}

.column::after {

	content: '';

	clear: both;

	display: block;

}

.column div {

	position: relative;

	/*float: left;*/ /*2017-05-25編輯*/

	/*width: 300px;

	height: 200px;*/ /*2016-12-09編輯*/

	margin: 0 0 0 25px;

	padding: 0;

}

.column div:first-child {

	margin-left: 0;

}

.column div span {

	position: absolute;

	bottom: -20px;

	left: 0;

	z-index: -1;

	display: block;

	width: 300px;

	margin: 0;

	padding: 0;

	color: #444;

	font-size: 18px;

	text-decoration: none;

	text-align: center;

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

	opacity: 0;

}

figure {

	width: 100%;/*2017-05-05編輯*/
	max-width: 23em;/*2017-05-05編輯*/
	margin: 0 auto;/*2017-05-05編輯*/
	display:block;/*2017-05-05編輯*/

	margin: 0;

	padding: 0;

	background: #fff;

	overflow: hidden;

}

figure:hover+span {

	bottom: -36px;

	opacity: 1;

}







/* Zoom In #1 */

.hover01 figure {

	background: #000000;/*2016-12-13編輯*/

	background-image:url(../images/zoomout.png);/*2016-12-13編輯*/

	background-repeat:no-repeat;/*2016-12-13編輯*/

	background-position:center center;/*2016-12-13編輯*/

}

/*2016-12-15編輯*/

.hover01 figure img {

	opacity: 1;/*2016-12-13編輯*/

	-webkit-transform: scale(1); 

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    -o-transform: scale(1);

    transform: scale(1);

	-webkit-transition: .3s ease-in-out;

    -moz-transition: .3s ease-in-out;

    -ms-transition: .3s ease-in-out;

    -o-transition: .3s ease-in-out;

    transition: .3s ease-in-out;

}

/*2016-12-15編輯*/

.hover01 figure:hover img {

	opacity: .5; /*2016-12-13編輯*/

	-webkit-transform: scale(1.3);

    -moz-transform: scale(1.3);

    -ms-transform: scale(1.3);

    -o-transform: scale(1.3);

    transform: scale(1.3);

}





/* Zoom In #2 */

.hover02 figure img {

	width: 300px;

	height: auto;

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.hover02 figure:hover img {

	width: 350px;

}



/* Zoom Out #1 */

.hover03 figure img {

	-webkit-transform: scale(1.5);

	transform: scale(1.5);

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.hover03 figure:hover img {

	-webkit-transform: scale(1);

	transform: scale(1);

}



/* Zoom Out #2 */

.hover04 figure img {

	width: 400px;

	height: auto;

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.hover04 figure:hover img {

	width: 300px;

}



/* Slide */

.hover05 figure img {

	margin-left: 30px;

	-webkit-transform: scale(1.5);

	transform: scale(1.5);

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.hover05 figure:hover img {

	margin-left: 0;

}



/* Rotate */

.hover06 figure img {

	-webkit-transform: rotate(15deg) scale(1.4);

	transform: rotate(15deg) scale(1.4);

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.hover06 figure:hover img {

	-webkit-transform: rotate(0) scale(1);

	transform: rotate(0) scale(1);

}



/* Blur */

.hover07 figure img {

	-webkit-filter: blur(3px);

	filter: blur(3px);

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.hover07 figure:hover img {

	-webkit-filter: blur(0);

	filter: blur(0);

}



/* Gray Scale */

.hover08 figure img {

	-webkit-filter: grayscale(100%);

	filter: grayscale(100%);

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.hover08 figure:hover img {

	-webkit-filter: grayscale(0);

	filter: grayscale(0);

}



/* Sepia */

.hover09 figure img {

	-webkit-filter: sepia(100%);

	filter: sepia(100%);

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.hover09 figure:hover img {

	-webkit-filter: sepia(0);

	filter: sepia(0);

}



/* Blur + Gray Scale */

.hover10 figure img {

	-webkit-filter: grayscale(0) blur(0);

	filter: grayscale(0) blur(0);

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.hover10 figure:hover img {

	-webkit-filter: grayscale(100%) blur(3px);

	filter: grayscale(100%) blur(3px);

}



/* Opacity #1 */

.hover11 figure img {

	opacity: 1;

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.hover11 figure:hover img {

	opacity: .5;

}



/* Opacity #2 */

.hover12 figure {

	background: #1abc9c;

}

.hover12 figure img {

	opacity: 1;

	-webkit-transition: .3s ease-in-out;

	transition: .3s ease-in-out;

}

.hover12 figure:hover img {

	opacity: .5;

}



/* Flashing */

.hover13 figure:hover img {

	opacity: 1;

	-webkit-animation: flash 1.5s;

	animation: flash 1.5s;

}

@-webkit-keyframes flash {

	0% {

		opacity: .4;

	}

	100% {

		opacity: 1;

	}

}

@keyframes flash {

	0% {

		opacity: .4;

	}

	100% {

		opacity: 1;

	}

}



/* Shine */

.hover14 figure {

	position: relative;

}

.hover14 figure::before {

	position: absolute;

	top: 0;

	left: -75%;

	z-index: 2;

	display: block;

	content: '';

	width: 50%;

	height: 100%;

	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);

	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);

	-webkit-transform: skewX(-25deg);

	transform: skewX(-25deg);

}

.hover14 figure:hover::before {

	-webkit-animation: shine .75s;

	animation: shine .75s;

}

@-webkit-keyframes shine {

	100% {

		left: 125%;

	}

}

@keyframes shine {

	100% {

		left: 125%;

	}

}



/* Circle */

.hover15 figure {

	position: relative;

}

.hover15 figure::before {

	position: absolute;

	top: 50%;

	left: 50%;

	z-index: 2;

	display: block;

	content: '';

	width: 0;

	height: 0;

	background: rgba(255,255,255,.2);

	border-radius: 100%;

	-webkit-transform: translate(-50%, -50%);

	transform: translate(-50%, -50%);

	opacity: 0;

}

.hover15 figure:hover::before {

	-webkit-animation: circle .75s;

	animation: circle .75s;

}

@-webkit-keyframes circle {

	0% {

		opacity: 1;

	}

	40% {

		opacity: 1;

	}

	100% {

		width: 200%;

		height: 200%;

		opacity: 0;

	}

}

@keyframes circle {

	0% {

		opacity: 1;

	}

	40% {

		opacity: 1;

	}

	100% {

		width: 200%;

		height: 200%;

		opacity: 0;

	}

}



/*2017-05-19編輯*/
@media (max-width: 1366px){
figure {
	/*max-width: 17em;*/
	max-width: 23em;
}
}


/*2017-05-24編輯*/
@media (max-width: 1280px){
figure {
	max-width: 23em;
}
}




@media (max-width: 1024px){
figure {
	max-width: 23em;/*2017-05-05編輯*/
}
}