main{ width: 100%; height:auto; margin:0 auto; /*max-width:1024px;*/ font-weight: 300; /*background: #333;*/ }

.banner{ width: 100%; height: 100vh; }

.case_about{ width: 100%; height: auto; padding: 64px 0; max-width:1024px; margin:0 auto; }
.case_about .case_about_text{ padding:0 24px; box-sizing: border-box; }
.case_about .case_about_text h2{ font-size: 28px; color: #C7B299; margin-bottom: 16px;  }
.case_about .case_about_text span{ font-size: 12px; color: #4D4D4D; line-height: 24px; /*font-weight: 300;*/ display: inline-block; }
.case_about .case_about_text p{ font-size: 14px; color: #fff; line-height: 32px; margin:20px 0; /*font-weight: 300;*/ }

.about_line{ width: 100%; height: 1px; padding:0 0 0 24px; box-sizing: border-box; overflow: hidden; max-width:1024px; margin: 0 auto; }
.about_line i{ width: 100%; height: 100%;  background: #333; display: block; }




/*banner*/
.focus{ width:100vw; /*height:280px; */ margin:0 auto;  position:relative; overflow:hidden; max-width: 1024px; }
.focus .hd{ width:100%; height:10px;  position:absolute; z-index:1; bottom:16px; padding:2px 0; box-sizing: border-box; text-align:center;  }
.focus .hd ul{ display:inline-block; height:6px; padding:0 8px; font-size:0; vertical-align:top; }
.focus .hd ul li{ float: left; width:4px; height:4px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; margin:0 8px;  vertical-align:top; overflow:hidden; background:#C7B299; }


.focus .hd ul .on{ width:8px; /*height: 6px;*/ }

.focus .bd{ position:relative; z-index:0; overflow:hidden; width: 100%; height: 100%; }
.focus .bd ul li { width: 100%; /*height:280px;*/ /*border-radius: 12px;*/}
/*.focus .bd ul li:nth-of-type(1){background: url(../img/case/01_about_01_03.jpg) no-repeat 50% 50% / cover;}*//*3*/
/*.focus .bd ul li:nth-of-type(2){background: url(../img/case/01_about_01_01.jpg) no-repeat 50% 50% / cover;}*//*1*/
/*.focus .bd ul li:nth-of-type(3){background: url(../img/case/01_about_01_02.jpg) no-repeat 50% 50% / cover;}*//*2*/
/*.focus .bd ul li:nth-of-type(4){background: url(../img/case/01_about_01_03.jpg) no-repeat 50% 50% / cover;}*//*3*/
/*.focus .bd ul li:nth-of-type(5){background: url(../img/case/01_about_01_01.jpg) no-repeat 50% 50% / cover;}*//*1*/

.focus .bd li a{ display: block; width: 100%; height:100%; }

/*.focus .bd ul li a video{ width: 100%; height:100%; object-fit: cover; }*/



/*案例公用*/
.case_other{ width: 100%; /*margin-top:56px;*/ max-width:1024px; margin:56px auto 0; }
.case_other .case_other_text{ width: 100%; padding: 0 24px; box-sizing: border-box; }
.case_other_text h4{ font-size: 20px; color:#C7B299; margin-bottom: 16px; }
.case_other_text p{ font-size: 14px; color: #fff; line-height: 32px; margin-bottom: 20px; }

.case_other img{ width: 100%; height: auto; }



/*上下篇*/
.case_more{ width: 100%; height: auto; /*padding-left:24px; margin:64px auto 0;*/ overflow: hidden; /*box-sizing: border-box; max-width: 1024px; */}
.case_more a{ display: inline-block; /*display: block; width: 100%;*/ height: 44px;/* background: #333; */color:#fff; line-height: 44px; font-size:16px; position: relative;  transition: all 0.4s ease; background:#fff -webkit-linear-gradient(left,#C7B299,#C7B299) no-repeat 0 0; -webkit-text-fill-color:transparent; -webkit-background-clip:text; background-size:0 100%; font-weight: 500; }
.case_more a:hover{ background-size:100% 100%; /*padding-left: 56px;*/ }
/*.case_more a:nth-of-type(2){ margin:8px 0 20px; }*/

/*.case_more a:before{ content: ""; width: 32px; height: 9px; background: url(../img/arrow.svg) no-repeat 50% 50% / cover; position: absolute; bottom:17px; left: 0px; background-position:right; transition: all 0.2s ease; }*/
/*.case_more .case_prev:before{  transform: rotate(180deg); }*/
/*.case_more a:hover:before{ width: 48px; }*/

/*.main_line{ margin-bottom: 48px;  }*/
.main_line i{ display: block; width:100%; height: 1px; background:#C7B299; }



@media (max-width:2560px){

	.banner{ width: 100%; height: 100vh; }

	.main_line{ padding:0 8vw 0 16vw; box-sizing: border-box; margin-bottom: 48px; }

	.case_more{ padding:0 8vw 0 16vw; box-sizing: border-box; margin-top:120px; }
	.case_more .case_prev{ float:left; padding-left: 40px; box-sizing: border-box; margin-bottom: 20px; }
	.case_more .case_prev:before{ content: ""; width: 32px; height: 9px; background: url(../img/arrow.svg) no-repeat 50% 50% / cover; position: absolute; bottom:17px; left: 0px; background-position:right; transition: all 0.2s ease; transform: rotate(180deg); }
	.case_more .case_prev:hover:before{ width: 48px; }
	.case_more .case_prev:hover{ padding-left: 56px; }

	.case_more .case_next{ float:right; padding-right: 40px; box-sizing: border-box; margin-bottom: 20px; }
	.case_more .case_next:after{ content: ""; width: 32px; height: 9px; background: url(../img/arrow.svg) no-repeat 50% 50% / cover; position: absolute; bottom:17px; right: 0px; background-position:right; transition: all 0.2s ease; }
	.case_more .case_next:hover:after{ width: 48px; }
	.case_more .case_next:hover{ padding-right: 56px; }

}

@media (max-width:1600px){


	.main_line{ padding:0 0 0 24px; max-width: 1024px; margin: 0 auto 48px; box-sizing: border-box; }


	.case_more{ padding:0 24px; box-sizing: border-box; margin:80px auto 0; max-width: 1024px; }
	.case_more .case_prev{ width: 100%; float:left; padding-left: 40px; box-sizing: border-box;margin-bottom: 8px; /*display: block;*/ }
	.case_more .case_prev:before{ content: ""; width: 32px; height: 9px; background: url(../img/arrow.svg) no-repeat 50% 50% / cover; position: absolute; bottom:17px; left: 0px; background-position:right; transition: all 0.2s ease; transform: rotate(180deg); }
	.case_more .case_prev:hover:before{ width: 48px; }
	.case_more .case_prev:hover{ padding-left: 56px; }

	.case_more .case_next{ float:left; padding-right: 0 ; padding-left: 40px; box-sizing: border-box; /*display: block;*/ }
	.case_more .case_next:after{ content: ""; width: 32px; height: 9px; background: url(../img/arrow.svg) no-repeat 50% 50% / cover; position: absolute; bottom:17px; left: 0px; background-position:right; transition: all 0.2s ease; }
	.case_more .case_next:hover:after{ width: 48px; }
	.case_more .case_next:hover{ padding-left: 56px; padding-right:0; }


}


@media (max-width:1024px){
	.banner{ width: 100%; height: 640px; }
}