

.box4Bg{ overflow:hidden; max-width:1400px; margin: 0 auto;}
.box4List{ margin:0 -5px; overflow:hidden; position:relative; width:100%;}
.box4List > li{ float:left; padding:0;}
.box4List li a{ display:block; height:0; position:relative; overflow:hidden;}
.box4Img{ overflow:hidden;}
.box4Img img{ width:100%; transition:all 1s ease 0s;}
.box4HovBg{ background:rgba(0,0,0,.7); position:absolute; left:0; top:0; right:0; bottom:0; opacity:0; transition:all 0.5s ease 0s;}
.box4Text{ position:absolute; left:0; top:50%; transform:translate(0,-50%); width:100%; padding:0 10px; margin:0 auto; color:#fff; text-align:center;}
.box4Name{ font-size:24px; font-weight:700; line-height:32px; opacity:0; transform:translate(0,20px); transition:all 0.5s ease 0s; font-weight:normal;}
.box4NameEn{ opacity:0; transform:translate(0,20px); transition:all 0.5s ease 0s; margin:5px auto;}
.box4Brief{ max-width:220px; margin:10px auto 0; line-height:26px; max-height:104px; overflow:hidden; opacity:0; transform:translate(0,20px); transition:all 0.5s ease 0s; font-size:15px;}
.box4Brief p{line-height:26px;font-size:15px;}

.box4List h5{opacity:1; position:absolute; left:10%; bottom:8%; color:#fff; font-size:18px;transition:all 0.5s ease 0s;}
.box4List a:hover h5{opacity:0;bottom:-10%;}
.box4List h6{opacity:1; position:absolute; left:10%; bottom:4%; color:#fff; width:50px; height:4px; background:#fff;transition:all 0.6s ease 0s;}
.box4List a:hover h6{opacity:0; bottom:-10%;}

.box4List h1{opacity:1; position:absolute; left:6%; bottom:12%; color:#fff; font-size:18px;transition:all 0.5s ease 0s;}
.box4List a:hover h1{opacity:0;bottom:-10%;}
.box4List h2{opacity:1; position:absolute; left:6%; bottom:6%; color:#fff; width:50px; height:3px; background:#fff;transition:all 0.6s ease 0s;}
.box4List a:hover h2{opacity:0; bottom:-10%;}


.box4List li a:hover .box4Img img{ transform:scale(1.05);}
.box4List li a:hover .box4HovBg{ opacity:1;}
.box4List li a:hover .box4Name,.box4List li a:hover .box4NameEn,.box4List li a:hover .box4Brief{ opacity:1; transform:translate(0,0);}
.box4List li a:hover .box4Name{ transition-delay:0.3s;}
.box4List li a:hover .box4NameEn{ transition-delay:0.5s;}
.box4List li a:hover .box4Brief{ transition-delay:0.7s;}


.box4Li2{ width:24%;margin-right: 1%;}
.box4Li3{ width:24%;margin-right: 1%;}
.box4Li4{ width:24%;margin-right: 1%;}
.box4Li5{ width:24%;margin-right: 0;}



.box4Li2 > a{ padding-bottom:130%;}
.box4Li3 > a{ padding-bottom:130%;}
.box4Li4 > a{ padding-bottom:130%;}
.box4Li5 > a{ padding-bottom:130%;}
.box4Li6 > a{ padding-bottom:130%;}


.box4LiUl3{ margin:0; overflow:hidden;}
.box4LiUl3 > li{ padding:0;}
.box4LiUl3 > li > a{ padding-bottom:50%;}
.box4LiUl3 > li:last-child{ padding-bottom:0;}

.box4LiUl3 > li >ul { overflow:hidden; margin:0;}
.box4LiUl3 > li >ul > li{ float:left; width:100%; padding:0;margin-bottom: 4%;}
.box4LiUl3 > li >ul > li > a{ padding-bottom:63%;}

.box4LiUl5{ margin:0 -5px; overflow:hidden;}
.box4LiUl5 > li{ padding:0 5px 10px;}
.box4LiUl51,.box4LiUl52{ overflow:hidden; margin:0 -5px;}
.box4LiUl51 > li,.box4LiUl52 > li{ float:left; padding:0 5px;}
.box4LiUl51 li:nth-child(1){ width:100%;}
.box4LiUl52 li:nth-child(2),.box4LiUl52 li:nth-child(1){ width:50%;}
.box4LiUl51 li:nth-child(1) a{ padding-bottom:70%;}
.box4LiUl52 li:nth-child(2) a,.box4LiUl52 li:nth-child(1) a{ padding-bottom:138%;}

.box4Li1 .box4Name,.box4Li2 .box4Name,.box4Li3 .box4Name,.box4Li4 .box4Name,.box4Li5 .box4Name,.box4Li6 .box4Name{ font-size:.8vw; font-weight:300;  line-height:2;}
.box4Li1 .box4NameEn,.box4Li2 .box4NameEn,.box4Li3 .box4NameEn,.box4Li4 .box4NameEn,.box4Li5 .box4NameEn,.box4Li6 .box4NameEn{ font-size:15px; font-weight:normal; letter-spacing:normal; line-height:28px;}
.box4Li1 .box4Brief,.box4Li3 .box4Brief,.box4LiUl51 li:nth-child(2) .box4Brief,.box4LiUl52 li:nth-child(1) .box4Brief{ display:none;}
.box4LiUl3 > li > ul > li > a .box4NameEn{}
.box4Li5 .box4NameEn{ }
.box4Li5 .box4Brief{ max-height:52px; margin:10px auto 0;}




@media (max-width: 1920px) {
	.box4Li1 .box4Name,.box4Li2 .box4Name,.box4Li3 .box4Name,.box4Li4 .box4Name,.box4Li5 .box4Name,.box4Li6 .box4Name{ font-size:16px; }
}

@media (max-width:639px){
	
	.box4Li2{ width:100%;margin-right: 0;}
	.box4Li3{ width:100%;margin-right: 0;}
	.box4Li4{ width:100%;margin-right: 0;}
	.box4Li5{ width:100%;margin-right: 0;}
	.box4LiUl3 > li >ul > li{ float:none; width:100%; padding:0;margin-bottom: 4%;margin-top: 4%;}
	
	
	}



.box4Li2 .img-bgaa{width:100%;height:100%;position:absolute;top:0;left:0;z-index:99;transition:all .6s ease 0s;}
.box4Li2 .img-bgaa:hover i:first-child {width:88%;right:6%;left:auto;}
.box4Li2 .img-bgaa:hover i:nth-child(2) {right:0;height:88%;top:6%;bottom:auto}
.box4Li2 .img-bgaa:hover i:nth-child(3) {height:88%;top:auto;bottom:6%;}
.box4Li2 .img-bgaa:hover i:nth-child(4) {width:88%;right:auto;left:6%;}
.box4Li2 .img-bgaa i {transition:ease .6s;-ms-transition:ease .6s;-o-transition:ease .6s;-webkit-transition:ease .6s;-moz-transition:ease .6s;position:absolute;height:1px;background:rgba(255,255,255,.5);}
.box4Li2 .img-bgaa i:first-child {top:6%;width:0%;right:auto;left:0}
.box4Li2 .img-bgaa i:nth-child(2) {width:1px;height:0%;left:6%;bottom:0;top:auto}
.box4Li2 .img-bgaa i:nth-child(3) {width:1px;height:0%;right:6%;bottom:auto;top:0}
.box4Li2 .img-bgaa i:nth-child(4) {bottom:6%;width:0%;right:0;left:auto}


.box4Li3 .img-bgaa{width:100%;height:100%;position:absolute;top:0;left:0;z-index:99;transition:all .6s ease 0s;}
.box4Li3 .img-bgaa:hover i:first-child {width:88%;right:6%;left:auto;}
.box4Li3 .img-bgaa:hover i:nth-child(2) {right:0;height:88%;top:6%;bottom:auto}
.box4Li3 .img-bgaa:hover i:nth-child(3) {height:88%;top:auto;bottom:6%;}
.box4Li3 .img-bgaa:hover i:nth-child(4) {width:88%;right:auto;left:6%;}
.box4Li3 .img-bgaa i {transition:ease .6s;-ms-transition:ease .6s;-o-transition:ease .6s;-webkit-transition:ease .6s;-moz-transition:ease .6s;position:absolute;height:1px;background:rgba(255,255,255,.5);}
.box4Li3 .img-bgaa i:first-child {top:6%;width:0%;right:auto;left:0}
.box4Li3 .img-bgaa i:nth-child(2) {width:1px;height:0%;left:6%;bottom:0;top:auto}
.box4Li3 .img-bgaa i:nth-child(3) {width:1px;height:0%;right:6%;bottom:auto;top:0}
.box4Li3 .img-bgaa i:nth-child(4) {bottom:6%;width:0%;right:0;left:auto}


.box4Li4 .img-bgaa{width:100%;height:100%;position:absolute;top:0;left:0;z-index:99;transition:all .6s ease 0s;}
.box4Li4 .img-bgaa:hover i:first-child {width:88%;right:6%;left:auto;}
.box4Li4 .img-bgaa:hover i:nth-child(2) {right:0;height:88%;top:6%;bottom:auto}
.box4Li4 .img-bgaa:hover i:nth-child(3) {height:88%;top:auto;bottom:6%;}
.box4Li4 .img-bgaa:hover i:nth-child(4) {width:88%;right:auto;left:6%;}
.box4Li4 .img-bgaa i {transition:ease .6s;-ms-transition:ease .6s;-o-transition:ease .6s;-webkit-transition:ease .6s;-moz-transition:ease .6s;position:absolute;height:1px;background:rgba(255,255,255,.5);}
.box4Li4 .img-bgaa i:first-child {top:6%;width:0%;right:auto;left:0}
.box4Li4 .img-bgaa i:nth-child(2) {width:1px;height:0%;left:6%;bottom:0;top:auto}
.box4Li4 .img-bgaa i:nth-child(3) {width:1px;height:0%;right:6%;bottom:auto;top:0}
.box4Li4 .img-bgaa i:nth-child(4) {bottom:6%;width:0%;right:0;left:auto}



.box4Li5 .img-bgaa{width:100%;height:100%;position:absolute;top:0;left:0;z-index:99;transition:all .6s ease 0s;}
.box4Li5 .img-bgaa:hover i:first-child {width:88%;right:6%;left:auto;}
.box4Li5 .img-bgaa:hover i:nth-child(2) {right:0;height:88%;top:6%;bottom:auto}
.box4Li5 .img-bgaa:hover i:nth-child(3) {height:88%;top:auto;bottom:6%;}
.box4Li5 .img-bgaa:hover i:nth-child(4) {width:88%;right:auto;left:6%;}
.box4Li5 .img-bgaa i {transition:ease .6s;-ms-transition:ease .6s;-o-transition:ease .6s;-webkit-transition:ease .6s;-moz-transition:ease .6s;position:absolute;height:1px;background:rgba(255,255,255,.5);}
.box4Li5 .img-bgaa i:first-child {top:6%;width:0%;right:auto;left:0}
.box4Li5 .img-bgaa i:nth-child(2) {width:1px;height:0%;left:6%;bottom:0;top:auto}
.box4Li5 .img-bgaa i:nth-child(3) {width:1px;height:0%;right:6%;bottom:auto;top:0}
.box4Li5 .img-bgaa i:nth-child(4) {bottom:6%;width:0%;right:0;left:auto}



/*.anli ul li:hover {border:1px solid #45C9CC;}





@media (max-width:1600px){
.box4Name,.box4NameEn{ font-size:22px; line-height:32px;}
}


@media (max-width:1200px){

	.box4Li2{ width:49%;}
	.box4Li3{ width:49%;}
	.box4Li4{ width:49%;}
	.box4Li5{ width:49%;}
	
	.box4Li2 > a{ padding-bottom:139%;}
}

@media (max-width:1200px){

	.box4Li2{ width:100%;}
	.box4Li3{ width:100%;}
	.box4Li4{ width:100%;}
	.box4Li5{ width:100%;}
	
	.box4Li2 > a{ padding-bottom:0%;}

.box4LiUl3 > li >ul > li{ margin-top: 4%;}

}

