@charset "UTF-8";
/* 裝飾/特效 */#gotop {
	display    : none;
	position   : fixed;
	bottom     : 100px;
	right      : 30px;
	width      : 50px;
	height     : 50px;
	cursor     : pointer;
	font-size  : 50px;
	line-height: 45px;
	color      : #e61d6a;
}

.line-top,
.line-right,
.line-left,
.line-bottom {
	position: fixed;
	z-index : 99999;
}

.line-top {
	width            : 100%;
	height           : 15px;
	top              : 0;
	left             : 0;
	background-image : url(../images/line-top.png);
	background-repeat: repeat-x;
}

.line-bottom {
	width            : 100%;
	height           : 15px;
	bottom           : 0;
	left             : 0;
	background-image : url(../images/line-bottom.png);
	background-repeat: repeat-x;
}

.line-left {
	width            : 15px;
	height           : 100vh;
	top              : 0;
	left             : 0;
	background-image : url(../images/line-left.png);
	background-repeat: repeat-y;
}

.line-right {
	width            : 15px;
	height           : 100vh;
	top              : 0;
	right            : 0;
	background-image : url(../images/line-right.png);
	background-repeat: repeat-y;
}
/* /////滑鼠 follow-cursor///// */
#main-cursor {
	background-color: #e61d6a;
	height          : 10px;
	width           : 10px;
	border-radius   : 50%;
	pointer-events  : none;
	position        : absolute;
	z-index         : 9999;
}

#follow-cursor {
	border        : 2px solid #e61d6a8e;
	height        : 30px;
	width         : 30px;
	border-radius : 50%;
	transition    : all 0.05s ease, left 0.1s linear, top 0.1s linear;
	pointer-events: none;
	position      : absolute;
	z-index       : 9999;
}

#follow-cursor.is-active {
	transform       : scale(2);
	mix-blend-mode  : difference;
	background-color: #001eff;
	/* #001eff */
}

/* end */

/* 格線 Grid of lines follow cursor*/
.row {
	display: flex;
	width  : 80%;
	height : 20%;
	margin : 0 auto;
}

.row .line,
.row .round {
	width  : 10%;
	height : 100%;
	display: flex;
}

.row .line span {
	width        : 1.5vw;
	height       : 10vh;
	border-radius: 1vw;
	background   : #888;
	margin       : auto;
}

.row .round span {
	width        : 3vw;
	height       : 7vh;
	border-radius: 8vw;
	background   : #e61d6a;
	margin       : auto;
}

/* end */

/* scroll mouse */
@-webkit-keyframes ani-mouse {
	0% {
		opacity: 1;
		top    : 29%;
	}

	15% {
		opacity: 1;
		top    : 50%;
	}

	50% {
		opacity: 0;
		top    : 50%;
	}

	100% {
		opacity: 0;
		top    : 29%;
	}
}

@-moz-keyframes ani-mouse {
	0% {
		opacity: 1;
		top    : 29%;
	}

	15% {
		opacity: 1;
		top    : 50%;
	}

	50% {
		opacity: 0;
		top    : 50%;
	}

	100% {
		opacity: 0;
		top    : 29%;
	}
}

@keyframes ani-mouse {
	0% {
		opacity: 1;
		top    : 29%;
	}

	15% {
		opacity: 1;
		top    : 50%;
	}

	50% {
		opacity: 0;
		top    : 50%;
	}

	100% {
		opacity: 0;
		top    : 29%;
	}
}

.scroll-btn {
	display   : block;
	position  : absolute;
	left      : 0;
	right     : 0;
	bottom    : 30px;
	text-align: center;
}

.scroll-btn>* {
	width         : 100%;
	display       : inline-block;
	line-height   : 18px;
	font-size     : 13px;
	font-weight   : normal;
	color         : #e61d6a;
	font-family   : "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 2px;
}

.scroll-btn>*:hover,
.scroll-btn>*:focus,
.scroll-btn>*.active {
	color: #e61d6a;
}

.scroll-btn>*:hover,
.scroll-btn>*:focus,
.scroll-btn>*:active,
.scroll-btn>*.active {
	opacity: 0.8;
	filter : alpha(opacity=80);
}

.scroll-btn .mouse {
	position          : relative;
	display           : block;
	width             : 35px;
	height            : 55px;
	margin            : 0 auto 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing   : border-box;
	box-sizing        : border-box;
	border            : 3px solid #e61d6a;
	border-radius     : 23px;
}

.scroll-btn .mouse>* {
	position         : absolute;
	display          : block;
	top              : 29%;
	left             : 50%;
	width            : 8px;
	height           : 8px;
	margin           : -4px 0 0 -4px;
	background       : #e61d6a;
	border-radius    : 50%;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation   : ani-mouse 2.5s linear infinite;
	animation        : ani-mouse 2.5s linear infinite;
}
/* -----effect-underline----- */
a.effect-underline:after {
	content           : '';
	position          : absolute;
	left              : 0;
	display           : inline-block;
	width             : 100%;
	border-bottom     : 1px solid #e61d6a;
	padding-top       : .5em;
	margin-top        : 10px;
	opacity           : 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition        : opacity 0.35s, transform 0.35s;
	-webkit-transform : scale(0, 1);
	transform         : scale(0, 1);
}

a.effect-underline:hover:after {
	opacity          : 1;
	-webkit-transform: scale(1);
	transform        : scale(1);
}