@media only screen and (max-width: 1366px){
	.footer-box{
		width: 95%;
	}
	.works-box,
	.service-list-box{
		width: 1200px;
	}
	.works-list,
	.service-list{
		width: 360px;
	}
	.service-img-box{
		height: 310px;
	}
	.works-list-img-box{
		height: 440px;
	}
	.banner-box{
		width: 1200px;
	}
	.banner-box{
		height: 616px;
	}
	.index-works-list{
		height: 380px;
	}
	.index-about-box{
		width: 1200px;
	}

	.index-banner-box{
		width: 1200px;
	}
	.index-banner-box, 
	.index-banner-list, 
	.index-banner-list span, 
	.index-video-box, 
	.index-video, 
	.index-video-bg{
		height: 600px;
	}
	#index .header2.header-style2 .header-box, .header-style2 .header-box{
		width: 1200px;
	}
	.service-page-box{
		width: 1200px;
	}
}
@media only screen and (max-width: 1280px){

	.header-style2 .header-menu ul{
		width: 600px;
	}
	#index.open .header-style2 .header-menu ul{
		width: 600px;
	}
	#index.open .header-style2 .header-menu-list-box> li{
		width: 50%;
	}
}
@media only screen and (max-width: 1200px){
	#index .header2.header-style2 .header-box, .header-style2 .header-box{
		width: 1000px;
	}
	.index-about-info{
		width: 1000px;
	}
	#index .header2.header-style2 .header-box, .header-style2 .header-box{
		width: 95%;
	}
	.works-box{
		width: 1000px;
	}
	.works-list-box .works-list:nth-child(3n+2){
		margin: 0 20px;
	}
	.works-list{
		width: 320px;
		margin-bottom: 20px;
	}
	.works-list-img-box{
		height: 320px;
	}
	.works-class{
		padding-right: 20px;
	}
	.works-class a{
		width: 140px;
	}
	.service-list-box{
		width: 1000px;
	}
	.service-list-box .service-list:nth-child(3n+2){
		margin: 0 20px;
	}
	.service-list{
		width: 320px;
		margin-bottom: 20px;
	}
	.service-img-box{
		height: 267px;
	}
	.service-page-box{
		width: 1000px;
	}
	.works-page-box{
		width: 1000px;
	}
	.works-page-img{
		height: 667px;
	}
	.banner-box{
		height: 540px;
	}
	#index.open .header-style2 .header-menu-list-box> li{
		width: 25%;
	}
	.index-banner-box{
		width: 1000px;
	}
	.index-banner-box, 
	.index-banner-list, 
	.index-banner-list span, 
	.index-video-box, 
	.index-video, 
	.index-video-bg{
		height: 540px;
	}
	.footer-map-box{
		width: 30%;
	}
	.footer-phone{
		width: 20%;
	}
	.footer-company{
		width: 30%;
	}
	.footer-menu{
		width: 20%;
	}
}
@media only screen and (max-width: 1000px){
	.footer-map-box,
	.footer-phone,
	.footer-company,
	.footer-menu{
		width: 100%;
		display: block;
		border-right: 0;
		height: inherit;
		padding: 0;
	}
	.footer-phone,
	.footer-company,
	.footer-menu{
		margin-bottom: 10px;
	}
	.index-about-logo{
		display: none;
	}
	.header-line{
		display: none;
	}
	.header-link i{
		color: #FFF;
	}
	.header-link-box{
		top: 0;
	}
	.header2 .header-link-box{
		top: 0;
	}
	.header-link:hover{
		color: #FFF;
	}
	.rwd-index-logo-box{
		margin-top: 75px;
	}
	.index-banner-box{
		margin-top: 0;
	}
	.rwd-index-logo-box{
		display: block;
		width: 185px;
		margin-left: 10px;
		margin-bottom: 10px;
	
	}
	.header-logo{
		display: none;
	}
	.dress-info-list{
		margin-bottom: 10px;
	}
	.index-about-box{
		width: 1000px;
	}
	.index-banner-box, .index-banner-list, .index-banner-list span, .index-video-box, .index-video, .index-video-bg{
		height: 475px;
	}

	.header-products .header-menu-title:after{
		position: absolute;
	}
	.header-products.active .header-menu-title:after{
		color: #000;
	}
	.header-menu-title:hover{
		color: #FFF!important;
	}
	.header-menu li.active .header-menu-title{
		color: #000;
		font-weight: bold;
	}
	.checkbox-input{	
    	border: 1px solid #000;
	}
	.query-checkbox:checked + .checkbox-input{
		background-color: #000;
	}
	.query-date,
	.query-checkbox-text,
	.query-contact-text,
	.query-contact-textarea-box{
		border-bottom: 1px solid #000;
	}
	#query .button input{
		border: 1px solid #000;
	}
	.query-info-box,
	.query-list-box input,
	.contact-form-title,
	.query-box .service-title,
	.query-contact-textarea{
		color: #000;
	}
	.query-date::-webkit-input-placeholder { color: #000; font-family: "微軟正黑體", "Microsoft JhengHei";}
	.query-date:-moz-placeholder { color: #000; font-family: "微軟正黑體", "Microsoft JhengHei";}
	.query-date::-moz-placeholder { color: #000; font-family: "微軟正黑體", "Microsoft JhengHei";}
	.query-date:-ms-input-placeholder { color: #000; font-family: "微軟正黑體", "Microsoft JhengHei";}
	.query-box{
		background-image: none;
	}

	#index .header-style2 .header-menu-title{
		font-size: 16px;
	}
	.index-works-list{
		height: 275px;
	}
	.index-about-info{
		width: 750px;
	}

	.index-works-list{
   	 	margin-bottom: 20px;
	}
	.works-list-box{
		width: 750px;
		margin: 0 auto;
		margin-top: 20px;
		max-width: 100%;
	}
	.rwd-works-class{
		width:100%;
		display: block;
		border: 1px solid #dddddd;
		margin: 0 auto;
		box-sizing: border-box;
		height: 45px;
		position: relative;
		line-height: 45px;
		text-align: center; 
	}
	.rwd-works-class:after{
		content: '▼';
		display: block;
		font-size: 16px;
		position: absolute;
		top: 0;
		right: 3%;
		pointer-events: none;
	}
	.works-class-box{
	
		display: block;
		border: 1px solid #dddddd;
		border-top: 0;
		box-sizing: border-box;
	}
	.works-class{
		width: 100%;
		border-bottom: 1px solid #ddd;
		padding: 0;
		box-sizing: border-box;
	}
	.works-class-box .works-class:last-child{
		border-bottom: 0;
	}
	.works-class a{
		width: 100%;
		border: 0;
	}
	.works-class-box{
		display: none;
	}
	.works-box,
	.works-page-box,
	.service-list-box,
	.service-page-box{
		width: 750px;
	}

	.works-list,
	.service-list{
		width: 360px;
	}
	.works-list-img-box{
		height: 360px;
	}
	.works-list-box .works-list:nth-child(3n+2),
	.service-list-box .service-list:nth-child(3n+2){
		margin: 0;
	}
	.works-list-box .works-list:nth-child(even),
	.service-list-box .service-list:nth-child(even){
		margin-left: 30px;
	}
	.works-page-img{
		height: 500px;
	}
	.service-img-box{
		height: 300px;
	}
	.query-info-box{
		width: 95%;
	}
	.query-designer .query-checkbox-box{
		min-width: inherit;
	}
	.query-contact{
		width: 49%;
	}
	.contact-info{
		width: 100%;

	}
	.contact-map-box{
		width: 100%;
		position: relative;
		top:inherit;
		box-sizing: border-box;
		border: 0;
		height: 300px;
	}
	.contact-info-box.active .contact-info{
		border: 0;
	}
	.contact-info{
		width: 520px;
		margin: 0 auto;
	}
	.contact-info-box{
		margin-top: 0;
	}
	.contact-info-form li{
		width: 100%;
	}
	.index-about-bg,
	.index-about-info-box,
	.index-about-title-box,
	.index-about,
	.index-works-title-ch,
	.index-works-list,
	.works-title,
	.works-list,
	.works-class-box,
	.works-page-date,
	.back-button,
	.works-page-img,
	.edit-box,
	.service-page-title,
	.service-title,
	.query-p,
	.query-list,
	.button,
	.contact-map-box,
	.contact-info,
	.query-contact,
	.query-contact-textarea-box{
		opacity: 1;
		animation: none!important;		
	}
	.index-about-bg{
		display: none;
	}

	.contact-info{
		border: 0;
	}
	#index .header2 .rwd-menu{
		display: block;
	}
	#index .header2 .header-logo,
	.header-logo{
		display: block;
	}
	#index .header2.header-style2 .header-menu-box,
	.header-menu-box{
		display: none;
	}
	#index .header-style2.header2,
	.header-style2.header2{
		animation: none;
		background-color:#f09da2
	}
	#index .header2.header-style2 .header-box, .header-style2 .header-box{
		width: 100%;
	}
	.header-logo,
	#index .header-logo{
		
		transition: all .3s linear;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.header-logo-title{
		display: inline-block;
		width: 140px;
		vertical-align: middle;
		
	}
	.header-logo img:nth-child(1),
	#index .header-logo img:nth-child(1){
		display: none;
	}
	#index .header-style2.header2 .header-menu, .header-menu{
		display: table-cell;
	    vertical-align: middle;
	    text-align: center;
	    width: 100%;
	    float: none;
	}
	#index .header2.header-style2 .header-menu-box.active, .header-menu-box.active{
		display: table;
		pointer-events: auto;
   	 	transform: scale(1);
   	 	height: 100vh;
   	 	position: absolute;
   	 	background-color:  rgba(240, 157, 162, 0.9);
	}
	#index .header2 .header-menu-logo{
		display: none;
	}
	.header-style2 .header-menu> li{
		display: block;
	}
	#index .header-style2.header2 .header-menu> li, .header-style2 .header-menu> li{
		display: block;
		padding: 0;
	}
	#index .header2.header-style2 .header-menu-title, .header2.header-style2 .header-menu-title{
		color: #FFF;
	}
	#index .header2 .header-logo,
	#index .header2 .rwd-menu{
		display: block;
	}
	.header-style2 .header-menu-box{
		display: none;
	    pointer-events: auto;
	    transform: scale(1);
	    height: 100vh;
	    position: absolute;
	    background-color:  rgba(240, 157, 162, 0.9);
	}
	.header-style2 .header-menu-box.active{
		display: table;
	}
	.header-menu-logo{
		display: none;
	}
	.header-style2{
		background-color:#f09da2;
	}
	.header-style2 .header-menu-box{
		width: 100%;
		top: 0;
		height: 100vh;
	}
	.header-menu-title{
		color: #FFF;
	}
	.header-products .header-menu-title:after{
		color: #FFF
	}
	.header-products .header-menu-title{
		margin-bottom: 0;
	}
	#index .header-style2.header2 .header-menu, .header2 .header-menu{
		width: 100%;
		display: table-cell;
		vertical-align: middle;
		float: none;
	}
	.header-menu-list-box> li,
	#index .header2.header-style2 .header-menu-list-box> li,
	.header-menu-list-box> li{
	    height: 40px!important;
	    line-height: 40px!important;
	    width: 50%!important;
	}
	.header-menu-list-box> li, #index .header2.header-style2 .header-menu-list-box> li, .header-menu-list-box> li{
		display: inline-block;
	}
	.header-style2{
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		height: 69px;
	}
	
	.rwd-menu span{
		background-color: #FFF;
	}
	.header-style2 .rwd-menu {
	    display: block;
	    position: absolute;
	    z-index: 99999;
	    top: 5px;
	    left: 5px;
	    width: 50px;
	    height: 50px;
	    padding: 15px 0;
	    box-sizing: border-box;
	    cursor: pointer;
	    transition: all .3s linear;
	}
	.header-link span{
		display: none;
	}
	.header-style2 .rwd-menu span {
	    width: 40px;
	    height: 3px;
	    display: block;
	    background-color: #FFF;
	}
	.header-logo{
		margin-left: 20px;
		display: none;
	}
	.header-style2 .header-menu ul,
	#index .header-style2.header2 .header-menu ul, .header-menu ul{
		position: relative;
	}
	.header-menu-list-box{
		background-color: transparent;
		border: 0;
	}
	.header-menu-list-box> li{
		border: 0;
		color: #FFF;
	}

	.header-menu-list-box a:after{
		border: 0;
	    content: '▼';
	    font-size: 16px;
	    color: #FFF;
	    top: 0;
	    display: none;
	}
	.banner-box{
		margin-top: 0px;
	}
	.index-works-line, .works-line{
		transform: scale(1);
	}
	.header-menu-title:hover{
		color: #FFF;
	}
	#index .header-logo{
		width: inherit;
	}
	#index .header-style2{
		background-color: #f09da2;
	}
	.header-link-box{
		width: 100%;
	}
	.header-link{
		font-size: 40px;
		color: #FFF;
		position: absolute;
	}
	.header-link-box .header-link:last-child{
	
		right: 10px;
	}
	.header-link-box .header-link:first-child{
		margin-right: 0;
		left: calc(50% - 20px);
	}
	#index .header-style2 .header-menu-title,
	.header-style2 .header-menu-title{
		font-size: 16px;
	}
	.header-menu-title,
	#index .header-style2.header2 .header-menu-title,
	.header2 .header-menu-title{
		height: 50px;
		line-height: 50px;
	}
}
@media only screen and (max-width: 768px){
	.query-box{
		background-image: none;
	}
	.index-works-list-box{
		height: inherit;
		width: 750px;
		margin: 0 auto;
	}
	.index-works-list{
		width: 360px;
		height: 360px;
		display: inline-block;
		margin: 0;
		margin-bottom: 30px

	}
	.index-works-list-box .index-works-list:nth-child(even){
		margin-left: 30px;
	}
	.banner-box,
	.index-banner-box, 
	.index-banner-list, 
	.index-banner-list span, 
	.index-video-box, 
	.index-video, 
	.index-video-bg{
		height: 370px;
	}

}
@media only screen and (max-width: 750px){
	.works-box, .works-page-box, .service-list-box, .service-page-box{
		width: 550px;
	}
	.works-page-img{
		height: 368px;
	}
	.works-page-img{
		margin-top: 0;
	}
	.index-works-list-box{
		width: 550px;
	}
	.index-works-list,
	.works-list,
	.works-list, .service-list{
		width: 267px;
	}
	.index-works-list,
	.works-list-img-box{
		height: 267px;
	}
	.index-works-list-box .index-works-list:nth-child(even),
	.works-list-box .works-list:nth-child(even),
	.service-list-box .service-list:nth-child(even){
	    margin-left: 15px;
	}
	.service-img-box{
		height: 222px;
	}
	.index-about-info{
		width: 550px;
	}
	.index-about-title-ch span:nth-child(1){
		font-size: 24px;
	}
	.index-about-title-ch span:nth-child(2),
	.index-about-title-ch span:nth-child(3){
		font-size: 24px;
	}
	.index-about-title-en span:nth-child(1),
	.index-about-title-en span{
		font-size: 26px;
	}
	.index-about-title-ch span:nth-child(3){
		padding: 0 5px;
	}
	
	#index.open .header-style2 .header-menu ul{
		width: 550px;
	}
	.index-about-title-ch{
		margin-bottom: 5px;
	}
	.query-checkbox-box{
		padding-right: 0;
	}
	.query-designer> .query-checkbox-box{
		display: block;
	}
}
@media only screen and (max-width: 550px){
	.header-link{
		font-size: 21px;
	}
	.header-style2 .rwd-menu{
		top: 0;
	}
	.header-style2{
		height: 35px;
	}
	.rwd-menu span:nth-child(even){
		margin: 5px auto;
	}
	.rwd-menu span:nth-child(4){
		top: -16px;
	}
	.header-style2 .rwd-menu{
		padding: 6px 0;
	}
	.header-style2 .rwd-menu{
		top: 0;
	}
	.rwd-menu span:nth-child(even){
		margin: 5px auto;
	}
	.rwd-index-logo-box{
		margin-top: 50px;
	}
	.index-works-list{
		width: 100%;
		height: 415px;
	}
	.index-works-list-box .index-works-list:nth-child(even), .works-list-box .works-list:nth-child(even), .service-list-box .service-list:nth-child(even){
		margin-left: 0;
	}
	.index-banner-box{
		margin-top: 0;
	}
	.rwd-index-logo-box{
		margin-bottom: 20px;
	}
	.index-banner-box, .index-banner-list, .index-banner-list span, .index-video-box, .index-video, .index-video-bg{
		height: 350px;
	}
	.index-about-info{
		margin: 35px auto;
		margin-bottom: 0;
	}

	.query-checkbox-box{
		display: block;
		letter-spacing: 0;
	}

	.query-ps{
		font-size: 12px;
		letter-spacing: 0;
		color: #555;
	}
	.query-p{
		letter-spacing: 0;
	}
	.query-block{
		display: block;
	}

	.wheel{
		display: none;
	}
	.index-slong-ch{
		font-size: 14px;
	}
	.index-about-info{
		width: 100%;
	}
	.index-about-title-en{
		display: block;
	}

	.index-about-title-box{
		display: block;
		text-align: center;
	}
	.index-about-title-ch span:nth-child(3){
		display: none;
	}
	.index-about-title-box{
		position: static;
	}
	.index-about{
		display: block;
		text-align: center;
	}

	.rwd-menu span:nth-child(even){
		margin: 5px auto;
	}
	.header-style2 .rwd-menu span{
		width: 30px;
	}
	#index .header-style2 .rwd-menu,
	.header-style2 .rwd-menu{
		top: 2px;
	}
	.rwd-menu span:nth-child(4){
		top: -16px;
	}
	.index-works-list-box{
		width: 350px;
	}

	#index.open .header-style2 .header-menu ul,
	.header-style2 .header-menu ul{
		width: 100%;
	}
	.index-works-title-box{
		margin: 20px 0;
	}
	.banner-box{
		margin-top: 0px;
	}
	.banner-box,
	.index-banner-box, 
	.index-banner-list, 
	.index-banner-list span, 
	.index-video-box, 
	.index-video, 
	.index-video-bg{
		height: 260px;
	}
	.header-menu-list-box> li,
	#index .header2.header-style2 .header-menu-list-box> li, .header-menu-list-box> li{
		
		margin: 0 auto;
	}
	#index.open .header-menu-list-box a:after,
	.header-menu-list-box a:after{
		font-size: 11px;
	}
	.works-box, .works-page-box, .service-list-box, .service-page-box{
		width: 350px;
	}
	.back-button{
		display: block;
		float: right;
		margin: 10px 0;
	}
	.works-title{
		width: 100%;
		display: block;
		margin-top: 5px;
	}
	.works-page-date{
		width: 100px;

	}
	.works-line{
		clear:both;
	}
	.works-page-img {
	    height: 235px;
	}
	.service-img-box{
		height: 141px;
	}
	.service-list-title{
		font-size: 14px;
	}
	.service-title-box{
		padding: 20px 0;
	}
	.query-list-box,
	.query-list{
		width: 100%;
	}
	.query-photography .query-checkbox-box{
		min-width: inherit;
		padding-right: 0;
	}
	.query-contact{
		width: 100%;
		display: block;
		float: none;
	}
	.query-contact-box .query-contact:nth-child(even){
		float: none;
	}
	.service-page-title{
		display: block;
		width: 100%;
	}
	.contact-info-box{
		margin-bottom: 50px;
	}
	.footer-logo{
		width: 170px;
	}
	.index-about-info-p span{
		display: block;
	}
	.index-about-info-p{
		padding-bottom: 0;
	}

	.query-p span{
		display: block;
	}
	.index-about-logo{
		width: 80px;
		margin-bottom: 20px;
	}
	.index-about-info{
		padding: 30px 0;
	}
	.service-page-box{
		padding-top: 0;
	}
	.service-page-title{
		width: inherit;
		float: left;
		padding-right: 5px;
		box-sizing: border-box;
	}
	.edit-box{	
		overflow: hidden;
	}
	 
	.works-page-box, 
	.service-page-box{
		padding: 0 5px;
		box-sizing: border-box;
	}
	.index-works-list, .works-list, .works-list, .service-list{
		width: 100%;
	}
	.service-img-box{
		height: 185px;
	}
	.index-works-list, .works-list-img-box{
		height: 410px;
	}
}

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

	.index-works-list-box{
		width: 100%;
	}
	.index-works-list, .works-list-img-box{
		height: 155px;
	}
	.index-works-list, .works-list, .works-list, .service-list{
		width: calc(50% - 5px);
	}
	.query-p{
		font-size: 15px;
	}
}