.clearfix:after,.cl:after{content:'\20';display:block;height:0;clear:both;}.clearfix{*zoom:1;}.clear{clear:both;}
.p5{padding:5px;}.p10{padding:10px;}.p15{padding:15px;}.p20{padding:20px;}.p25{padding:25px;}.p30{padding:30px;}.p40{padding:40px;}.p50{padding:50px;}
.pl5{padding-left:5px;}.pl10{padding-left:10px;}.pl15{padding-left:15px;}.pl20{padding-left:20px;}.pl30{padding-left:30px;}.pl40{padding-left:40px;}.pl50{padding-left:50px;}
.pt5{padding-top:5px;}.pt10{padding-top:10px;}.pt15{padding-top:15px;}.pt20{padding-top:20px;}.pt30{padding-top:30px;}.pt40{padding-top:40px;}.pt50{padding-top:50px;}
.pb5{padding-bottom:5px;}.pb10{padding-bottom:10px;}.pb15{padding-bottom:15px;}.pb20{padding-bottom:20px;}.pb30{padding-bottom:30px;}.pb40{padding-bottom:40px;}.pb50{padding-bottom:50px;}
.pr5{padding-right:5px;}.pr10{padding-right:10px;}.pr15{padding-right:15px;}.pr20{padding-right:20px;}.pr30{padding-right:30px;}.pr40{padding-right:40px;}.pr50{padding-right:50px;}

.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml15{margin-left:15px;}.ml20{margin-left:20px;}.ml30{margin-left:30px;}.ml40{margin-left:40px;}.ml50{margin-left:50px;}
.mr5{margin-right:5px;}.mr10{margin-right:10px;}.mr15{margin-right:15px;}.mr20{margin-right:20px;}.mr30{margin-right:30px;}.mr40{margin-right:40px;}.mr50{margin-right:50px;}
.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt15{margin-top:15px;}.mt20{margin-top:20px;}.mt30{margin-top:30px;}.mt40{margin-top:40px;}.mt50{margin-top:50px;}
.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb15{margin-bottom:15px;}.mb20{margin-bottom:20px;}.mb30{margin-bottom:30px;}.mb40{margin-bottom:40px;}.mb50{margin-bottom:50px;}

.mt60{margin-top:60px;}.mt70{margin-top:70px;}.mt80{margin-top:80px;}.mt90{margin-top:90px;}.mt100{margin-top:100px;}
.mb60{margin-bottom:60px;}.mb70{margin-bottom:70px;}.mb80{margin-bottom:80px;}.mb90{margin-bottom:90px;}.mb100{margin-bottom:100px;}
.pt60{padding-top:60px;}.pt70{padding-top:70px;}.pt80{padding-top:80px;}.pt90{padding-top:90px;}.pt100{padding-top:100px;}
.pb60{padding-bottom:60px;}.pb70{padding-bottom:70px;}.pb80{padding-bottom:80px;}.pb90{padding-bottom:90px;}.pb100{padding-bottom:100px;}

.f12{font-size:12px;}.f14{font-size:14px;}.f16{font-size:16px;}.f18{font-size:18px;}.f20{font-size:20px;}.f22{font-size:22px;}.f24{font-size:24px;}.f26{font-size:26px;}.f28{font-size:28px;}.f30{font-size:30px;}.f32{font-size:32px;}.f34{font-size:34px;}.f36{font-size:36px;}

.cf00{color:#f00;}a.cf00:link,a.cf00:visited{color:#f00;}a.cf00:hover,a.cf00:active{color:#f00;}
.cf30{color:#f30;}a.cf30:link,a.cf30:visited{color:#f30;}a.cf30:hover,a.cf30:active{color:#f30;}
.cf60{color:#f60;}a.cf60:link,a.cf60:visited{color:#f60;}a.cf60:hover,a.cf60:active{color:#f60;}
.cf90{color:#f90;}a.cf90:link,a.cf90:visited{color:#f90;}a.cf90:hover,a.cf90:active{color:#f90;}
.cfc0{color:#fc0;}a.cfc0:link,a.cfc0:visited{color:#fc0;}a.cfc0:hover,a.cfc0:active{color:#fc0;}

.c000{color:#000;}a.c000:link,a.c000:visited{color:#000;}a.c000:hover,a.c000:active{color:#000;}
.c333{color:#333;}a.c333:link,a.c333:visited{color:#333;}a.c333:hover,a.c333:active{color:#333;}
.c666{color:#666;}a.c666:link,a.c666:visited{color:#666;}a.c666:hover,a.c666:active{color:#666;}
.c999{color:#999;}a.c999:link,a.c999:visited{color:#999;}a.c999:hover,a.c999:active{color:#999;}
.cccc{color:#ccc;}a.cccc:link,a.cccc:visited{color:#ccc;}a.cccc:hover,a.cccc:active{color:#ccc;}
.cfff{color:#fff;}a.cfff:link,a.cfff:visited{color:#fff;}a.cfff:hover,a.cfff:active{color:#fff;}

.relative{position:relative;}.absolute{position:absolute;}.fixed{position:fixed;}

a:link,a:visited{ text-decoration:none;}a:hover,a:active{ text-decoration:none;}

.bold{font-weight:bold;}.normal{font-weight:normal;}

.left{text-align:left;}.center{text-align:center;}.right{text-align:right;}
.hide{display:none;}.block{display:block;}.inline-block{display:inline-block;}
.fl{float:left;}.fr{float:right;}

.ofhidden{overflow:hidden;}
.vm > *{display:inline-block;vertical-align:middle;}
.op0{opacity: 0;}.op1{opacity: 0.1;}.op2{opacity: 0.2;}.op3{opacity: 0.3;}.op4{opacity: 0.4;}.op5{opacity: 0.5;}.op6{opacity: 0.6;}.op7{opacity: 0.7;}.op8{opacity: 0.8;}.op9{opacity: 0.9;}.op10{opacity: 1;}
img{line-height: 0;padding: 0;margin: 0;}

body,html{height:auto;}
@font-face { 
	font-family: 'zfont'; 
	src: local('fontName Regular'), 
	local('fontName'), 
	url('SourceHanSans.ttc') format('truetype')
} 
@font-face { 
	font-family: 'syht'; 
	src: local('fontName Regular'), 
	local('fontName'), 
	url('sy.otf') format('truetype')
} 



/*****************start  ea4335****************/




.bannerWrapper{overflow: hidden;}
.toplinkBox{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/banner.jpg?200) no-repeat center center;height:1099px;width: 2560px;position: relative;transform-origin: left top;}
.mainBox{color: #fff;background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/bg1.png) repeat-y center center;position: relative;}
/*.mainBox:before{position: absolute;content: '';background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/bg1.png) no-repeat center center;height: 33px;top: -18px;left: 0;right: 0;z-index: 100;}
*/

.wpbox{background: #fff;width:1100px;margin-left:auto;margin-right: auto;min-height:200px;}
.mainWraper{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/bg.jpg) repeat top center;}
/*.antd{position: absolute;animation: downtop 1s linear infinite;}
.am1{width: 182px;height: 177px;left: 10%;top: 372px;}
.am2{width: 165px;height: 127px;top:655px;left: 480px;}
.am3{width: 195px;height: 168px;top: 615px;right: 480px;}
.am4{width: 227px;height: 263px;top: 330px;right: 215px;}
.am5{width: 201px;height: 200px;}*/





.navBox{position: fixed;z-index:222;right:0px;top:50%;margin:-360px -30px 0 0px;width:288px;transition: ease all 0.5s; transform:scale(0); transform-origin: right center;z-index: 200; background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/navbg.png) no-repeat center center;height:721px;}

.navBox ul{}
.navBox li{width: 150px;margin-left: 60px;}

.navBox li:nth-child(1) a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav3.png?123) no-repeat center center;width: 147px;margin-top: 106px;transition: ease all 0.5s;}
.navBox li:nth-child(2) a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav4.png?123) no-repeat center center;width: 147px;transition: ease all 0.5s;}
.navBox li:nth-child(3) a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav2.png?123) no-repeat center center;width: 147px;transition: ease all 0.5s;}
.navBox li:nth-child(4) a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav1.png?123) no-repeat center center;width: 147px;transition: ease all 0.5s;}
.navBox li:nth-child(5) a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav5.png?123) no-repeat center center;width: 147px;transition: ease all 0.5s;}
.navBox li:nth-child(6) a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav6.png?123) no-repeat center center;width: 147px;transition: ease all 0.5s;}
.navBox li:nth-child(7) a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav7.png?123) no-repeat center center;width: 147px;transition: ease all 0.5s;}
.navBox li:nth-child(8) a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav8.png?123) no-repeat center center;width: 147px;transition: ease all 0.5s;}



.navBox li:nth-child(1) a:hover,.navBox li:nth-child(1).active a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav3_h.png?123) no-repeat center center;transition: ease all 0.5s;}
.navBox li:nth-child(2) a:hover,.navBox li:nth-child(2).active a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav4_h.png?123) no-repeat center center;transition: ease all 0.5s;}
.navBox li:nth-child(3) a:hover,.navBox li:nth-child(3).active a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav2_h.png?123) no-repeat center center;transition: ease all 0.5s;}
.navBox li:nth-child(4) a:hover,.navBox li:nth-child(4).active a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav1_h.png?123) no-repeat center center;transition: ease all 0.5s;}
.navBox li:nth-child(5) a:hover,.navBox li:nth-child(5).active a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav5_h.png?123) no-repeat center center;transition: ease all 0.5s;}
.navBox li:nth-child(6) a:hover,.navBox li:nth-child(6).active a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav6_h.png?123) no-repeat center center;transition: ease all 0.5s;}
.navBox li:nth-child(7) a:hover,.navBox li:nth-child(7).active a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav7_h.png?123) no-repeat center center;transition: ease all 0.5s;}
.navBox li:nth-child(8) a:hover,.navBox li:nth-child(8).active a{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/nav8_h.png?123) no-repeat center center;transition: ease all 0.5s;}
.navBox li a{display:inline-block;text-align: center;height: 56px;line-height: 56px;}

.navBox.active{transform:scale(0.7);opacity: 1;display: block;}
.navBox li.active a{opacity: 1;}
.section{ width:1100px;position: relative;margin-left:auto;margin-right:auto;position: relative; }
.wp{width:1200px;margin-left:auto;margin-right:auto;position: relative; }
.section.mt100{margin-top:100px;}

/*.section.active{opacity: 1;transform: translateY(0px);}*/








@keyframes downtop{
	0%{transform:translateY(-5px);}
	25%{transform:translateY(5px);}
	50%{transform:translateY(-5px);}
	75%{transform:translateY(5px);}
	100%{ transform:translateY(-5px);}
}






/*
.vTitle{font-size: 50px;text-align: center;background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/ctle.png) no-repeat center center;height: 235px;position: absolute;left: 50%;margin-left: -214px;top: -130px;z-index: 1030;width: 417px;}
.vTitle p{padding: 30px 0 60px 0;font-size: 16px;}*/
.videoBox{width: 1200px;height: 590px;margin: 0 auto;}


.onDesign{display: flex;justify-content: space-between;flex-wrap: wrap;width:1176px;padding-top: 50px;}
.onDesign li{width: 274px;height:372px;color: #6fbcfd;font-size: 18px;margin-bottom: 10px;text-align: center;letter-spacing: -1px;line-height: 19px;background: #fff;}
.onDesign li > a{overflow: hidden;height: 223px;line-height:0;width:271px;color: #6fbcfd;}
.onDesign li{transition: ease all 0.5s;transform: translateY(0px); }
.onDesign li:hover{transform: translateY(-10px);transition: ease all 0.5s;box-shadow: 1px 3px 6px #333;}

.downdes{width:215px;height:115px;box-sizing:border-box;border-radius: 0 0 5px 5px;padding:20px 15px 0;color:#6fbcfd;font-size:18px;margin-left: auto;margin-right: auto;}
.downdes a{color:#6fbcfd;height: 42px;display: inline-block;}
.downdes p{border-bottom:1px solid #6fbcfd;padding-bottom:5px;}
.downdes div{padding-top:5px;}



.onDesign li:first-child .downdes a{line-height: 42px;}


.ctop{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/topimg.png) no-repeat center center;height: 497px;margin-top: 50px;position: relative;color: #002c20;font-size: 24px;margin-bottom: 110px;}
.lionBox{line-height: 32px;position: absolute;left: 50%;top: 0;margin-left: -204px;text-align: center;font-family: 'syht';}
.lionBox p{padding-top: 150px;margin-left: 30px;font-family: 'zfont';font-weight: bold; }
.lionBox p span{color: #efac2b;font-size: 26px;}
.lionBox div{font-family: 'syht';padding-top: 25px;}





@keyframes flash{
	0%{color:#00eaff;}
	25%{color:#fffc00;}
	50%{color:#ff1e00;}
	75%{color:#ff00f6;}
	100%{color:#00eaff;}
}



.zsBox{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/bg1.png) no-repeat top center;}







.designB{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/fbg.jpg) no-repeat center center;height: 1009px;margin-top: 170px;}

.vTitle{padding-top: 210px;}

.hWorkUl{width: 1100px;margin-left: auto;margin-right: auto;margin-top: 15px;}
.hWorkUl li{margin-bottom: 25px;position: relative;box-shadow: 3px 0px 7px rgba(229,148,44,0.35);overflow: hidden;border-radius: 10px; cursor: pointer;float: left;}
.liopcy{border-radius: 10px;background: rgba(0,0,0,0.84);position: absolute;left: 0;top: 0;right: 0;width: 100%;height: 100%;text-align: center;display: flex;align-items: center;justify-content: center;opacity: 0;transition: ease all 0.5s;cursor: pointer;}
.liopcy a{display: inline-block;height: 100%;width: 100%;width: 118px;height: 40px;line-height: 40px;text-align: center;border:1px solid #fff;color: #fff;font-size: 18px;border-radius: 5px;transition: ease all 0.5s;}
.liopcy a:hover{background: #eda00e;color: #fff;border-color: #eda00e;transition: ease all 0.5s;}
.brickItem:hover .liopcy{opacity: 1;transition: ease all 0.5s;box-shadow: 3px 3px 10px rgba(229,148,44,0.50);}
/*.brickItem>img{border-radius: 10px;}*/
/*.brickItem>img:hover{transform: translateY(-10px);transition: ease all 0.5s;}*/
.morebox{margin-top: 15px;}
a.lookMore{display: inline-block;background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/more.png) no-repeat center center;width: 190px;height: 97px;transition: ease all 0.5s;}
a.lookMore:hover{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/more_h.png) no-repeat center center;transition: ease all 0.5s;}
.section.part1{margin-top: 0px;}
.section{margin-top: 100px;}
.heretle{display: flex;align-items: center;justify-content: center;color: #002c20;font-size: 42px;font-family: 'syht';margin-top: 100px;}
.heretle span{width: 8px;height: 8px;border-radius: 10px;background: #002c20;margin: 0 10px;}

a.hereBtn{display: inline-block;background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/here.png) no-repeat center center;width: 190px;height: 97px;transition: ease all 0.5s;}
a.hereBtn:hover{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/here_h.png) no-repeat center center;transition: ease all 0.5s;}
.footbg{background: url(https://img.zcool.cn/special-resource/2020-4-illustration/assets/img/footbg.png) no-repeat center top;height: 200px;/*349px*/margin-top: 50px;}



.opusbox{
	width:1100px;margin:0 auto;
}
.brickItem{
	overflow: hidden;
    position: relative;
    border-radius: 12px;
    cursor: pointer;
    float: left;
}
.brickItem img{width:100%;}