@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900");
@import url("font-awesome.min.css");

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);   /* 思源黑體*/
  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

/*
	Big Picture by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* Reset */

	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;
	}

	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;
	}

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

	body {
		-webkit-text-size-adjust: none;
	}

/* Box Model */

	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}



/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	html {
		height: 100%;scroll-behavior: smooth;
	}

	body {
		background: #fff;
		height: 100%;
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
		font-size: 18pt;
		line-height: 1.75em;
		color: #39454b;
		letter-spacing: 0.5px;
	}

		body.is-loading *, body.is-resizing * {
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
		}

	
	h1, h2, h3, h4, h5, h6 {
		font-weight: bold;
    line-height: inherit;font-family: 'Noto Sans TC', sans-serif;
	}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: inherit;
		text-decoration: none;
	}

	

	strong, b {
		font-weight: 900;
		color: inherit;
	}

	em, i {
		font-style: italic;
	}

	a {
		-moz-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
		color: #98c593;
	}

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	hr {
		border: 0;
		border-top: solid 1px #ddd;
	}

	blockquote {
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}

	p, ul, ol, dl, table {
		margin-bottom: 1em; 
	}

	
	br.clear {
		clear: both;
	}

iframe { width:100%; height: 665px; border: 25px #F5F6F7 solid; margin: 25px 0;}

/* Sections/Article */

	section, article {
		margin-bottom: 3em;
	}

	section > :last-child,
	article > :last-child,
	section > .content > :last-child,
	article > .content > :last-child,
	section:last-child,
	article:last-child {
		margin-bottom: 0;
	}

	.row > section, .row > article {
		margin-bottom: 0;
	}

/* Image */

	.image {
		position: relative;
		display: inline-block;
	}

		.image:before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url("images/overlay.png");
		}

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

		.image.featured {
			display: block;
			width: 100%;
			margin: 0 0 2em 0;
		}

		.image.fit {
			display: block;
			width: 100%;
		}

		.image.left {
			float: left;
			margin: 0 2em 2em 0;
		}

		.image.centered {
			display: block;
			margin: 0 0 2em 0;
		}

			.image.centered img {
				margin: 0 auto;
				width: auto;
			}




/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.button,
	button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		background-color: #98c593;
		border: 0;
		border-radius: 3.5em;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		height: 3.5em;
		line-height: 3.5em;
		outline: 0;
		padding: 0 2em 0 2em; margin: 1em 0 ;
		position: relative;
		text-align: center;
		text-decoration: none;
	}

		input[type="button"].down,
		input[type="submit"].down,
		input[type="reset"].down,
		.button.down,
		button.down {
			width: 3.5em;
			height: 3.5em;
			line-height: 2.5em;
			padding: 0; 
			background-image: url("images/dark-arrow.svg");
			background-position: center center;
			background-repeat: no-repeat;
			text-indent: -6em;
			overflow: hidden;
		}

			input[type="button"].down.anchored,
			input[type="submit"].down.anchored,
			input[type="reset"].down.anchored,
			.button.down.anchored,
			button.down.anchored {
				bottom: 0;
				border-bottom: 0;
				border-radius: 3em 3em 0 0;
				height: 2.5em;
				margin-left: -2.5em;
			}


input[type="button"].up,
		input[type="submit"].up,
		input[type="reset"].up,
		.button.up,
		button.up {
			width: 3.5em;
			height: 3.5em;
			line-height: 2.5em;
			padding: 0; 
			background-image: url("images/dark-arrow-up.svg");
			background-position: center center;
			background-repeat: no-repeat;
			text-indent: -6em;
			overflow: hidden;
		}

			input[type="button"].up.anchored,
			input[type="submit"].up.anchored,
			input[type="reset"].up.anchored,
			.button.up.anchored,
			button.up.anchored {
				top: 55px;
				border-bottom: 0;
				border-radius: 0 0 3em 3em ;
				height: 2.5em;
				margin-left: -2.5em;
			}

@media screen and (max-width: 736px) {		
	.button.style2,
		button.style2 {
		padding: 1.5em ; 
	}
	
	input[type="button"].up.anchored,
			input[type="submit"].up.anchored,
			input[type="reset"].up.anchored,
			.button.up.anchored,
			button.up.anchored {
				top: 65px;
			}
	
}

		input[type="button"].anchored,
		input[type="submit"].anchored,
		input[type="reset"].anchored,
		.button.anchored,
		button.anchored {
			position: absolute;
			left: 50%;
		}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		.button:hover,
		button:hover {
			background-color: #a8d5a3;
		}

		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		.button:active,
		button:active {
			background-color: #88b583;
		}

		input[type="button"].style2,
		input[type="submit"].style2,
		input[type="reset"].style2,
		.button.style2,
		button.style2 {
			background-color: transparent;
			border: solid 0px #e5e6e7;
			color: inherit;
		}

			input[type="button"].style2:hover,
			input[type="submit"].style2:hover,
			input[type="reset"].style2:hover,
			.button.style2:hover,
			button.style2:hover {
				background-color: rgba(145, 146, 147, 0.35);
			}

			input[type="button"].style2.down,
			input[type="submit"].style2.down,
			input[type="reset"].style2.down,
			.button.style2.down,
			button.style2.down {
				background-image: url("images/arrow.svg");
			}
            

            input[type="button"].style2.up,
			input[type="submit"].style2.up,
			input[type="reset"].style2.up,
			.button.style2.up,
			button.style2.up {
				background-image: url("images/arrow-up.svg");
			}


/* Box */

	.box {
		background: #fff;
		color: #39454b;
		padding: 2em;
	}

		.box.style2 {
			padding: 2.5em
		}

/* Main */

	.main {
		position: relative;
		margin: 0;
		overflow-x: hidden;
	}

		.main.fullscreen {
			height: 100%;
		}

		.main.style1 {
			text-align: center;
			padding: 3em 0 3em 0;
		}

		.main.style1 h2,.main.style2 h2,.main.style3 h2 { 
			font-size: 2em; border-bottom: 1px dotted; border-top: 1px dotted; line-height: 1.35; letter-spacing: 3px; margin: 0 0 0.5em 0; }
        .main.style1 h2,.main.style1 p  {	color: #fff;}

			.main.style1:before {
				content: '';
				display: inline-block;
				vertical-align: middle;
				height: 100%;
			}

			.main.style1 .content {
				-moz-transition: all 1s ease;
				-webkit-transition: all 1s ease;
				-ms-transition: all 1s ease;
				transition: all 1s ease;
				-moz-transform: translateZ(0);
				-webkit-transform: translateZ(0);
				-ms-transform: translateZ(0);
				transform: translateZ(0);
				opacity: 1.0;
				display: inline-block;
				vertical-align: middle;
			}

			.main.style1.inactive .content {
				opacity: 0;
			}

		.main.style2 {
			padding: 3em 0 3em 0;
			overflow: hidden;
		}
        
          

			.main.style2 .content {				
				position: relative;
				width: 35%;
				display: inline-block;
				vertical-align: middle;			
			   				
			}
		


 /* 文字方塊動態 */

			.main.style2.right .content {						
			    opacity:0;
				animation-name:fadenumRight;
		        animation-duration:15s;	animation-iteration-count: infinite; 				
			}
		
@keyframes fadenumRight{
          0%{opacity:1;-webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);} 	      
	      7%{opacity:1;-webkit-transform: none;
            transform: none;}
	      40%{opacity:1;-webkit-transform: none;
            transform: none;}
          47%{opacity:0;-webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);}
	      100%{opacity:0;-webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);}
	}

.main.style2.left .content {						
			    opacity:0;
				animation-name:fadenumLeft;
		        animation-duration:13s;	animation-iteration-count: infinite; 				
			}
		
@keyframes fadenumLeft{
          0%{opacity:1;-webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);} 	      
	      7%{opacity:1;-webkit-transform: none;
            transform: none;}
	      40%{opacity:1;-webkit-transform: none;
            transform: none;}
          47%{opacity:0;-webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);}
	      100%{opacity:0;-webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);}
	}


			.main.style2.left:after {
				content: '';
				display: inline-block;
				vertical-align: middle;
				height: 100%;
			}

			.main.style2.left .content {
				left: 0;
			}

			.main.style2.right:before {
				content: '';
				display: inline-block;
				vertical-align: middle;
				height: 100%;
			}

			.main.style2.right .content {
				left: 65%;
			}

			.main.style2.inactive.left .content {
				left: -35%;
			}

			.main.style2.inactive.right .content {
				left: 100%;
			}

		.main.style3 {
			text-align: center;
			padding: 6em 0 6em 0;
		}

			.main.style3 .content > header {
				margin-bottom: 2em;
			}

			.main.style3.primary {
				background: #fff;
			}

			.main.style3.secondary {
				background: #fff;
			}

/* Dark */

	.dark {
		color: #fff;
	}

		.dark a {
			color: #fff;
		}

		.dark .button.style2 {
			border-color: inherit;
			background-color: rgba(234, 227, 221, 0.8);
		}

			.dark .button.style2:hover {
				background-color: rgba(255, 255, 255, 0.3);
			}

			.dark .button.style2.down {
				background-image: url("images/dark-arrow.svg");
			}

           .dark .button.style2.up {
				background-image: url("images/dark-arrow-up.svg");
			}


	@media (-webkit-min-device-pixel-ratio: 2) {

		body:before {
			line-height: 2.025em;
		}

	}

/* Icons */

	.icon {
		text-decoration: none;
	}

		.icon:before {
			display: inline-block;
			font-family: FontAwesome;
			font-size: 1.25em;
			text-decoration: none;
			font-style: normal;
			font-weight: normal;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		.icon > .label {
			display: none;
		}


/* 背景圖 background*/

	#intro {background:  url("../ai/case-1/0.jpg");	}

	 #one.case-1 {	background: url("../ai/case-1/1.jpg");}
	 #two.case-1 {	background: url("../ai/case-1/2.jpg");}
     #three.case-1 {background: url("../ai/case-1/3.jpg");}
	 #four.case-1{	background: url("../ai/case-1/4.jpg");}
	 #five.case-1 {	background: url("../ai/case-1/5.jpg");}
	 #six.case-1 {	background: url("../ai/case-1/6.jpg");} 

     #one.case-2 {	background: url("../ai/case-2/1.jpg");}
	 #two.case-2 {	background: url("../ai/case-2/2.jpg");}
     #three.case-2 {background: url("../ai/case-2/3.jpg");}
	 #four.case-2{	background: url("../ai/case-2/4.jpg");}
	 #five.case-2 {	background: url("../ai/case-2/5.jpg");}
	 #six.case-2 {	background: url("../ai/case-2/6.jpg");} 

     #one.case-3 {	background: url("../ai/case-3/1.jpg");}
	 #two.case-3 {	background: url("../ai/case-3/2.jpg");}
     #three.case-3 {background: url("../ai/case-3/3.jpg");}
	 #four.case-3{	background: url("../ai/case-3/4.jpg");}
	 #five.case-3 {	background: url("../ai/case-3/5.jpg");}
	 #six.case-3 {	background: url("../ai/case-3/6.jpg");} 

     #one.case-4 {	background: url("../ai/case-4/1.jpg");}
	 #two.case-4 {	background: url("../ai/case-4/2.jpg");}
     #three.case-4 {background: url("../ai/case-4/3.jpg");}
	 #four.case-4{	background: url("../ai/case-4/4.jpg");}
	 #five.case-4 {	background: url("../ai/case-4/5.jpg");}
	 #six.case-4 {	background: url("../ai/case-4/6.jpg");} 

     #one.case-5 {	background: url("../ai/case-5/1.jpg");}
	 #two.case-5 {	background: url("../ai/case-5/2.jpg");}
     #three.case-5 {background: url("../ai/case-5/3.jpg");}
	 #four.case-5{	background: url("../ai/case-5/4.jpg");}
	 #five.case-5 {	background: url("../ai/case-5/5.jpg");}
	 #six.case-5 {	background: url("../ai/case-5/6.jpg");} 

     #one.case-6 {	background: url("../ai/case-6/1.jpg");}
	 #two.case-6 {	background: url("../ai/case-6/2.jpg");}
     #three.case-6 {background: url("../ai/case-6/3.jpg");}
	 #four.case-6{	background: url("../ai/case-6/4.jpg");}
	 #five.case-6 {	background: url("../ai/case-6/5.jpg");}
	 #six.case-6 {	background: url("../ai/case-6/6.jpg");} 


@media screen and (max-width: 736px) {
	#one.case-1 {background: url("../ai/case-1/mobile/1.jpg");background-size: cover;}
	#two.case-1 {background: url("../ai/case-1/mobile/2.jpg");background-size: cover;}
    #three.case-1 {background: url("../ai/case-1/mobile/3.jpg");background-size: cover;}
	#four.case-1 {	background: url("../ai/case-1/mobile/4.jpg");background-size: cover;}
	#five.case-1 {	background: url("../ai/case-1/mobile/5.jpg");background-size: cover;}
	#six.case-1 {	background: url("../ai/case-1/mobile/6.jpg");background-size: cover;} 
	
    #one.case-2 {background: url("../ai/case-2/mobile/1.jpg");background-size: cover;}
	#two.case-2 {background: url("../ai/case-2/mobile/2.jpg");background-size: cover;}
    #three.case-2 {background: url("../ai/case-2/mobile/3.jpg");background-size: cover;}
	#four.case-2 {	background: url("../ai/case-2/mobile/4.jpg");background-size: cover;}
	#five.case-2 {	background: url("../ai/case-2/mobile/5.jpg");background-size: cover;}
	#six.case-2 {	background: url("../ai/case-2/mobile/6.jpg");background-size: cover;} 
	
	#one.case-3 {background: url("../ai/case-3/mobile/1.jpg");background-size: cover;}
	#two.case-3 {background: url("../ai/case-3/mobile/2.jpg");background-size: cover;}
    #three.case-3 {background: url("../ai/case-3/mobile/3.jpg");background-size: cover;}
	#four.case-3 {	background: url("../ai/case-3/mobile/4.jpg");background-size: cover;}
	#five.case-3 {	background: url("../ai/case-3/mobile/5.jpg");background-size: cover;}
	#six.case-3 {	background: url("../ai/case-3/mobile/6.jpg");background-size: cover;} 

	#one.case-4 {background: url("../ai/case-4/mobile/1.jpg");background-size: cover;}
	#two.case-4 {background: url("../ai/case-4/mobile/2.jpg");background-size: cover;}
    #three.case-4 {background: url("../ai/case-4/mobile/3.jpg");background-size: cover;}
	#four.case-4 {	background: url("../ai/case-4/mobile/4.jpg");background-size: cover;}
	#five.case-4 {	background: url("../ai/case-4/mobile/5.jpg");background-size: cover;}
	#six.case-4 {	background: url("../ai/case-4/mobile/6.jpg");background-size: cover;} 
	
	#one.case-5 {background: url("../ai/case-5/mobile/1.jpg");background-size: cover;}
	#two.case-5 {background: url("../ai/case-5/mobile/2.jpg");background-size: cover;}
    #three.case-5 {background: url("../ai/case-5/mobile/3.jpg");background-size: cover;}
	#four.case-5 {	background: url("../ai/case-5/mobile/4.jpg");background-size: cover;}
	#five.case-5 {	background: url("../ai/case-5/mobile/5.jpg");background-size: cover;}
	#six.case-5 {	background: url("../ai/case-5/mobile/6.jpg");background-size: cover;} 
	
	#one.case-6 {background: url("../ai/case-6/mobile/1.jpg");background-size: cover;}
	#two.case-6 {background: url("../ai/case-6/mobile/2.jpg");background-size: cover;}
    #three.case-6 {background: url("../ai/case-6/mobile/3.jpg");background-size: cover;}
	#four.case-6 {	background: url("../ai/case-6/mobile/4.jpg");background-size: cover;}
	#five.case-6 {	background: url("../ai/case-6/mobile/5.jpg");background-size: cover;}
	#six.case-6 {	background: url("../ai/case-6/mobile/6.jpg");background-size: cover;} 
}    

#intro,#one,#two,#three,#four,#five,#six {
		background-size: cover; background-attachment: fixed;
		background-position:  top center;
		background-repeat:  no-repeat;
	}


/* Work */

	#work .row.images .image {
		-moz-transition: all 1s ease;
		-webkit-transition: all 1s ease;
		-ms-transition: all 1s ease;
		transition: all 1s ease;
		-moz-transform: translateZ(0);
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: translateZ(0);
		position: relative;
		top: 0;
		left: 0;
		opacity: 1.0;
	}

	#work .row.images.inactive .image {
		opacity: 0;
	}

		#work .row.images.inactive .image.from-left {
			left: -14em;
		}

		#work .row.images.inactive .image.from-right {
			left: 14em;
		}

		#work .row.images.inactive .image.from-top {
			top: -7em;
		}

		#work .row.images.inactive .image.from-bottom {
			top: 7em;
		}

/* Contact */

	#contact {
		padding-bottom: 0;
		overflow: hidden;
	}

		#contact .box {
			-moz-transition: all 1s ease;
			-webkit-transition: all 1s ease;
			-ms-transition: all 1s ease;
			transition: all 1s ease;
			-moz-transform: translateZ(0);
			-webkit-transform: translateZ(0);
			-ms-transform: translateZ(0);
			transform: translateZ(0);
			position: relative;
			bottom: 0;
		}

		#contact.inactive .box {
			bottom: -30em;
		}





/* Touch Mode */

	body.is-touch .main {
		background-attachment: scroll !important;
	}

	body.is-touch .poptrox-popup .nav-next,
	body.is-touch .poptrox-popup .nav-previous,
	body.is-touch .poptrox-popup .closer {
		opacity: 1.0 !important;
	}

/* Wide */

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

		/* Basic */

			body, input, textarea, select {
				font-size: 17pt;
			}

		

	}

/* Normal */

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

		/* Basic */

			body, input, textarea, select {
				font-size: 15pt;
			}

	}

/* Narrow */

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

		/* Basic */

			body, input, textarea, select {
				font-size: 13pt;
			}

	
	}

/* Narrower */

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

		/* Basic */

			body, input, textarea, select {
				font-size: 13pt;
			}

			.container > .container {
				width: 100% !important;
			}

	

		
	}

/* Mobile */

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

		/* Basic */

			body {
				min-width: 320px;
				font-size: 12pt;
				line-height: 1.5em;
			}

			

			h2 {
				font-size: 1.5em;
				letter-spacing: -1px;
			}

		/* Box */

			.box {
				padding: 1em;
			}

				.box.style2 {
					padding: 1.5em 1.25em 1.5em 1.25em;
					background-color: rgba(255, 255, 255, 0.9);
				}

		/* Main */

			.main.fullscreen {
				/* OLD: height: auto !important; */
			}

			.main.style1 {
				padding: 1em 0 1em 0!important; 
			}
		
		.main.style1:before {
				height: 50%;
			}
		
		.main.style1 .content { }

			.main.style1 h2,.main.style2 h2,.main.style3 h2 { 
			letter-spacing: 0;  }

			.main.style2 {
				padding: 10em 15px; 
			}

				.main.style2:before, .main.style2:after {
					display: none !important;
				}

				.main.style2 .button.anchored {
					
				}

				.main.style2 .content {
					width: 100%;
					left: 0% !important;
					
				}

				.main.style2 .tmp {
					width: 100%;
					height: 10em;
					background-size: cover;
				}

			.main.style3 {
				text-align: center;
				padding: 8em 10px 3em 10px;
			}

	#intro {background:  url("../ai/case-1/0s.jpg");background-size: cover;	}
		
		
		iframe {  height: 200px; border: 5px #F5F6F7 solid;}

	}