@media all and (min-width: 768px){
	.section-title{
		margin: 70px 0 50px 0;
	}

	.header-link{
		top: 0;
		width: auto;
		background: transparent;
	}
		.header-link .nav>li.with-sub{
			border-width: 0 0 2px 0;
		}
		.header-link .nav>li.with-sub a{
			padding: 15px 15px 13px 15px;
		}
		.header-link .nav .dropdown-menu{
			top: 100%;
			right: 0;
			background-size: 150px;
		}

	.ls-1-name-en{
		text-align: left;
	}
	.ls-1-name-en,.ls-1-name-tw{
		display: inline;
		text-align: left;
	}

	.ls-2 .container{
		background-position: center top;
	}
		.ls-2 .about-box{
			padding-bottom: 70px;
		}
		.ls-2 .about-box .about-title{
			margin-bottom: 40px;
		}
		.ls-2 .about-box .about-content{
			line-height: 36px;
		}
		.ls-2 .about-box .about-content > div:not(:last-of-type){
			margin: 0;
		}

	.ls-3 .project-pager{
    	width: 66.66666667%;
		left: 16.66666667%;
	}

	.ls-4{
		padding: 70px 0 0;
	}

		.ls-4 .section-title{
			margin: 10px 0 20px 0;
		}
		.ls-4 .design-text{
			padding: 0 20px;
		}

		.ls-4 .design-text>*{
			padding: 0 15px;
		}
		.ls-4 .draw-house{
    		padding-right: 50px;
		}
		.ls-4 .draw-house img{
			width: 120%;
		}
		.ls-4 .section-content p{
			line-height: 36px;
		}
	.ls-5 .pc{
		height: 265px;
		margin-bottom: 30px;
	}
		.ls-5 .pc>div{
			padding: 0;
		}
		.ls-5 .process-item{
			padding: 120px 15px;
			margin-bottom: 0;
			border: 0;
		}
		.ls-5 .process-item:before{
			content: "";
			position: absolute;
			height: 1px;
			top: 50%;
			margin-top: -0.5px;
		    left: 0;
		    right: 110px;
			background-color: #c9b071;
		}
		.ls-5 .process-icon{
			right: 15px;
			left: auto;
		}
		.ls-5 .process-des{
			position: absolute;
			width: 100%;
			bottom: 0;
			padding: 15px;
			margin-bottom: 0;
		}
		.ls-5 .process-index{
		    width: 80%;
		    left: 0;
		    margin-top: -20%;
		    margin-left: -10%;
		}

	footer{
		padding: 70px 0 0;
	}
		footer .footer-title{
			margin-bottom: 20px;
		}
		footer .footer-item:not(:last-of-type){
			margin-bottom: 20px;	
		}
		footer .copy-right{
			margin-bottom: 20px;
			transform-origin: right;
		}


	.contact-nav{
		position: absolute;
		width: 50px;
		top: 50px;
		bottom: 0px;
		height: auto;
		left: auto;
		right: 0;
		text-align: left; 
	}
		.contact-title {
		    position: absolute;
		    display: inline-block;
		    transform-origin: top left;
		    transform: rotate(90deg);
		    margin-left: 40px;
		    top: auto;
		    padding: 0;
		    bottom: 185px;
		    text-align: right;
		}
		.contact-nav-box{
			position: absolute;
			width: 100%;
			bottom: 20px;
			left: 0;
			padding: 0;
		}
		.contact-nav:before,
		.contact-nav:after{
			content: "";
			position: absolute;
			width: 1px;
			left: 50%;
			background-color: #FFF;
		}
		.contact-nav:before{
			top: 0;
			bottom: 230px;
		}
		.contact-nav:after{
			height: 20px;
			bottom: 0px;
		}
		.contact-nav-box svg{
			width: 30px;
			height: 30px;
			height: auto;
			vertical-align: top;
		}
		.contact-nav-box .nav>li:not(:last-of-type){
			margin: 0;
		}
		.contact-nav-box .nav-link{
			padding: 5px 10px;
			text-align: center;
		}
		.contact-nav-box .nav-link:after{
			content: attr(title);
			position: absolute;
			right: 100%;
			width: 0;
			overflow: hidden;
			background-color: #FFF;
			white-space: nowrap;
			height: 100%;
			top: 0;
			font-size: 12px;
			line-height: 14px;
			padding: 14px 0;
			color: #000;
			transition: all 0.2s;
			-webkit-transition: all 0.2s;
		}
		.contact-nav-box .nav-link:hover:after{
			width: 140px;
			padding: 14px 10px;
		}
}
@media all and (min-width: 992px){
	.section-title{
		margin: 90px 0 60px 0;
	}
	.ls-3 .project{
		padding: 0;
		height: 550px;
		margin-bottom: 70px;
		z-index: 1;
	}
	.ls-3 .project-list-item{
		padding: 0 550px 30px 0;
		height: 100%;
	}
	.ls-3 .project-des{
		padding: 0 25px;
		display: inline-block;
		width: 100%;
		vertical-align: middle;
		line-height: 20px;
		position: relative;
	    color: #000;
		background: transparent;
    	margin-top: -55px;
	}
		.ls-3 .project-des .project-des-title{
			margin-bottom: 10px;
		}
		.ls-3 .project-des.show-list p{
			max-height: none;	
		}
		.ls-3 .project-des .des-btn{
			display: none;
		}
		.ls-3 .project-des .project-des-intro{
			max-height: none;
		}
	.ls-3 .project-photo{
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 550px;
		background-color: #000;
		padding-bottom: 0;
	}
		.ls-3 .project-photo .detail-link{
			right: 100%;
			bottom: 0;
			color: #F15A24;
		}
		.ls-3 .project-photo .detail-link:hover,
		.ls-3 .project-photo .detail-link:focus{
			color: #F15A24;
		}
	.ls-3 .project-list-item:before{
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: 0;
		height: 100%;
	}
	.ls-3 .project-photo-list{
		width: auto;
		right: 0px;
		left: 25px;
		padding: 0 0 0 10px;
		height: auto;
	}
		.ls-3 .project-photo-list > li:not(:last-of-type){
			margin: 0 10px 0 0;
		}
	.ls-3 .project-pager{
		position: absolute;
		width: 100%;
		height: 100px;
		top: 50%;
		background-color: #000;
		z-index: 0;
		margin-top: -50px;
    	left: 0;
	}
	.ls-3 .project-pager .pager-btn{
		width: 8.33333333%;
		height: 100%;
		background-color: transparent;
		border: 0;
	}
		.ls-3 .project-pager .pager-btn>*{
			opacity: 0.5;
		}
		.ls-3 .project-pager .pager-btn:hover *{
			opacity: 1;
		}
	.ls-4 .design-text{
		padding: 0 10px;
		position: relative;
		border-width:  1px 0;
		border-style: solid;
		border-color: #FFF;
		margin-top: 70px;
	}
	.ls-4 .design-text:before,.ls-4 .design-text:after{
		content: "";
		position: absolute;
		top: -10px;
		bottom: -10px;
		width: 1px;
		background-color: #FFF;
	}
	.ls-4 .design-text:before{
		left: 10px;
	}
	.ls-4 .design-text:after{
		right: 10px;
	}
	footer .copy-right{
		margin-top: -28px;
	}
}
@media all and (min-width: 1200px){
	.ls-3 .project-des{
		line-height: 24px;
	}
	.ls-3 .project-des .project-des-title{
		margin-bottom: 40px;
	}
}