@import url('https://fonts.googleapis.com/css?family=Anton');
@import url('notosans.css');
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */ 
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, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;} 
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;} 
table {border-collapse: collapse; border-spacing: 0;}

input:focus::-webkit-input-placeholder { color:transparent; } input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
button{outline:none; cursor: pointer;}
/*input.site-search[placeholder], [placeholder], *[placeholder] { color:#D8E0E2!important;}*/
input:focus, textarea:focus, select:focus{outline:none;}
input::-ms-clear, textarea::-ms-clear, select::-ms-clear{display: none;}/*IE X icon*/
::selection {
	background:#000;;
	color:#fff;
}
::-moz-selection {
	background:#000;;
	color:#fff;
}
a{color: #000;}
button{	font-family:"Anton","NotoSansTC","微軟正黑體";}
.contact_btn_white{
	background-color: transparent;
	border:1px solid #000;
	padding: .8rem 0;
	text-align: center;
	font-size: 1.2rem;
	width: 14rem;
}
.contact_btn_white:hover{
	background-color: #000;
	color: #fff;
}
.contact_btn_black{
	background-color:#000;
	color: #fff;
	border:1px solid #000;
	padding: .8rem 0;
	text-align: center;
	font-size: 1.2rem;
	width: 14rem;
}
.contact_btn_black:hover{
	background-color: #fff;
	color: #000;
}
.contact_btn_black_line{
	background-color:#000;
	color: #fff;
	border:1px solid #fff;
	padding: .8rem 0;
	text-align: center;
	font-size: 1.2rem;
	width: 14rem;
}
.contact_btn_black_line:hover{
	background-color: #fff;
	color: #000;
}

body{
	font-family:"NotoSansTC","微軟正黑體";
	font-weight: 300;
	letter-spacing:1px;
	word-wrap: break-word;
	word-break: normal;
	letter-spacing: .2px;
	-webkit-transform: none;
	-webkit-text-size-adjust: none;
}
span a{display: block; text-decoration: none;}
img{width: 100%;}
p{font-size: 1.1rem;}
.title{position: relative;}
.title h1 {
font-family:"Anton","NotoSansTC";
	font-size: 10rem;
	margin-top: -8px;
	color: #fff;	
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),

             0px 8px 13px rgba(0,0,0,0.1),

             0px 18px 23px rgba(0,0,0,0.1);
}


/*
.title h1{
	font-family:"Anton","NotoSansTC";
	font-size: 10rem;
	margin-top: -8px;
	color: #fff;
	-webkit-text-stroke: 1px #000;
	-webkit-text-fill-color: transparent;
	text-shadow:
       0 0 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000\0;
}*/
.title h2{
	font-size: 2rem;
	font-weight:500;
	font-weight: bold\0;
	letter-spacing: .6rem;
	width: 100%;
	text-align: center;	
	position: absolute;	
	overflow: hidden;
	color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}
.title_text{
	font-size: 1.2rem;
	line-height: 2.2rem;
	padding-top: 1.5rem;
	font-weight: 300;
}
.white_title h1{
	font-size: 8rem;
	color: #fff!important;
	-webkit-text-stroke:0;
	-webkit-text-fill-color:inherit;
	text-shadow:none;
	font-family:"Anton","NotoSansTC";
}
.white_title h2{color: rgba(255,255,255,1)!important; }
.white_title_twoline{
	text-align: center; color: #fff;
	font-family:"Anton","NotoSansTC";
}
.white_title_twoline h1{font-size: 10rem;}
.white_title_twoline h2{
	font-size: 2rem;
	letter-spacing: .6rem;
	font-weight:500;
	font-weight: bold\0;
	padding: 1rem 0;
}


@keyframes arrowleft{
    from{padding-left:0;}
    to{padding-left:10px;}
	}

@keyframes arrowright{
    from{padding-right:0;}
    to{padding-right:10px;}
	}
@keyframes arrowdown{
    from{padding-top:0;}
    to{padding-top:10px;}
}


/*KV 動畫*/
#animation_container{
	width: 100%!important;
	height: 100vh!important;
	z-index: -1;
	position: relative;
	overflow: hidden;
}
#canvas{
	width: auto!important;
	height: 100%!important;
	position: absolute;
	left: -400%!important;
	right: -400%!important;
	margin: 0 auto!important;
	text-align: center;
	overflow: hidden;
}
/*KV 向下箭頭提示*/
.arrowtip{
	position:absolute;
	z-index: 5;
	bottom:6em;
	left: 0;
	text-align: center;
	width: 100%;
	z-index: 0;
	height: 1.2rem;
}
.arrowtip img{
	width: 1.2rem;
	transform:rotate(180deg);
	animation-name:arrowdown;
    animation-duration:1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}

/*內頁用的向下箭頭*/
.main_arrowtip{
	text-align: center;
	width: 100%;
	height: 1.2rem;
	padding-bottom: 2rem;
}
.main_arrowtip img{
	width: 1.2rem;
	transform:rotate(180deg);
	animation-name:arrowdown;
    animation-duration:1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}

/*Header*/
.header{
	width: 100%;
	height: 6rem;
	display: table;
	position: fixed;
	z-index: 2000;
	left: 0;
	top: 0;
	padding: .5rem 0;
}
	/*選單向下捲時*/
	.navbar{transition: 0.3s;}
	.scrolled{
		background-color:  rgba(255, 255, 255, .8);
		transition: 0.3s;
		height: 4rem;
		}
.header dl{
	display:table-cell; 
	vertical-align: middle;
}
.header dl.logo{
	vertical-align:middle;
	width: 11rem;
	padding-left: 4rem;
}
.header dl.logo img{float: left;}

/*選單*/
.header dl.menubox{
	text-align: right;
	padding-right:4rem;
}
ul.menu li{
	font-family:"Anton","NotoSansTC";
	font-size: 1.6rem;	
	margin-right:3rem;
	padding-top:.5rem;
	display: inline-block;
	text-shadow: 1px 0 #fff;
}
ul.menu li:nth-child(5), ul.menu li:last-child{margin-right: 0;}
ul.menu li span a{color: #000;}
.active, .active span a, ul.menu li:hover span a{
	position: relative;
	text-align: left;
}
.active span a::after,
ul.menu li:hover span a::after{ 
    content: "";
	border: solid #000 3px;
	display: inline-block;
	position: absolute;
	z-index: 9999;
	left: -.2rem;
	top:38%;
	width: 100%;
	/*transform:rotate(-8deg);*/
	-webkit-animation-name: "fadeInLeft";
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
	z-index: 0;
}
	@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform:rotate(0);
		}	
	100% {
		opacity: 1;
		/*transform:rotate(-8deg);*/
		}
}
.header dl.menubox dd{
	display: inline-block;
	vertical-align: middle;
}

/*copyright*/
.copyright{
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 888;
	transform:rotate(90deg);
	transform-origin:right top;
	text-shadow: 0 1px #fff;
}
.copyright ul li{
	display: inline-block;
	text-transform:uppercase;
	vertical-align: middle;
}
.copyright ul li:first-child{
	font-size: .7rem;	
	line-height: 1.2rem;
	padding:1rem 0 0 0;
	padding-right: 1.2rem;	
}
.copyright ul li:last-child span a article{
	border-radius: 99rem;
	width: .6rem;
	height: .6rem;
	padding: .3rem;
	line-height: .1rem;
	transform:rotate(-90deg);
	transition:All 0.3s;
	position: absolute;
	right: -.5rem;
	top: 1rem;
	background-color: #000;
}
.copyright ul li:last-child:hover span a article{right:0;}


/*內頁*/
.main_title{
	border-left: 8px solid #000;
	padding: 0 2rem;
}
.case_nav dd:last-child{position: relative;}
.nav_arrow{
	display: none;
	/*display: flex;*/
	flex-direction:row;
	align-items:stretch;
	justify-content:space-between;
	width: 100%;
	height: 100%;
    animation-duration:1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	position: absolute;
	top: 0;
	pointer-events: none;/*穿透圖層*/
}
.nav_arrow li{
	display:inline-flex;
	flex-wrap:nowrap;
	align-items:center;
	justify-content:center;
	width: 1rem;
}	
.nav_arrow li.arrow_left{
	margin-left: -1.5rem;
	/*
	animation-name:arrowleft;
	animation-duration:1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	*/
}	
.nav_arrow li.arrow_right{
	margin-right:-1.5rem;
	/*
	animation-name:arrowright;
	animation-duration:1s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	*/
}
/*forfullwidth*/
.arrow_full{
	display: flex!important; 
	/*pointer-events: none;穿透圖層*/
	z-index: 9999;
}
.arrow_full li img{background-color: #000;}
.arrow_full li.arrow_right{margin-right:1rem!important;}	
.arrow_full li.arrow_left{margin-left:1rem!important;}
.nav_arrow li.arrow_left img{transform:rotate(-90deg);}
.nav_arrow li.arrow_right img{transform:rotate(90deg);}
.forpjarrow{padding-top: 7%;}
.forpjarrow li img{background-color:#fff!important;}
@media (min-width: 900px) {
#nav-btn,.sub-menu{display: none;}
.nav>.menu {display: block !important;}
.nav>ul>li{float: left;}
}

/*小筆電*/
@media screen and (max-width: 1440px) and (max-height: 900px) {
.title h1 {	font-size: 8rem;}
ul.menu{margin-top: 1rem;}	
ul.menu li{padding-top:0;}	
}

/*手機版*/
@media (max-width: 900px) {
/*Header*/
.header{height: 4rem;}
.header dl.logo{
	width: 8rem;
	padding-left:1.5rem;
}
.header dl.menubox{
	height: 4rem;
	padding-right: 1.5rem;
}	
.header dl.menubox dd.nav .mbtn article{
	width: 1em;
	height: 1em;
	}
.nav > ul, .sub-menu{
	display:none;
	height: 100vh;
	width: 100vw;
	position: fixed;
	left: 0;
	top: 4rem;
	background-color: #fff;
	overflow:auto;
	overflow-x:hidden;
	}
.nav{overflow: auto;}
.nav::-webkit-scrollbar {display:none;}
	
/*選單*/
ul.menu li{
	display:block;
	text-align: center;
	margin-right: inherit;
	border-top:1px solid #ccc;
	}	
ul.menu li:last-child{border-bottom:1px solid #ccc;}	
ul.menu li span a, .active span a{
	padding:.8rem 0;
	text-align: center;
	display: inline-block;
	}	
.active span a::after,
ul.menu li:hover span a::after{top:40%;}

/*close btn*/
.bar1, .bar2, .bar3 {
    width: 30px;
    height: 4px;
    background-color: #000;
    margin: 4px 0;
    transition: 0.4s;
}
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-4px, 4px);
    transform: rotate(-45deg) translate(-4px, 4px);
	background-color: #000;
}
.change .bar2 {opacity: 0;}
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-7px, -8px);
	background-color: #000;
}
/*作品選單*/
.case_sub {
	overflow:scroll;
	overflow-y: hidden;
	white-space:nowrap;
	width: 100%;
	}
.case_sub li{
	display:inline-block!important;
	margin:0 1rem!important;
	border-top:none!important;
	}	
.case_sub li:last-child{border-bottom:none!important;}
.main_title{
	border-left:0;
	padding:0;
}		
	
/*Footer*/
.copyright{
	position: relative;
	transform:none;
	padding:1rem;
	border-top:1px solid #000;
	background-color: #fff;	
}
.copyright ul{position: relative;}
.copyright ul li{
	display: inline-block;
	text-transform:uppercase;
	vertical-align: middle;
}
.copyright ul li:first-child{
	font-size: .7rem;
	margin-right: 0;
	padding:0 1.5rem;	
}
.copyright ul li:last-child span a article{
	transform:rotate(0deg);
	right:.5rem;
	top: .2rem;
}
.copyright ul li:last-child:hover span a article{right:1.5rem;}
	
/*CONTACT*/
.footer{
	padding:4rem 2rem;
	min-height:inherit;
	text-align: center;
}
.footer hgroup{
	width: auto; 
	text-align: left; 
	bottom: 0;
	}
.footer hgroup h1{
	text-align: center;
	font-size:6rem;
	}	
.footer hgroup h2{
	position: inherit!important;
	bottom: 0!important;
	padding-top:1rem; 
	}	
.footer p{width: auto; text-align: center;}
}

@media (max-width: 880px) {
.title h1{font-size: 5.5rem; margin-top: 0;}
.title h2{font-size: 1.4rem;}	
.white_title h1{font-size: 6rem;}
.white_title_twoline h1{font-size: 6rem;}
.white_title_twoline h2{font-size: 1.4rem;}	
.nav_arrow{display: flex;}	
}

@media (max-width: 650px) {	
.copyright ul li:first-child{padding: 0;}		
.copyright ul li:last-child span a article{	right:.5rem; top: .2rem;}
.footer hgroup h1{font-size:5rem;}
}
@media (max-width: 560px) {
.title h2{
	font-size: 1.3rem;
	letter-spacing:.1rem;
	right:0;
}
.white_title h1{font-size:4.6rem;}
.white_title_twoline h1{font-size: 4.8rem;}	
.white_title_twoline h2{font-size: 1.3rem;}	
}

@media (max-width: 340px) {
.title h1{font-size: 4.6rem;}		
/*Header*/
.header{height: 3rem;}
/*選單*/
.header dl.menubox{	height: 3rem;}
.footer hgroup h1{font-size:4rem;}
.copyright ul li:first-child{padding: 0;}		
.copyright ul li:last-child span a article{
	right:1rem;
	top: .6rem;
}
}