﻿.sm_tit {margin-bottom: 40px;position: relative;font-weight: 800;font-size: 20px;color: #fff;}	
.sm_link {position: absolute;right: 0;top: 0;font-weight: 700;font-size: 18px;color: #fff;padding-right: 40px;}
.sm_link:hover {color: #999;}
.sm_link:after {position: absolute;right: 0;top: 2px;content: "";width: 18px;height: 18px;background-repeat: no-repeat;background-position: center center;background-image: url("/resources/img/common/link-next.svg");}

.mb200 {margin-bottom: 200px;}
.learn_btn {display: inline-flex;justify-content: center;align-items: center;gap: 20px;width: 190px;height: 50px;background-color: transparent;border: 1px solid #fff;border-radius: 30px;}
.learn_btn span {font-size: 18px;font-weight: 700;color: #fff;}
.learn_btn:hover {background-color: #999;border-color: #999;}


.main_title {margin-bottom: 60px;}
.main_title .t1 {font-weight: 800;font-size: 70px;color: #fff;position: relative;}
.main_txt {font-weight: 600;font-size: 25px;color: #fff;animation: fills 2.5s;animation-delay: 0.5s;animation-fill-mode: forwards;opacity: 0;}

.about_bg {-webkit-background-size: cover;background-size: cover;background-repeat: no-repeat;background-position: center center;background-image: url("/resources/img/main/main_about_bg.png");height: 700px;position: relative;}
.about_cont {position: absolute;left: 0;top: 0;width: 100%;height: 100%;padding: 180px 200px;}
.about_tit {font-weight: 800;font-size: 70px;color: #fff;margin-bottom: 20px;}
.about_txt {font-size: 20px;color: #fff;max-width: 960px;margin-bottom: 60px;}

.projectList {display: flex;gap: 28px;}
.project_item {width: 25%;}
.project_name {font-weight: 700;font-size: 18px;color: #fff;margin-top: 20px;}
.project_date {font-size: 16px;color: #bbb;margin-top: 10px;}

.newsList li {border-top: 1px solid #fff;padding: 50px 0;}
.newsTit {font-weight: 800;font-size: 60px;color: #fff;margin-bottom: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.newsTxt {font-size: 20px;color: #fff;margin-bottom: 50px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.newsDate {font-size: 18px;color: #bbb;}

.product_section {overflow: hidden;height: 100vh;}
.product_item {border-top: 1px solid #fff;padding: 50px 0;display: flex;overflow: hidden;transition: height 0.5s ease;height: 800px;}
.product_left {flex: 1;height: 100%;}
.product_right {flex: 1;height: 100%;overflow: hidden;}
.product_right img {width: 100%;height: 100%;object-fit: cover; }

.product_name {font-weight: 800;font-size: 70px;color: #fff;margin-bottom: 20px;}
.product_info {font-size: 20px;color: #fff;margin-bottom: 60px;}

.project_intro {display: flex;gap: 28px;}	
.project_intro .intro {width: 33.33333333%;height: 620px;-webkit-background-size: cover;
background-size: cover;background-repeat: no-repeat;background-position: center center;position: relative;opacity: 0.7;}
.project_intro .intro_tit {font-size: 26px;font-weight: 700;color: #fff;position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
.project_intro .intro.intro1 {background-image: url("/resources/img/sub/interior_bg1.jpg");}
.project_intro .intro.intro2 {background-image: url("/resources/img/sub/interior_bg2.jpg");}
.project_intro .intro.intro3 {background-image: url("/resources/img/sub/interior_bg3.jpg");}
.project_intro .intro:hover {opacity: 1;}
@keyframes fills{
	0%{
		background-position: 100%;	
		-webkit-transition: all 0.4s 0s cubic-bezier(0.645, 0.045, 0.355, 1);
		transition: all 0.4s 0s cubic-bezier(0.645, 0.045, 0.355, 1);
		opacity: 0;
	}
	100%{
	    background-position: 0%;	
	    -webkit-transition: all 1s 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	    opacity: 1;
	}
}
.main_title .t1 {
    white-space: nowrap;
    z-index: 2;
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #fff, #fff, #fff, #fff 50%, #151515 50%);
	animation: fills 2.5s;
	animation-fill-mode: forwards;
}
.main_title .t1.lazy {animation: fills 2.5s;animation-delay: 0.5s;animation-fill-mode: forwards;opacity: 0;}
.gradient-title-box {width: 100%;height: 100vh;overflow: hidden;position: relative;z-index: 1;}
.gradient-title-wrap {width: 100%;position: absolute;padding-top: 240px;background-color: #151515;z-index: 2;-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}

.img-wrap {position: absolute;width: 100%;height: 100vh;overflow: hidden;background-size: cover;background-position: center;background-repeat: no-repeat;background-image: url('/resources/img/main/bn_img.jpg?v=1');transform: translate(0px, 0px) scale(0.9);z-index: 0;bottom: 0;z-index: 2;}

.gradient-title-wrap.before {z-index: 2;background-color: transparent;}
/* .gradient-title-wrap.before .gradient-ani .txt {filter: invert(1);} */

.Video_wrap {position: relative;width: 100%;height: 100vh;/* padding-top: 56.25%; */}	
.player {width: 100%;height: 100%;}
.video_text {position: absolute; top: 50%;left: 0;transform: translate(0, -50%);padding-top: 100px;padding-left: 15px;}

.on_pc {display: block;}   
.on_mobile {display: none;}
.red {background-color: red;}

@media (max-width: 1560px) {
	.newsTit {font-size: 50px;}
}
@media (max-width: 1499px) {

}

@media (max-width: 1429px) {

}
@media (max-width: 1399px) {
	.main_title .t1 {font-size: 70px;}
	.about_tit {font-size: 60px;}
	.about_cont {padding: 150px 100px;}
	.product_name {font-size: 50px;}
	.newsTit {font-size: 40px;}
}
@media (max-width: 1259px) {
	.project_intro .intro_tit {font-size: 24px;}
	.project_intro .intro {height: 420px;}
	.Video_wrap {height: 70vh;}
}
@media (max-width: 1200px) {
	.product_section {overflow: visible;height: auto;}
}
@media (max-width: 1219px) {
	.newsList li {padding: 30px 0;}
	.newsTit {font-size: 20px;margin-bottom: 15px;}
	.newsTxt {font-size: 16px;margin-bottom: 25px;}
	.newsDate {font-size: 16px;}
	.main_title .t1 {font-size: 60px;}
	.about_tit {font-size: 50px;}
	.about_bg {height: 500px;}
	.about_cont {padding: 100px 50px;}
	.product_name {font-size: 40px;}
}

@media (max-width: 991px) {
	.main_title  .t1 {font-size: 50px;}
	.main_title {margin-bottom: 30px;}
	.main_txt {font-size: 20px;}
	.mb200 {margin-bottom: 100px;}
	.sm_tit {font-size: 18px;margin-bottom: 20px;}
	.about_tit {font-size: 30px;}
	.about_txt {font-size: 18px;margin-bottom: 30px;}
	.learn_btn span {font-size: 16px;}
	.about_bg {height: 400px;}
	.about_cont {padding: 50px 30px;}
	.product_name {font-size: 40px;margin-bottom: 10px;}
	.product_info {font-size: 18px;margin-bottom: 30px;}
	.sm_tit {font-size: 16px;}
	.sm_link {font-size: 14px;padding-right: 30px;}
	.project_name {font-size: 16px;margin-top: 10px;}
	.project_date {font-size: 14px;}
	.product_item {padding: 25px 0;height: 500px;}
	.product_name {font-size: 30px;}
	.project_intro .intro_tit {font-size: 20px;}
	.project_intro .intro {height: 280px;}
	.Video_wrap {height: 50vh;}
	.video_text {padding-top: 0;}
}

@media (max-width: 767px) {

	.newsTit {font-size: 18px;}
	.main_title  .t1 {font-size: 30px;}
	.main_txt {font-size: 16px;}
	.mb200 {margin-bottom: 50px;}
	.about_bg  {height: auto;}
	.about_cont {position: relative;padding: 30px 20px;}
	.about_tit {font-size: 20px;}
	.about_txt {font-size: 14px;}
	.learn_btn span {font-size: 14px;}
	.learn_btn {width: 160px;height: 40px;gap: 10px;}
	.learn_btn img {width: 9px;}
	.sm_link {padding-right: 20px;}
	.sm_link:after {width: 9px;height: 9px;-webkit-background-size: 9px auto;background-size: 9px auto;}
	.projectList {flex-wrap: wrap;}
	.project_item {width: 45%;}
	.product_item {flex-direction: column;height: auto;gap: 30px;}
	.product_name {font-size: 20px;}
	.product_info {font-size: 14px;}
	.product_info br {display: none;}
	.project_intro {flex-direction: column;}
	.project_intro .intro {width: 100%;height: 250px;}
	.Video_wrap {height: 100vh;}

	.on_pc {display: none;}   
	.on_mobile {display: block;}
	.mobile_section {height: 100vh;background-position: center center; -webkit-background-size: cover; background-size: cover;position: relative;}
	.mobile_section:before {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: rgb(0 0 0 / 30%);content: "";z-index: 1;}
	.mobile_section.section1 {background-image: url("/resources/img/main/mobile_aboutus.jpg");}
	.mobile_section.section2 {background-image: url("/resources/img/main/mobile_product.jpg");}
	.mobile_section.section3 {background-image: url("/resources/img/main/mobile_ourproject.jpg");}
	.mobile_section.section4 {background-image: url("/resources/img/main/mobile_interiordesign.jpg");}
	.mobile_section.section5 {background-image: url("/resources/img/main/mobile_Contactus.jpg");}

	.mobile_section_in {height: 100%;-webkit-box-align: center;align-items: center;display: flex;justify-content: center;position: relative;z-index: 2;}
	.m_st1 {font-size: 28px;color: #fff;font-weight: 700;text-align: center;margin-bottom: 20px;}
	.m_st2 {display: flex;align-items: center;justify-content: center;border: 1px solid #fff;background-color: transparent;width: 160px;height: 50px;gap: 10px;margin: 0 auto;}
	.m_st2 span {font-size: 14px;font-weight: 500;color: #fff;}
	.m_st2:hover {background-color: #fff;border-color: #fff;}
	.m_st2:hover span {color: #000;}
	.m_st2:hover img {filter: invert(1);}
}

@media (max-width: 575px) {
	.product_info {font-size: 16px;}
	.about_txt {font-size: 16px;}
	.main_title  .t1 {font-size: 28px;}	
}