@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;400;700&family=Noto+Sans+TC:wght@100;400;700&display=swap');

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin        : 0;
	padding       : 0;
	border        : 0;
	font-size     : 100%;
	font          : inherit;
	vertical-align: baseline;
	box-sizing    : border-box;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1;
	margin     : 0 auto;
	/* border  : solid 10px #e61d6a ; */
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing : 0;
}

/* /////eric reset end///// */

body {
	font-family     : 'Josefin Sans', Helvetica, Arial, "黑體-繁", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
	background-color: #fafafa;
}

img {
	display: block;
	width  : 100%;
}

.c-line {
	background-color: #b1a2a7;
	height          : 1px;
}

header {
	position        : fixed;
	top             : 0;
	left            : 0;
	z-index         : 999;
	height          : 115px;
	color           : #e61d6a;
	padding         : 10px 40px;
	margin          : 10px;
	background-color: #fafafad2;
}

#header {
	width          : calc(100% - 80px);
	position       : absolute;
	bottom         : 0;
	display        : flex;
	justify-content: space-between;
	align-items    : center;
}

#header-wrap {
	width   : 100%;
	position: fixed;
}

header .logo {
	display: flex;
	z-index: 99999;
	color  : #e61d6a;
}

header h1 {
	width       : 50px;
	margin-right: 1.5rem;
}

header .name {
	margin-top    : 5px;
	letter-spacing: .2rem;
}

header .name h2 {
	font-size    : 1.4rem;
	margin-bottom: 5px;
}

@media only screen and (max-width:1335px) {
	header .name h2 {
		font-size: 1.2rem;
	}
}

header .name h2 span {
	font-size: 1rem;
}

@media only screen and (max-width:767px) {
	header .name {
		display: none;
	}
}

@media only screen and (min-width:768px) {
	header .name {
		display: block;
	}
}

/* -----nav----- */
header nav {
	display: flex;
}

header nav ul {
	display    : flex;
	align-items: center;
}

header nav li {
	display: block;
}

header a {
	display        : block;
	text-decoration: none;
}

header .menu a {
	margin-left   : 1.8rem;
	padding-top   : 5px;
	color         : #e61d6a;
	letter-spacing: .1rem;
}

@media only screen and (max-width:1335px) {
	header .menu a {
		margin-left: 1.5rem;
	}
}

header .icon {
	z-index: 99999;
}

header .icon a {
	width      : 35px;
	height     : 35px;
	margin-left: 1rem;
}

@media only screen and (max-width:991px) {

	header .menu,
	header .icon {
		display: none;
	}
}

@media only screen and (min-width:992) {

	header .menu,
	header .icon {
		display: block;
	}
}

@media only screen and (max-width:1335px) {
	header .icon a {
		margin-left: .7rem;
	}
}

header .contact {
	z-index         : 99999;
	display         : block;
	padding         : 10px 10px 8px;
	background-color: #e61d6a;
	color           : whitesmoke;
	border-radius   : 20px;
	margin          : 0 2rem;
	border          : solid 1px transparent;
}

@media only screen and (max-width:1335px) {
	header .contact {
		margin: 0 1.5rem;
	}
}

header .contact:hover {
	border          : solid 1px #e61d6a;
	background-color: whitesmoke;
	color           : #e61d6a;
}

.navTrigger__wrap {
	position: fixed;
	z-index : 3000;
	top     : 80px;
	right   : 5vw;
	width   : 31.63px;
	height  : 17.91px;
}

/* -----漢堡按鈕----- */
.btn_h {
	z-index            : 99999;
	position           : relative;
	width              : 30px;
	height             : 30px;
	margin-right        : 50px;
	margin-left        : 50px;
	transition-duration: 0.5s;
}
.btn_h a{
	width: 30px;
	height: 30px;
}
.btn_h .icon_h {
	transition-duration: 0.5s;
	position           : absolute;
	height             : 5px;
	width              : 30px;
	top                : 15px;
	right              : 0;
	background-color   : #e61d6a;
}

.btn_h .icon_h:before {
	transition-duration: 0.5s;
	position           : absolute;
	width              : 30px;
	height             : 5px;
	background-color   : #e61d6a;
	content            : "";
	top                : -10px;
}

.btn_h .icon_h:after {
	transition-duration: 0.5s;
	position           : absolute;
	width              : 30px;
	height             : 5px;
	background-color   : #e61d6a;
	content            : "";
	top                : 10px;
}

.btn_h.open .icon_h {
	transition-duration: 0.5s;
	background         : transparent;
}

.btn_h.open .icon_h:before {
	transform: rotateZ(45deg) scaleX(1.25) translate(8px, 8px);
}

.btn_h.open .icon_h:after {
	transform: rotateZ(-45deg) scaleX(1.25) translate(5px, -5px);
}

.btn_h:hover {
	cursor: pointer;
}

/* -----sitemap----- */
.sitemap_box {
	display: none;
}

.sitemap {
	z-index         : 88888;
	position        : absolute;
	top             : 0;
	left            : 0;
	width           : 100%;
	height          : 100vh;
	background-color: #fafafa;
	display         : flex;
	justify-content : center;
	align-items     : center;
}

.sitemap ul {
	display    : flex;
	align-items: flex-start;
}

.sitemap li {
	flex    : 1;
	margin  : 20px;
	position: relative;
}

.sitemap-title {
	font-size     : 1.2em;
	color         : #e61d6a;
	border-bottom : solid 2px #e61d6a;
	padding-bottom: 15px;
	margin-bottom : 25px;
}

.sitemap-title span {
	font-size: .7em;
	color    : #f59bbd;
}

.sitemap-item {
	font-size: .9em;
	color    : #666;
	margin   : 20px 10px;
}


@media only screen and (max-width:991px) {
	.sitemap ul {
		flex-direction: column;
		width         : 80%;
		height        : calc(100vh - 160px);
		align-items   : center;
		overflow      : auto;
		margin        : 125px 0 35px;
	}

	.sitemap li {
		width : 50%;
		margin: 0;
	}

	.sitemap a {
		margin: 0;
	}

	.sitemap-item {
		display: none;
	}
}

@media only screen and (min-width:768px) {
	.sitemap ul {
		width: 90%;
	}
}

@media only screen and (min-width:992px) {
	.sitemap ul {
		width: 80%;
	}
}

/* -----main----- */
main {
	padding       : 120px 20px 0;
	display       : flex;
	flex-direction: column;
	align-items   : center;
	color         : #888;
}

a {
	color: inherit;
}

/* -----banner----- */
.banner {
	width : 100%;
	height: calc(100vh - 115px);
	cursor: none;
	color : #e61d6aba;
}

.banner-line {
	position      : relative;
	height        : calc(100vh - 135px);
	display       : flex;
	flex-direction: column;
	align-content : space-around;
}

/* -----CONTACT btn----- */
#contact {
	display         : flex;
	background-color: #e61d6a;
}

#contact .page_title {
	color     : white;
	text-align: center;
}

/* -----FOOTER----- */
footer {
	width : 95%;
	margin: 50px auto 0;
}

footer small {
	font-size : .8em;
	display   : block;
	color     : #e61d6a;
	text-align: right;
	padding   : 40px;
}



/* -----WORKS Page----- */
.work_box {
	width          : 95%;
	display        : flex;
	justify-content: flex-end;
}

.work_inner {
	width   : 15%;
	position: fixed;
	top     : 150px;
	left    : 50px;
}

.work_nav li {
	display: block;
	margin : 10px 0;
}

.work_nav a {
	display        : block;
	font-size      : 1.2rem;
	text-decoration: none;
}
.work_nav a:hover{
	color: #e61d6a;
}
.work_nav a sup {
	font-size  : .8rem;
	margin-left: 5px;
}

.work_about {
	display       : flex;
	flex-direction: row;
	margin-bottom : 50px;
}

.work_about .page_title,
.work_about .page_desc {
	writing-mode: vertical-rl;
}

.work_about .tw {
	font-weight   : 400;
	font-size     : .9rem;
	margin-bottom : 1.4em;
	letter-spacing: .1em;
}

.work_about .en {
	font-family   : 'Josefin Sans', sans-serif;
	font-weight   : 600;
	font-size     : 2.6rem;
	letter-spacing: .05em;
}

.work_about .page_desc {
	margin-left   : 1rem;
	line-height   : 1.4rem;
	letter-spacing: .2rem;
}

.ver_more {
	color         : lightcoral;
	margin-top    : 50px;
	font-size     : .8rem;
	writing-mode  : vertical-rl;
	letter-spacing: .1rem;
}

/* -----WORKS Page----- */
.gobock_box {
	display        : flex;
	position       : relative;
	width          : 100px;
	margin-bottom  : 50px;
	font-family    : 'Josefin Sans', sans-serif;
	color          : #e61d6a;
	text-decoration: none;
	transition     : width 1s;
}

.gobock_box:hover {
	width: 200px;
}

.gobock_box .prev {
	font-weight: bold;
}

.gobock_box .prev::before {
	content   : "";
	position  : absolute;
	top       : 13px;
	left      : 0;
	border-top: solid 1px #e61d6a;
	width     : 50%;
}

.gobock_box .gobock {
	margin-top : -2px;
	margin-left: 35px;
	font-weight: lighter;
}

.work_content {
	display       : flex;
	flex-direction: column;
	align-items   : center;
	width         : 75%;
}

.mac_box {
	display       : flex;
	flex-direction: column;
	align-items   : center;
	width         : 85%;
}

.mac_t {
	border-radius   : 30px;
	border          : solid 1px #ddd;
	background-color: #eee;
	padding         : 30px 20px 35px;
}
.mac_b{
	width: 250px;
}
.macvideo {
	width: 100%;
}

.work_content figure {
	display: flex;
	padding-top: 80px;
}

.works_list {
	width: 80%;
}

/* 瀑布流waterfall */
.grid-item {
	position: absolute;
	width   : 32%;
	padding : 0 50px 25px;
}

.grid-item a {
	display        : flex;
	justify-content: center;
	align-items    : flex-start;
}

.grid-item h2 {
	white-space  : nowrap;
	padding      : 0 5px;
	border-bottom: solid 1px #e61d6a;
	letter-spacing: .1rem;
	transition   : color .25s ,font-size .2s;
}
@media only screen and (max-width:1600px) {
	.grid-item h2 {
		transform    : rotate(90deg) translateX(55%) translateY(-900%);
	}
}
@media only screen and (min-width:1601px) {
	.grid-item h2 {
		transform    : rotate(90deg) translateX(55%) translateY(-1050%);
	}
}
@media only screen and (min-width:1800px) {
	.grid-item h2 {
		transform    : rotate(90deg) translateX(55%) translateY(-1130%);
	}
}
@media only screen and (min-width:1900px) {
	.grid-item h2 {
		transform    : rotate(90deg) translateX(55%) translateY(-1200%);
	}
}
@media only screen and (min-width:2000px) {
	.grid-item h2 {
		transform    : rotate(90deg) translateX(55%) translateY(-1300%);
	}
}
@media only screen and (min-width:2200px) {
	.grid-item h2 {
		transform    : rotate(90deg) translateX(55%) translateY(-1500%);
	}
}
@media only screen and (min-width:2300px) {
	.grid-item h2 {
		transform    : rotate(90deg) translateX(55%) translateY(-1600%);
	}
}
.grid-item:hover h2 {
	color      : #e61d6a;
	font-size  : 1.05rem;
}

.grid-item h2 span {
	margin-left: 10px;
}

.grid-item img {
	display   : block;
	height    : auto;
	width     : 100%;
	padding: 0 0 0 10px;
	border-left: solid 1px transparent;
	transition: border-left .2s,width .25s;
}

.grid-item img:hover {
	width  : 103%;
	opacity: .85;
	border-left: solid 1px #e61d6a;
}

/* -----CONTACT Page----- */
.contact_box {
	width    : 70%;
	max-width: 1400px;
	margin   : 0 auto;
}

.contact_inner {
	padding: 50px;
}

.contact_box .page_title {
	display       : flex;
	flex-direction: column;
	margin-bottom : 70px;
}

.contact_box .tw {
	font-weight   : 400;
	font-size     : .9rem;
	margin-bottom : 1.4em;
	letter-spacing: .1em;
}

.contact_box .en {
	font-family   : 'Josefin Sans', sans-serif;
	font-weight   : 600;
	font-size     : 2.6rem;
	letter-spacing: .05em;
}

.contact_box .page_desc {
	font-size     : 1rem;
	letter-spacing: .15em;
	line-height   : 2em;
	margin-bottom : 50px;
}

/* ----------------------- */
#contact_form {
	margin : 20px auto;
	padding: 40px;
}

.formItem {
	display        : flex;
	justify-content: space-between;
	margin         : 80px 0;
}

.formItem label {
	font-size     : .9rem;
	letter-spacing: .1rem;
}

.formItem>div:first-child {
	width: 25%;
}

.formItem>div:nth-child(n+2) {
	width: 65%;
}

.formItem input,
.formItem textarea {
	width           : 100%;
	padding         : 10px;
	background-color: #f4f4f4;
	border-radius   : 6px;
	overflow        : visible;
	border-style    : none;
	color           : inherit;
	font-size       : 1em;
	margin          : 0;
}

.formItem input {
	min-height : 35px;
	height     : 30px;
	line-height: 30px;
}

.formItem textarea {
	height: auto;
}

input:focus,
select:focus,
textarea:focus {
	outline           : 0;
	-webkit-box-shadow: 0 0 1px 1px #e61d6acb;
	box-shadow        : 0 0 1px 1px #e61d6acb;
}

.formItem_label-required,
.formItem_label {
	display        : flex;
	font-weight    : bold;
	letter-spacing : .08em;
	padding        : 20px 0;
	justify-content: space-between;
	letter-spacing : .15rem;
}

.formItem_label-required::after {
	content       : "必填";
	color         : #e61d6a;
	white-space   : nowrap;
	font-weight   : lighter;
	font-size     : .8rem;
	letter-spacing: 0;
}

.formItemSelect,
.formItemCheck {
	display    : flex;
	line-height: 40px;
}

.formItemCheck {
	display       : flex;
	flex-direction: column;
}

.formItemOther-budget {
	display: flex;
	width  : 50%;
}

.formItemOther-budget>* {
	margin: 10px 0;
}

.formItemOther-budget label {
	width      : 120px;
	padding-top: 2px;
}

.formItemSelect_item label {
	padding-top: 2px;
}

.formFlexContainer-half {
	display        : flex;
	justify-content: space-between;
}

/* formSubmit_btn */
.formSubmit {
	display        : flex;
	justify-content: center;
	color          : #e61d6a;
}

.formSubmit_btn {
	width         : 20%;
	margin        : 30px;
	padding       : 20px;
	border        : 2px solid #e61d6a;
	border-radius : 30px;
	text-align    : center;
	text-transform: uppercase;
	position      : relative;
	overflow      : hidden;
	transition    : 0.3s;
}

.formSubmit_btn:after {
	position     : absolute;
	transition   : 0.3s;
	content      : "";
	width        : 0;
	height       : 0;
	left         : 50%;
	bottom       : 0;
	background   : #e61d6a;
	border-radius: 50%;
}

.formSubmit_btn:hover {
	cursor: pointer;
	color : #fff;
}

.formSubmit_btn:hover:after {
	top          : -25%;
	left         : -25%;
	width        : 150%;
	height       : 150%;
	border-radius: 50%;
	z-index      : -1;
}

/* input "radio"style  */
input::-webkit-input-placeholder {
	color    : #b3b3b3;
	font-size: .85rem;
}

input[type="radio"],
input[type="checkbox"] {
	display: none;
}

input[type="radio"]+label,
input[type="checkbox"]+label {
	position     : relative;
	cursor       : pointer;
	padding-left : 28px;
	padding-right: 30px;
}

input[type="radio"]+label:before,
input[type="radio"]+label:after {
	content           : "";
	position          : absolute;
	border-radius     : 50%;
	-moz-transition   : all 0.3s ease;
	-o-transition     : all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition        : all 0.3s ease;
}

input[type="checkbox"]+label:before,
input[type="checkbox"]+label:after {
	content           : "";
	position          : absolute;
	border-radius     : 3px;
	-moz-transition   : all 0.3s ease;
	-o-transition     : all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition        : all 0.3s ease;
}

input[type="radio"]+label:before,
input[type="checkbox"]+label:before {
	top               : 0;
	left              : 0;
	width             : 18px;
	height            : 18px;
	background        : #e61d6acb;
	-moz-box-shadow   : inset 0 0 0 18px #E0E0E0;
	-webkit-box-shadow: inset 0 0 0 18px #E0E0E0;
	box-shadow        : inset 0 0 0 18px #E0E0E0;
	border            : solid 1px #b5b5b5;
}

input[type="radio"]+label:after,
input[type="checkbox"]+label:after {
	top              : 49%;
	left             : 9px;
	width            : 54px;
	height           : 54px;
	opacity          : 0;
	background       : #e61d6acb;
	-moz-transform   : translate(-50%, -50%) scale(0);
	-ms-transform    : translate(-50%, -50%) scale(0);
	-webkit-transform: translate(-50%, -50%) scale(0);
	transform        : translate(-50%, -50%) scale(0);
}

input[type="radio"]:checked+label:before,
input[type="checkbox"]:checked+label:before {
	-moz-box-shadow   : inset 0 0 0 4px #E0E0E0;
	-webkit-box-shadow: inset 0 0 0 4px #E0E0E0;
	box-shadow        : inset 0 0 0 4px #E0E0E0;
}

input[type="radio"]:checked+label:after,
input[type="checkbox"]:checked+label:after {
	-moz-transform   : translate(-50%, -50%) scale(1);
	-ms-transform    : translate(-50%, -50%) scale(1);
	-webkit-transform: translate(-50%, -50%) scale(1);
	transform        : translate(-50%, -50%) scale(1);
	-moz-animation   : ripple 1s none;
	-webkit-animation: ripple 1s none;
	animation        : ripple 1s none;
}