html,body{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	font-family: Arial,"Microsoft JhengHei", Helvetica, sans-serif;
	-webkit-overflow-scrolling: touch;
	line-height: normal;
}
	header{
		position: fixed;
		top: 0;
		width: 100%;
		height: 50px;
		z-index: 2;
		background-color: rgba(0,0,0,.7);
	}
		.header-logo{
			height: 100%;
			padding: 10px 15px;
		}
		.header-logo img{
			width: auto;
			height: 30px;
		}
		.header-link{
			position: absolute;
			right: 0;
			top: 50px;
			padding: 0;
			width: 48px;
			background: rgba(0,0,0,.3);
		}
			.header-link .nav{
				margin: 0;
			}
				.header-link > .nav > li > a > svg{
					opacity: 0.3;
					color: #FFF;
					vertical-align: top;
					width: 18px;
					height: 18px;
				}
					.header-link svg path,.header-link svg polygon{
						fill: currentColor;
					}
				.header-link .nav>li.with-sub{
					border-width: 0 0 0 2px;
					border-style: solid;
					border-color: rgba(255,255,255,.2);
				}
				.header-link .nav>li>a{
					padding: 15px;
				}
				.header-link .nav>li.with-sub > a{
					padding: 15px 15px 15px 13px;
				}
				.header-link .nav>li.with-sub.open > a{
					background-color: #FFF;
				}
				.header-link .nav>li>a:focus, .header-link .nav>li>a:hover{
					background-color: transparent;
				}
					.header-link .nav>li.with-sub.open>.nav-link> svg{
						color: #000;
						opacity: 1;
					}
					.header-link .nav>li>a:focus svg, .header-link .nav>li>a:hover svg{
						opacity: 1;
					}

				.header-link .nav .dropdown-menu{
					position: absolute;
					top: 0;
					right: 100%;
					left: auto;
	    			background-color: #fff;
	    			padding: 0;
				}
					.header-link .nav .with-sub .dropdown-menu a{
						color: #000;
						padding: 15px;
						cursor: pointer;
					}
					.header-link .nav .dropdown-menu a svg{
						width: 16px;
						height: 16px;
						margin-right: 5px;
    					line-height: normal;
    					vertical-align: top;
					}
					.header-link .nav .dropdown-menu a:hover{
						color: #FFF;
						background-color: #000;
					}
					.header-link .nav .dropdown-menu a > span{
						display: inline-block;
						vertical-align: middle;
    					line-height: normal;
					}
					.header-link .nav .dropdown-menu a,.header-link .nav .dropdown-menu a svg{
						opacity: 1;
					}

	main{
		position: fixed;
		top: 0px;
		bottom: 0px;
		width: 100%;
		left: 0;
		overflow: hidden;
	}
		.main-content{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			padding: 0;
			overflow-x: hidden;
			overflow-y: auto;
		}
		.ls{
			position: relative;
		}
		.section-title{
			margin: 45px 0 30px 0;
		}

		.ls-1{
			height: 100%;
			background: url(../../image/s1_bg.png) no-repeat;
			background-position: center;
			background-size: cover;
		}
		.ls-1-content{
			position: absolute;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
			.ls-1-content > .container{
				height: 100%;
				font-size: 24px;
			}

			.ls-1-content > .container:before{
				content: "";
				display: inline-block;
				width: 0;
				height: 100%;
				vertical-align: middle;
			}

		.ls-1-content > .container > .row{
			display: inline-block;
			width: 100%;
			vertical-align: middle;
			background: rgba(0,0,0,.2);
			padding: 15px;
		}
		.ls-1-name-en{
			letter-spacing: 15px;
			font-family: PMingLiU,serif;
			text-align: center;
			display: inline-block;
			width: 100%;
		}
		.ls-1-name-tw{
			display: inline-block;
			width: 100%;
			letter-spacing: 10px;
		    vertical-align: text-bottom;
		    line-height: 1em;
		    text-align: center;
		}
		.ls-1-line{
			height: 1px;
			margin-top: 10px;
			margin-bottom: 10px;
		}

			.ls-2 .container{
				background: url(../../image/s2_bg.png) no-repeat;
				background-position: 90% top;
				background-size: 100px;
			}
			.ls-2 .about-box{
				padding-bottom: 35px;
			}
			.ls-2 .about-box:not(:last-of-type){
				border-right: 1px solid rgba(255,255,255,.1);
			}
				.ls-2 .about-box .about-title{
					margin-bottom: 20px;
				}
				.ls-2 .about-box .about-content{
					line-height: 24px;
				}
					.ls-2 .about-box .about-content > div{
						font-size: 0;
					}
					.ls-2 .about-box .about-content > div:not(:last-of-type){
						margin: 0 0 10px 0;
					}
						.ls-2 .about-box .about-content > div > span{
							display: inline-block;
							vertical-align: middle;
						}
							.ls-2 .about-box .about-content > div > span > img{
								width: 24px;
								vertical-align: middle;
								margin-right: 10px;
							}

			.ls-3 .row{position: relative;}

			.ls-3 .container-fluid{
				background: url(../../image/s3_bg.png) no-repeat;
				background-position: center top;
				background-size: cover;
			}

			.ls-3 .project{
				padding: 0;
				margin-bottom: 70px;
				z-index: 1;
			}
				.ls-3 ul{
					margin: 0;
					padding: 0;
					vertical-align: top;
					width: 100%;
					height: 100%;
					list-style: none;
				}
				.ls-3 .project-list{
					font-size: 0;
					white-space: nowrap;
					overflow: hidden;
				}
					.ls-3 .project-list-item{
						width: 100%;
						padding: 0;
						font-size: 0;
						background: #FFF;
					    display: inline-block;
					    vertical-align: top;
					    position: relative;
						transition: margin-left 0.5s;
						-webkit-transition: margin-left 0.5s;
					}
					.ls-3 .project-list-item:before{
						content: none;
					}
						.ls-3 .project-des{
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							white-space: normal;
						    color: #FFF;
    						background: rgba(0,0,0,0.3);
    						z-index: 1;
						}
							.ls-3 .project-des .project-des-title{
								padding: 10px 10px 10px 10px;
								position: relative;
							}
							.ls-3 .project-des .des-btn{
								position: absolute;
								width: 40px;
								height: 40px;
								left: 50%;
								margin-left: -20px;
								top: 100%;
								background: #000;
								padding: 13px 0;
								cursor: pointer;
								background: rgba(0,0,0,0.3);
								transition: all 1s;
							}
							.ls-3 .project-des .des-btn.shine{
								/*background: rgba(0,0,0,0.7);*/
							}
								.ls-3 .project-des .des-btn i{
									transition: all 1s;
									color: #FFF;
								}
								.ls-3 .project-des .des-btn.shine i{
									color: #000;
								}
							.ls-3 .project-des p{
								padding: 0 10px;
								margin: 0;
								overflow: hidden;
								max-height: 0;
								transition: all 0.5s;
								-webkit-transition: all 0.5s;
							}
								.ls-3 .project-des.show-list .des-btn i{
									transform: rotate(180deg);
								}

							.ls-3 .project-des.show-list p{
								max-height: 200px;
								padding: 10px;
							}
						.ls-3 .project-photo{
							position: relative;
							top: 0;
							right: 0;
							width: 100%;
							height: 0;
							padding-bottom: 100%;
							background-color: #000;
						}
							.ls-3 .project-photo img{
								width: 100%;
								height: auto;
							}
							.ls-3 .project-photo .detail-link{
								position: absolute;
								bottom: 50px;
								right: 15px;
								padding: 10px 20px;
								border-radius: 5px;
								background: rgba(255,255,255,.4);
							}
							.ls-3 .project-photo .detail-link:hover,
							.ls-3 .project-photo .detail-link:focus{
								color: #FFF;
							}
							.ls-3 .project-photo-list{
								position: absolute;
								top: 100%;
								margin-top: 15px;
								padding: 0 0 0 15px;
								font-size: 0;
								width: 55px;
							}
							.ls-3 .project-photo-list > li{
								display: inline-block;
								width: 40px;
								height: 40px;
								vertical-align: top;
								background-color: #000;
								cursor: pointer;
							}
							.ls-3 .project-photo-list > li img{
								width: 100%;
								opacity: 0.3;

							}
							.ls-3 .project-photo-list > li.active img{
								opacity: 1;
							}
							.ls-3 .project-photo-list > li:not(:last-of-type){
								margin: 0 0 10px 0;
							}
			.ls-3 .project-pager{
				position: absolute;
				height: auto;
				bottom: 70px;
				top: auto;
				width: 100%;
				left: 0%;
				background-color: #000;
    			z-index: 3;
    			margin-top: 0;
			}
				.ls-3 .project-pager .pager-btn{
					width: auto;
					height: 100%;
					background-color: transparent;
					border: 0;
					padding: 10px;
				}
				.ls-3 .project-pager .pager-btn.disabled{
					opacity: 0;
					cursor: not-allowed;
				}
				.ls-3 .project-pager .pager-btn svg{
					width: 20px;
					height: 20px;
					vertical-align: top;
				}
				.ls-3 .project-pager .pager-btn>*{
					opacity: 1;
				}
	.ls-4{
		background: url(../../image/t_1.png) no-repeat;
		background-position: center center;
		background-size: cover;
		padding: 0 0 30px 0;
	}
	.ls-4:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(../../image/t_3.png) no-repeat;
		background-position: right 100%;
		background-size: 300px;
	}
		.ls-4 .design-text{
			position: relative;
			border-width: 0;
			margin-bottom: 30px;
		}
		.ls-4 .draw-house img{
			width: 100%;
		}
		.ls-4 .section-content p{
			line-height: 24px;
		}
		.ls-4 .flag-img:not(:last-of-type){
			margin-bottom: 20px;
		}
		.ls-4 .flag-img img{
			width: 100%;
		}

	.ls-5{
		background: url(../../image/s5_bg.png) no-repeat;
		background-position: center center;
		background-size: cover;
	}
		.ls-5 .pc{
			height: auto;
			margin-bottom: 10px;
		}
		.ls-5 .pc>div{
			height: 100%;
			position: relative;
			overflow: hidden;
			padding-left: 80px;
		}
		.ls-5 .pc-1 > div{background-color: #5a5a5a;}
		.ls-5 .pc-2 > div{background-color: #555555;}
		.ls-5 .pc-3 > div{background-color: #4a4a4a;}
		.ls-5 .pc-4 > div{background-color: #444444;}
		.ls-5 .pc-5 > div{background-color: #3a3a3a;}
		.ls-5 .pc-6 > div{background-color: #333333;}
		.ls-5 .pc-7 > div{background-color: #2a2a2a;}
		.ls-5 .pc-8 > div{background-color: #222222;}
		.ls-5 .pc-9 > div{background-color: #1a1a1a;}
		.ls-5 .pc-10 > div{background-color: #111111;}
		.ls-5 .pc-11 > div{background-color: #0a0a0a;}
		.ls-5 .pc-12 > div{background-color: #000000;}

		.ls-5 .process-index{
			position: absolute;
			opacity: 0.15;
		    width: auto;
		    height: 100%;
		    top: 0;
		    right: 0;
		    left: auto;
		    margin-top: -15%;
		    margin-left: auto;
		    margin-right: -5%;
		}
			.ls-5 .process-index img{
				width: 100%;
			}
		.ls-5 .process-icon{
			position: absolute;
			left: 15px;
			top: 15px;
			width: 50px;
			height: 50px;
			padding: 5px;
			border: 1px solid #c9b071;
		}
			.ls-5 .process-icon img{
				width: 100%;
				vertical-align: top;
			}
		.ls-5 .process-item{
			padding: 15px 0 5px 0;
			margin-bottom: 5px;
			position: relative;
			border-bottom: 1px solid #c9b071;
		}
			.ls-5 .process-item:before{
				content: none
			}
		.ls-5 .process-des{
			position: relative;
			padding: 0;
			margin-bottom: 15px;
		}
		footer{
			padding: 30px 0 0;
		}

			footer .footer-box{
				display: inline-block;
				text-align: left;
    		min-width: 200px;
			}
			footer .footer-title{
				margin-bottom: 20px;
			}
			footer .footer-item{
				margin-bottom: 20px;
			}
			footer .footer-item span{
				display: inline-block;
				vertical-align: middle;
			}
			footer .footer-item svg{
				width: 16px;
				height: 16px;
				vertical-align: top;
				margin-right: 5px;
			}
			footer .footer-item a:hover{
				color: #FFF;
				text-decoration: none;
			}
			footer .copy-right{
				height: 28px;
				margin-top: 20px;
				margin-bottom: 80px;
				transform: scale(0.7);
				transform-origin: center;
			}


		.contact-nav{
			position: fixed;
			width: 100%;
			height: 50px;
			bottom: 0px;
			left: 0;
			z-index: 2;
			background: rgba(0,0,0,.7);
			text-align: right;
		}
			.contact-nav-box{
				display: inline-block;
				vertical-align: top;
				bottom: 20px;
				left: 0;
				padding: 0 10px;
				text-align: right;
			}
				.contact-title{
					position: relative;
				    display: inline-block;
				    vertical-align: top;
					top: 0;
					text-align: left;
					padding: 11px 0;
				}
					.contact-title > div{
						white-space: nowrap;
						font-size: 12px;
						height: 14px;
					}
				.contact-nav-box ul.nav{
					display: inline-block;
				}
				.contact-nav-box ul.nav li{
					display: inline-block;
				}
				.contact-nav-box .nav-link{
					padding: 5px;
					text-align: center;	
				}
				.contact-nav-box .nav-link svg{
					transition: all 1.2s;
					-webkit-transition: all 1.2s;
					opacity: 1;
				}
				.contact-nav-box .nav-link.shine svg{
					opacity: 0.5;
				}
				.contact-nav-box .nav>li:not(:last-of-type){
					margin: 0 10px 0 0;
				}
					.contact-nav-box .nav-link:hover{
						color: #000;
					}
					.contact-nav-box svg{
						width: 40px;
						height: 40px;
						vertical-align: top;
					}
					.contact-nav-box svg > *{
						fill: currentColor;
					}