@media only screen and (max-width: 1680px){}
@media only screen and (max-width: 1366px){}
@media only screen and (max-width: 1280px){
	.vr-img1, .vr-img2{
		width: 95%;
	}
	.materials-list1-box{
		width: 95%;
		padding: 50px 0px;
	}
	.materials-list2-box,
	.materials-list5-box{
		width: 95%;
	}

	.materials-list5-info1{
		padding-bottom: 30px;
	}
	.materials-list5-img1-box span{
		width: 250px;
		height: 280px;
	}
	.materials-door-box{
		width: 95%;
	}
	.materials-bathroom{
		width: 95%;
	}
	.bathroom-left{
		width: 30%;
	}
	.bathroom-right{
		width: 70%;
		box-sizing: border-box;
	}
	.materials-list4-box{
		width: 95%;
	}
	.footer-box{
		width: 95%;
	}
	.m11-drink-box{
		width: 95%;
	}
	#m10 .materials-list2-title{
		width: 95%;
		display: block;
		margin:  0 auto;
	}
}
@media only screen and (max-width: 1024px){
	.banner-list, .banner-box, .index-video-box{
		height: calc(100vh - 60px);
	}
	.header-menu li{
		line-height: 60px;
	}
	.banner-title1{
		font-size: 40px;
	}
	.banner-title2{
		font-size: 24px;
	}
	.banner-arrow{
		width: 30px;
		height: 30px;
		left: calc(50% - 15px);
	}
	.spirit1-title{
		font-size: 40px;
	}
	.logo-box{
		width: 60px;
		height: 60px;
	}
	.mbYTP_wrapper iframe{
    top: 0%!important;
	}
	#m10 .materials-list2-box li:nth-child(3){
		width: 100%;
		padding-top: 20px;
		clear: both;
	}

}
@media only screen and (max-width: 800px){
	.spirit1-p-box{
		width: 95%;
	}
	.spirit1-p{
		font-size: 16px;
	}
	.spirit1-list li{
		font-size: 16px;
		padding-left: 20px;
	}
	.spirit1-list li:before{
		width: 15px;
		height: 15px;
	}
	.spirit1, .spirit2{
		padding-top: 50px;
	}
	.spirit3-title.active{
		width: 95%;
		margin: 0 auto;
	}
	.spirit3-title{
		letter-spacing: 1px;
		font-size: 18px;
	}
	.about-1{
		height: 800px;
	}
	.about2-title{
		font-size: 30px;
	}
	.about2-title2{
		font-size: 45px;
	}
	.about2-title3{
		font-size: 24px;
	}
	.about-2{
		padding: 40px 0;
	}
	.about-4{
		padding: 40px 0;
	}
	#m5-2 .materials-list5-info-left{
		width: 100%;
		display: block;
	}
	#m5-2 .materials-list5{
		margin-top: 20px;
		width: 100%;
		font-size: 0;
		padding: 0;
	}
	#m5-2 .materials-list5 li{
		width: 31.3333%;
		display: inline-block;
		vertical-align: top;
		padding: 10px 0;
		border-bottom: 0;
		margin: 0 1%;

	}
	.materials-list5-box{
		width: 720px;
	}
	#m5-2 .materials-list5 li{
		min-height: 205px;
		position: relative;
	}
	#m5-2 .materials-list5 li:nth-child(2):before{
		content: '';
		width: 1px;
		height: 90%;
		display: block;
		background-color: #FFF;
		position: absolute;

		top: 5%;
		left: -12px;
	}
	#m5-2 .materials-list5 li:nth-child(2):after{
		content: '';
		width: 1px;
		height: 90%;
		display: block;
		background-color: #FFF;
		position: absolute;

		top: 5%;
		right: 0;
	}
	#m5-3 .materials-list5-info-left,
	#m5-3 .materials-list5-img1-box{
		width: 100%;
	}
	#m5-3 .materials-list5-info2 li{
		padding-left: 0;
		width: 100%;
		display: block;
	}
	.materials-door-img{
		width: 100%;
	}
	.materials-door-info{
		padding-left: 0;
	}
	.materials-door-info-img{
		width: 250px;
		max-width: 100%;
		display: inline-block;
	}
	.materials-door-info-p{
		display: inline-block;
		vertical-align: middle;
		width: calc(100% - 250px);
		padding: 0 20px;
		box-sizing: border-box;
	}
	.materials-door-info{
		width: 100%;
		margin-top: 20px;
	}
	.bathroom-img3{
		height: 530px;
	}
	.materials-list2-box li{
		width: 100%;
		display: block;
	}
	.materials-list3-img-box{
		position: relative;
		width: 100%;
	}
	.materials-list2-box{
		width: 100%;
		padding-bottom: 30px;
	}
	#m4{
		width: 95%;
		border-bottom: 0;
	}
	.materials-list4-box{
		padding: 0;
	}
	.materials-list4-img{
		width: 100%;
		display: block;
		padding: 0;
		text-align: center;
	}
	.materials-list4-info-box{
		width: 100%;
		display: block;
		margin-top: 20px;
	}
	#m10 .materials-list2-box{
		width: 95%;
	}
	.m10-list-img-box{
		display: block;
		float: none;
		clear: both;
	}
	#m10 .materials-list2-box li{
		width: 100%;
		float: none;
		padding-right: 0;
	}
	.m11-drink-img{
		display: block;
		margin: 0 auto;
	}
	.m11-drink-list{
		width: 500px;
		max-width: 100%;
		display: block;
		margin: 0 auto;
		margin-top: 20px;
	}
}
@media only screen and (max-width: 768px){
	.index-video-box{
		display: none;
	}
	.about-2-info-title{
		transform: scale(1);
	}
	.logo-box{
		display: none;
	}
	.about1-title,
	.about1-title2,
	.about-letter-bg,
	.about-letter-info,
	.about-letter-title,
	.about2-title2,
	.about2-title3,
	.about-2-info-p,
	.about-3-title,
	.about-3-p-box,
	.spirit1-title,
	.spirit1-p-box,
	.spirit3-title,
	.spirit3-data-list ul,
	.vr-title,
	.vr-p,
	.vr-title2,
	.vr-img1,
	.vr-img2,
	.vr-title3,
	.vr-p2,
	.vr-img4 img,
	.vr-img-tr,
	.vr-img-6 img,
	.vr-img-last img,
	.materials-title,
	.materials-list1-title,
	.materials-list1-p p,
	.materials-list1-last-p p,
	.materials-list1-img,
	.materials-list1-img span,
	.materials-list2-img,
	.materials-list2-img span,
	.materials-title2,
	.materials-img2 img,
	.materials-list2-title,
	.materials-list2-box li,
	.materials-list3-img1,
	.materials-list3-img2,
	.materials-list3-img3,
	.materials-list3-img-title,
	.materials-list4-img,
	.materials-list2-s-title,
	.materials-list4-info p,
	.materials-list4-info li,
	.materials-list5-info-left p,
	.materials-list5-img1-box,
	.materials-list5-info-left,
	.materials-list5 li,
	.materials-list5,
	.materials-list5-info2 li,
	.materials-list-s-title,
	.materials-list5-respectively ul,
	.materials-list5-b-title,
	.materials-door-img,
	.materials-door-info-img,
	.materials-door-info-p,
	.bathroom-img1,
	.bathroom-img2,
	.bathroom-img3,
	.bathroom-title,
	.bathroom-p,
	.materials-kitchen-img img,
	.materials-title4,
	.m10-list-img1-1,
	.m10-list-img1-2,
	.m10-list-img1-3,
	.m10-2-img,
	.m11-drink-img,
	.m11-drink-title,
	.m11-drink-list li{
	 	opacity: 1!important;
	 	animation: none!important;
	}
	.banner-list, 
	.banner-box, 
	.index-video-box{
		height:400px; 
	}
	.header-box{
		position: fixed;
	}
	.rwd-menu{
		display: block;
	}
	.about-3-img{
		height: 370px;
	}
	.header-menu{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: -webkit-flex;
	  	display:         flex;
	    -webkit-align-items: center;
	          align-items: center;
	    -webkit-justify-content: center;
	          justify-content: center;
	}
	.header-menu li{
		width: 140px;
		height: 140px;
		line-height: 140px;
		margin: 0 auto;
	}
	.header-menu li a{
		width: 100%;
		height: 100%;
		display: block;
	}
	.header-menu li.active a:after{
		transform: scaleX(0);
	}
	.work-svg-border{
		display: block;
		width: 100%;
		height: 100%;
	}
	#about{
		width: 100%;
		overflow: hidden;
	}
	.header-menu li:hover a:after{
		display: none;
	}
	.rwd-logo-box{
		display: block;
	}
	.header-menu{
		background-repeat: no-repeat;
		background-size: 80%;
		background-image: url('../img/logo-bg2.png');
		background-position: center;
	}
	.rwd-header-info{
		display: block;
		font-size: 20px;
		text-align: left;
		right: 10px;
		letter-spacing: 2px;
	}
}
@media only screen and (max-width: 750px){
	.vr-title{
		font-size: 40px;
	}
	.vr-p{
		font-size: 16px
	}
	.vr-title2{
		font-size: 26px;
	}
	.materials-title{
		font-size: 26px;
		text-shadow: rgba(255, 255, 255, 0.4)2px 2px 2px;
	}
	.materials-list1-p{
		padding-right: 0;
		width: 100%;
		display: block;
	}
	.materials-list1-img1-box{
		width: 100%;
	}
	.materials-list1-box li:nth-child(2) .materials-list1-p{
		width: 100%;
		padding-left: 0;
	}
	#m5-1,
	#m5-2 .materials-list5,
	#m5-3,
	#m5-6{
		width: 95%;
		display: block;
		margin: 0 auto;
	}
	#m5-2 .materials-list5,
	#m5-6{
		margin-top: 20px;
	}
	.materials-list5-info2{
		margin-top: 20px;
	}
	.materials-bg2-img{
		margin-top: 100px;
	}
	.materials-bg2{
		height: 300px;
	}
	.materials-title2{
		font-size: 30px;
		height: 45px;
	}
	.materials-title-box{
		height: 300px;
		padding-top: 200px;
	}
	.materials-title-bg2{
		margin-top: 50px;
	}
	.materials-title3{
		font-size: 30px;
	}
	.bathroom-left{
		width: 100%;
	}
	.bathroom-img1{
		width: 50%;
		display: inline-block;
	}
	.rwd-menu{
		top: 10px;
		right: 10px;
	}
}
@media only screen and (max-width: 480px){
	.rwd-menu{
		width: 60px;
		height: 60px;
	}
	.rwd-menu-p{
		font-size: 14px;
		padding-top: 5px;
		padding-bottom: 4px;
	}
	.rwd-menu span{
		width: 35px;
	}
	.header-menu{
		justify-content: space-around;
		flex-wrap: wrap;
		align-content:center;
	}
	.header-menu li{
		display: inline-block;
		margin-bottom: 20px;
	}
	.about-1{
		height: inherit;
		display: block;
		padding-bottom: 30px;
	}

	.about-letter{
		position: static;
		width: 95%;
		display: block;
		margin: 0 auto;
		background-color: #FFF;
		padding: 20px 10px;
		box-sizing: border-box;
		box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 2px;
	}
	.about-letter-bg img{
		display: none;
	}
	.about1-title{
		text-align: center;
		font-size: 30px;
	}
	.about1-title2{
		font-size: 20px;
		text-align: center;
	}
	.about2-title2{
		font-size: 32px;
	}
	.about2-title3{
		font-size: 20px;
	}
	.about-3-p-box,
	.about-2-info-p{
		width: 95%;
		margin: 0 auto;
	}
	.about-3-title{
		font-size: 40px;
	}
	.about-3-p-box p,
	.about-2-info-p{
		font-size: 16px;
		letter-spacing: 1px;
		line-height: 1.6;
	}
	.spirit3-data-list{
		width: 95%;
		display: block;
		margin: 0 auto;
		margin-top: 20px;
	}
	.spirit3-data-list ul{
		width: 100%;
		display: block;
		padding-left: 0;
	}
	.spirit3-data-list ul:nth-child(2){
		border: 0;
	}
	.vr-title{
		font-size: 34px;
	}
	.vr-link{
		right: calc(50% - 150px);
	}
	.materials-list1-img{
		width: 100%;
	}
	.materials-list1-img1-box .materials-list1-img:nth-child(2){
		margin-left: 0;
	}

	.materials-list1-img{
		display: block;
		text-align: center;
	}

	#m2-3 .materials-list1-img{
		width: 300px;
		max-width: 100%;
		display: block;
		margin: 0 auto;
	}
	.materials-title2{
		font-size: 20px;
	}
	.materials-list5-info-left{
		display: block;
		width: 100%;
	}
	.materials-list5-img1-box{
		display: block;
		width: 100%;
	}
	.materials-list5-img1-box span{
		position: static;
	}
	#m5-2 .materials-list5 li{
		width: 100%;
		display: block;
		min-height: inherit;
		margin-left: 0;
		padding: 10px;
		box-sizing: border-box;
	}
	#m5-2 .materials-list5 li:nth-child(2):before{
		display: none;
	}
	#m5-2 .materials-list5 li:nth-child(2):after{
		display: none;
	}
	.materials-list5 li p{
		text-align: justify;
	}
	.materials-list5-respectively ul:nth-child(1){
		display: none;
	}
	.materials-list5-respectively ul{
		margin-bottom: 20px;
	}
	.materials-list5-respectively ul li.respectively-list1{
		display: block;
		width: 100%;
	}
	.materials-list5-respectively ul li{
		width: 50%;
		display: inline-block;
	}
	.rwd-respectively{
		width: 100%;
		font-size: 20px;
		text-align: center;
		display: block;
		line-height: 40px;
		background-color: #888889;
	}
	.materials-list5-respectively{
		width: 95%;

	}
	.materials-list5-respectively ul li span{
		line-height: 30px;
	}
	.materials-title3{
		font-size: 20px;
	}
	.materials-door-info-img{
		width: 100%;
		display: block;
	}
	.materials-door-info-p{
		display: block;
		width: 100%;
		padding: 0;
	}
	.bathroom-img1,
	.bathroom-img2{
		width: 100%;
		display: block;
	}

	.bathroom-right{
		width: 100%;
	}
	.bathroom-right{
		padding-left: 0;
		margin-top: 20px;
	}
	.bathroom-img3{
		height: 240px;
	}
	.materials-title4{
		font-size: 14px;
	}
	.web{
		float: none;
	}
	.rwd-menu.active span:nth-child(2){
		top: -2px;
	}
	.materials-list1-img2-box .materials-list2-img:nth-child(1) {
		width: 300px;
		max-width: 100%;
		display: block;
	}
	.materials-list1-img2-box .materials-list2-img img{
		width: 100%;
	}
	.materials-list1-img2-box:nth-child(2)  .materials-list2-img:nth-child(1){
		margin: 0 auto;
		margin-bottom: 20px;
	}
	.materials-list1-img2-box .materials-list2-img:nth-child(2){
		width: 300px;
		max-width: 100%;
		display: block;
		margin: 0 auto;
	}
	.materials-list2-img{
		margin-bottom: 10px;
	}
	.vr-p{
		font-size: 14px;
		letter-spacing: 0;
	}
	.vr-title{
		letter-spacing: 0;
	}
	#v3-1{
		width: 95%;
		display: block;
		margin: 0 auto;
	}
	.vr-img3{
		height: 400px;
	}
	.vr-p2{
		font-size: 16px;
		text-align: left;
	}
	.about1-title2 span,
	.about2-title3 span,
	.about-2-info-p span{
		display: block;
		padding-bottom: 10px;
	}
	.about-3-p-box p, .about-2-info-p{
		letter-spacing: 0;
	}
	.spirit2-list-p-box{
		display: block;
	}
	.m10-list-img1-1{
		width: 250px;
		display: block;
		margin: 0 auto;
		margin-bottom: 10px;
	}
	.m10-list-img1-1 span:nth-child(1){
		height: 280px;
	}
	.m10-list-img1-1 span:nth-child(2){
		height: 380px;
	}
	.m10-list-img1-2{
		width: 250px;
		margin: 0 auto;
		display: block;
		height: 500px;
	}
	.m10-list-img1-3{
		width: 250px;
		display: block;
		margin: 0 auto;
		margin-top: 10px;
	}
	.m10-list2-s-title-box{
		width: 100%;
		display: block;
		float: none;
	}
	.m10-list2-s-img-box{
		width: 250px;
		display: block;
		margin: 0 auto;
		float: none;
		margin-top: 10px;
	}
	.m10-2-img-box .m10-2-img:nth-child(1),
	.m10-2-img-box .m10-2-img:nth-child(2){
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	.m11-drink-img{
		height: 190px;
	}
	.m11-drink-list{
		padding-left: 0;
	}
	.m11-drink-list li{
		text-align: justify;
	}
	.banner-slong-box{
		top: 5%;
		left: 4%;
	}
	.banner-title1{
		font-size: 30px;
	}
	.banner-title2{
		font-size: 18px;
	}
}