/*-------------------------*/
/* $Header
---------------------------*/
@media(max-width:1402px){
	.navbar{
		margin-left:20px;
		margin-right:20px;
	}
	.menu__item{
		padding:40px 18px;
		letter-spacing:2px;
	}
	.header--scrolling .menu__item{
		padding:20px 18px;
	}
}
@media(max-width:1084px){
	.navbar{
		margin-left:10px;
		margin-right:10px;
	}
	.navbar__logo img{
		padding-top:40px;
		width:160px;
	}
}
@media(max-width:1022px){
	.menu__item,
	.header--scrolling .menu__item{
		padding:20px 16px;
		letter-spacing:1px;
	}
	.navbar__logo img,
	.header--scrolling .navbar__logo img{
		padding-top:20px;
		width:160px;
	}
}
@media(max-width:1480px){
	.navbar__logo img,
	.header--scrolling .navbar__logo img{
		padding-top:12px;
		width:160px;
	}
}
@media(max-width:768px){
	.popup-nav .nav__menu{
		margin-top:140px;
	}
}
@media(max-width:600px){
	.menu-toggle{
		right:-10px;
	}
	.phone-icon{
		display:block;
		right:40px;
	}
}
@media(max-width:439px){
	.phone-icon{
		right:20px;
	}
	.navbar__logo img,
	.header--scrolling .navbar__logo img{
		left:-16px;
		padding-top:16px;
		width:140px;
	}
	#overlay:target{
		width:64%;
	}
	.popup-nav .nav__menu{
		margin-top:100px;
	}
	.menu-toggle{
		top:8px;
		right:-22px;
	}
	.popup-close{
		top:8px;
		right:12px;
		width: 50px;
		height: 50px;
		padding: 12px;
	}
}
@media(max-width:340px){
	#overlay:target{
		width:70%;
	}
}
/*-------------------------*/
/* $Home
---------------------------*/
@media(max-width:1402px){
	.banner-text{
		height:240px;
	}
	.banner-text-inner{
		top:22%;
	}
}
@media(max-width:1320px){
	.banner-text-inner{
		width:340px;
		top:26%;
	}
	.banner-text{
		width:560px;
		height:240px;
	}
	.form:after{
		width:40px;
		height:40px;
	}
}
@media(max-width:1280px){
	.banner-text{
		width:480px;
		height:200px;
		top:60%;
	}
	.form .color--secondary{
		font-size:30px;
		letter-spacing:4px;
	}
	.form .color--black{
		font-size:22px;
		letter-spacing:4px;
	}
}
@media(max-width:1137px){
	.nav-contact{
		font-size:26px;
		padding:0 10px;
		padding-left:14px;
	}
	.nav-contact:before{
		height:360px;
	}
}
@media(max-width:1060px){
	.banner-text-inner p{
		margin-top:6px;
		font-size:30px;
		line-height:34px;
	}
	.banner-text{
		width:420px;
		height:160px;
	}
	.form:after{
		width:40px;
		height:40px;
		right:10px;
	}
}
@media(max-width:1022px){
	.nav-contact:before{
		height:300px;
	}
}
@media(max-width:600px){
	.home .banner:after{
		bottom:-100px;
		background-size:600px;
		width:102%;
		height:200px;
	}
	.nav-contact{
		top:10%;
	}
	.banner-text-inner{
		width:280px;
		left:12%;
		top:14%;
	}
	.banner-text{
		width:340px;
		height:120px;
		bottom:0;
		margin-top:40px;
	}
	.form hr{
		width:80%;
	}
	.form .color--secondary{
		font-size:24px;
		letter-spacing:2px;
	}
	.form .color--black{
		font-size:18px;
		letter-spacing:2px;
	}
	.form:after{
		width:30px;
		height:30px;
	}
}
@media(max-width:466px){
	.banner-text-inner{
		width:200px;
		left:12%;
		top:14%;
	}
	.home .banner{
		background-position-x:-200px;
	}
	.nav-contact{
		font-size:20px;
		padding-left:6px;
		padding-right:0;
	}
}
@media(max-width:409px){
	.nav-contact:before{
		height:200px;
	}
	.banner-text-inner p{
		font-size:26px;
		line-height:28px;
		margin-left:-16px;
	}

}
@media(max-width:341px){
	.banner-text{
		width:100%;
		top:54%;
	}
}
@media(max-width:337px){
	.banner-text-inner p{
		font-size:24px;
		line-height:26px;
	}
}
/*-------------------------*/
/* $About
---------------------------*/
@media(max-width:1171px){
	.about .phone-block{
		display:block;
	}
	.about .phone-none{
		display:none;
	}
}
@media(max-width:1053px){
	.about-text{
		padding-top:20px;
	}
}
@media(max-width:991px){
	.about .row{
		padding:0 60px;
	}
}
@media(max-width:768px){
	.about{
		padding-top:0;
	}
	.about .phone-none-top{
		display:none;
	}
	.about .phone-block{
		display:none;
	}
	.about .phone-none{
		display:block;
	}
	.about .col-md-5{
		width:100%;
	}
	.phone-car{
		display:block;
		position:absolute;
		right:0;
		bottom:-6%;
		float:right;
	}
	.phone-car img{
		width:30%;
		float:right;
	}
	.phone-car:after{
		content:"";
		position:absolute;
		top:-80%;
		right:0;
		background-image:url('../images/home/官網首頁-02.png');
		background-repeat:no-repeat;
		background-size:200px;
		background-position:center;
		width:220px;
		height:120px;
		animation:wave 2s linear infinite both;
	}
	@keyframes wave{
		0%{transform:rotateX(20deg);}
		100%{transform:rotateX(-20deg);}
	}
}
@media(max-width:720px){
	.phone-car:after{
		display:none;
	}
}
@media(max-width:547px){
	.about{
		padding-top:60px;
	}
	.about .row{
		padding:0 20px;
	}
	.phone-car{
		bottom:-10%;
	}
}
@media(max-width:440px){
	.about .row{
		padding:0 10px;
	}
	.about-text-inner:before{
		transform:rotate(3deg);
	}
	.about .phone-block-sm{
		display:block;
	}
	.about .phone-block{
		/*display:block;*/
	}
	.about .phone-none{
		display:none;
	}
	.about .about-icon{
		width:28px;
		margin-left:2px;
	}
}
/*-------------------------*/
/* $Quote
---------------------------*/
@media(max-width:1600px){
	.quote{
		margin-bottom:360px;
	}
	.quote:after{
		bottom:-500px;
		width:100%;
		height:420px;
	}
}
@media(max-width:1440px){
	.quote-banner{
	    height:70vh;
	}
}
@media(max-width:1027px){
	.quote{
		margin-bottom:280px;
	}
	.quote:after{
		bottom:-420px;
		width:100%;
		height:420px;
		background-size:1200px;
	}
}
@media(max-width:1024px){
	.quote-banner{
		padding-bottom:0px;
	    height:30vh;
	}
	.quote .img-inner{
		width:40%;
		right:4%;
	}
	.quote:after{
		bottom:-300px;
		width:100%;
		height:280px;
		background-size:1200px;
	}
}
@media(max-width:1024px){
	.quote{
		margin-bottom:200px;
	}
}
@media(max-width:420px){
	.quote-banner{
	    height:50vh;
	    background-position-x:-160px;
	}
	.quote .img-inner{
		width:60%;
		right:4%;
	}
}
@media(max-width:414px){
	.quote-banner{
	    background-position-x:-240px;
	}
}
@media(max-width:413px){
	.quote-banner{
	    background-position-x:-160px;
	}
}
@media(max-width:375px){
	.quote-banner{
		padding-bottom:0px;
	    height:36vh;
	}
	.quote:after{
		bottom:-300px;
		width:100%;
		height:280px;
		background-size:1200px;
	}
}
/*-------------------------*/
/* $Tool
---------------------------*/
@media(max-width:1376px){
	.wire .img-inner{
		top:160px;
	}
}
@media(max-width:1366px){
	.house .img-inner{
		width:60%;
		top:-100px;
	}
	.card .img-inner{
		margin-top:200px;
	}
	.calendar .img-inner{
		top:0px;
	}
}
@media(max-width:1141px){
	.tool{
		padding-bottom:100px;
	}
	.wire .img-inner{
		top:240px;
	}
	.wire .img-inner:after{
		background-size:160px;
	}	
}
@media(max-width:1072px){
	.ipad .img-inner{
		top:80px;
	}
}
@media(max-width:1024px){
	.house .img-inner{
		top:0px;
	}
	.paper-bottom{
		top:80px;
	}
	.paper-top{
		top:28%;
		width:106%;
	}
	.wire .img-inner{
		width:80%;
	}
	.wire .img-inner:after{
		background-size:100px;
		width:100%;
		height:100%;
		transform:rotate(-70deg);
	}
}
@media(max-width:800px){
	.tool-text h2{
		font-size:30px;
		margin-top:10px;
		margin-bottom:10px;
	}
	.tool-text-inner p{
		margin-top:6px;
	}
	.ipad .img-inner{
		top:80px;
		left:-60px;
	}
	.calendar .img-inner{
		top:140px;
	}
}
@media(max-width:740px){
	.tool{
		padding-bottom:220px;
	}
	.tool-text-inner{
		width:60%;
	}
	.ipad .img-inner{
		top:200px;
		left:-40px;
	}
	.wire .img-inner{
		top:300px;
	}
	.calendar .img-inner{
		top:200px;
	}
}
@media(max-width:602px){
	.tool{
		padding-bottom:0;
		height:60vh;
	}
	.paper-top{
		top:50%;
		width:100%;
	}
	.house .img-inner{
		top:100px;
	}
	.wire .img-inner{
		left:-42%;
	}
	.calendar .img-inner{
		top:260px;
	}
	.ipad .img-inner{
		left:-8px;
	}
	.row-bottom{
		margin-top:200px;
	}
}
@media(max-width:459px){
	.wire .img-inner:after{
		background-size:68px;
	}
	.paper-top{
		top:140px;
	}
	.paper-bottom{
		top:140px;
	}
}
@media(max-width:420px){
	.wire .img-inner{
		top:260px;
	}
}
@media(max-width:413px){
	.tool-text-inner{
		width:80%;
	}
}
@media(max-width:375px){
	.tool-text-inner{
		top:0;
	}
	.paper-top{
		width:88%;
	}
	.calendar .img-inner{
		top:200px;
	}
}
@media(max-width:347px){
	.wire .img-inner:after{
		background-size:50px;
	}
}
@media(max-width:320px){
	.wire .img-inner{
		top:240px;
		left:-30%;
	}
}
/*-------------------------*/
/* $Contact
---------------------------*/
@media(max-width:1141px){
	.logo-title{
		padding:100px 0;
	}
	.logo-title .img-inner{
		width:360px;
		padding-bottom:20px;
	}
	.logo-title h3{
		margin-top:20px;
		letter-spacing:10px;
		font-size:20px;
	}
}
@media(max-width:945px){
	.contact .col-lg-4{
		padding:6px;
	}
	.contact .bg-color--secondary{
		padding-top:40px;
		padding-bottom:40px;
		/* height:540px; */
	}
}
@media(max-width:768px){
	.contact h3{
		font-size:24px;
		letter-spacing:0;
	}
	.contact h5{
		font-size:18px;
	}
	.contact p{
		margin-top:10px;
		margin-bottom:10px;
	}
	.form-info h5{
		margin-top:10px;
		margin-bottom:10px;
	}
}
@media(max-width:767px){
	.contact .bg-color--secondary{
		height:auto;
		width:100%;
	}
	.contact .col-lg-4{
		padding:10px 20px;
	}
	.time{
		left:0;
		transform:translateX(0);
		display:block;
		text-align:center;
	}
	.position{
		text-align:right;
		padding-right:40px;
	}
}
@media(max-width:470px){
	.logo-title{
		padding:80px 0;
	}
	.logo-title .img-inner{
		width:260px;
		padding-bottom:10px;
	}
	.logo-title h3{
		margin-top:10px;
		letter-spacing:4px;
		font-size:18px;
	}
}
@media(max-width:430px){
	.contact{
		padding-top:40px;
		padding-bottom:30px;
	}
}
/*contact-sub*/
@media(max-width:1117px){
	.contact-sub h3{
		font-size:26px;
		line-height:30px;
	}
	.contact-sub .linea .img-inner{
		left:-30px;
	}
}
@media(max-width:991px){
	.contact-sub p{
		margin-bottom:0;
		margin-top:0;
	}
	.contact-sub h3{
		margin-bottom:6px;
	}
	.contact-sub .linea .img-inner{
		left:-46px;
	}
	.contact-inner{
		margin-bottom:40px;
	}
}
@media(max-width:768px){
	.contact-sub .img-inner{
		width:40%;
	}
}
@media(max-width:500px){
	.contact-sub .phone-none{display:none;}
	.contact-sub .phone-block{display:block;}
}
@media(max-width:430px){
	.contact-sub h3{
		font-size:24px;
		line-height:28px;
	}
}
@media(max-width:380px){
	.contact-sub .linea .img-inner{
		left:-36px;
	}
	.contact-sub p{
		text-align:left;
	}
}