body {margin:0px;padding:0px;font-size:12px;font-family:宋体;color:#333;background-color:#fff;overflow-x:hidden}
ul,li{list-style:none;margin:0px;padding:0px;}
a{color:#333;text-decoration:none;}
div,ul,li{overflow:hidden;}
table{border-collapse:collapse}
img{border:none;}
li,img{vertical-align:bottom}
h1,h2,h3,h4,h5,h6{font-weight:normal;color:#212121;overflow:visible;font-size:12px;line-height:1}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,del,em,img,strike,strong,sub,sup,tt,b,u,i,center,dl,dt,dd,ol,ul,li,form,label,input
{margin:0;padding:0;outline:0;font-family:"Microsoft Yahei","STHeiti","SimSun","Arail","Verdana","Helvetica","sans-serif"}

#header{position:absolute;top:0;left:0;width:100%;z-index:9999;width:100vw;height:65px}
#header:before{content:"";display:block;width:100%;height:65px;background-color:white;transform:translateY(-65px);transition:0.3s all;background-color:white}
#header.scroll:before,
#header.yellow:before{transform:translateX(0)}
#header.none:before{content:none !important}
#header .inner{width:1502px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;position:absolute;left:50%;top:13px;margin-left:-751px;z-index:99999}
#header .logo img{display:block;width:210px;height:auto;display:none}
#header .nav{display:flex;align-items:center;}
#header .nav a{margin-right:50px;font-size:18px;color:white}
#header .nav .icon-search{display:block;width:20px;height:auto;cursor:pointer;display:none}

#header .logo img:nth-child(2){display:block}
#header.yellow .logo img:nth-child(1){display:block}
#header.yellow .logo img:nth-child(2){display:none}
#header.yellow .nav a{color:#5f5d5d}
#header .nav .white{display:block}
#header.yellow .nav .gray{display:block !important}
#header.yellow .nav .white{display:none !important}

#banner {position:relative;width:100%;height:100vh}
#banner .item{position:absolute;left:0;top:0;width:100%;height:100vh;z-index:10;opacity:0;transition:1.5s all}
#banner .item a{display:block;width:100%;height:100%}
#banner .item img{width:100%;height:100%;object-fit:cover}
#banner .item.show{z-index:100;opacity:1}
#banner .nav{position:absolute;left:0;bottom:30px;width:100%;display:flex;align-items:center;justify-content:center;z-index:99999}
#banner .nav div{width:15px;height:15px;border-radius:50%;background-color:#fff;margin:0 10px;cursor:pointer}
#banner .nav div.show{background-color:#333}

#case-index{padding:100px 0;background-color:white}
#case-index .info{width:746px;display:block;margin:0 auto;padding:90px 0 100px 756px;position:relative}
#case-index .info h4{font-size:30px;color:#666;}
#case-index .info h4 span{color:#f3a020}
#case-index .info p{font-size:16px;line-height:36px;color:#666;padding:24px 0}
#case-index .info .more{color:#b9b9b9;display:inline-block;border:1px solid #b9b9b9;padding:3px 20px;position:absolute;right:0;bottom:126px;background-color:white}

#case-category{margin-top:90px;border-top:1px solid #b6b6b6;overflow:visible}
#case-category ul{display:flex;width:100%;justify-content:center;transform:translateY(-1px)}
#case-category ul li{padding:14px 0 36px;margin:0 56px;border-top:1px solid #b6b6b6;color:#b6b6b6;font-size:14px;cursor:pointer}
#case-category ul li.selected,
#case-category ul li:hover{border-top:1px solid #706e6f;color:#706e6f}

#case-list{background-color:white;padding-bottom:100px}

.case .group{width:1502px;margin:0 auto 10px;}
.case .group:after{content:"";clear:both;font-size:0}
.case .group .item{float:left;}
.case .group .item .bg{box-sizing:border-box;background:no-repeat center;background-size:cover;width:100%;height:100%}
.case .group .item a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;transition:0.3s all;}
.case .group .item h2{font-size:34px;margin-bottom:5px;overflow:hidden;padding:0 20px}
.case .group .item h3{font-size:16px;overflow:hidden;padding:0 20px}
.case .group .item h2 span,
.case .group .item h3 span{display:block;transform:translateY(100%);transition:0.5s all;line-height:initial;}
.case .group .item a:hover{background-color:currentColor;color:#f3a020 }
.case .group .item a:hover h2 span,
.case .group .item a:hover h3 span{transform:translateY(0);visibility:visible}

.case.anime .group .item{background-color:#eee}
.case.anime .group .item .bg{animation:cate-cover 0.3s both}

.case.hide .group .item{background-color:#eee}
.case.hide .group .item .bg{animation:cate-cover-hide 0.15s both}

@keyframes cate-cover{
	0%{opacity:0}
	100%{opacity:1}
}
@keyframes cate-cover-hide{
	0%{opacity:1}
	100%{opacity:0}
}

/*@keyframes cate-cover{
	0%{transform:translateX(100%)}
	100%{transform:translateX(0)}
}
@keyframes cate-cover-hide{
	0%{transform:translateX(0)}
	100%{transform:translateX(-100%)}
}*/
/**
746x480
746x236
368x480
746x726
*/

.case .group-01 .item:nth-child(1){width:746px;height:480px;margin:0 10px 10px 0}
.case .group-01 .item:nth-child(2){width:746px;height:480px;margin:0 0 10px 0}
.case .group-01 .item:nth-child(3){width:368px;height:236px;margin-right:10px}
.case .group-01 .item:nth-child(4){width:368px;height:236px;margin-right:10px}
.case .group-01 .item:nth-child(5){width:746px;height:236px}

.case .group-02 .item:nth-child(1){width:746px;height:726px;margin:0 10px 10px 0}
.case .group-02 .item:nth-child(2){width:746px;height:480px;margin:0 0 10px 0}
.case .group-02 .item:nth-child(3){width:368px;height:236px;margin-right:10px}
.case .group-02 .item:nth-child(4){width:368px;height:236px;margin:0 0 10px 0}
.case .group-02 .item:nth-child(5){width:746px;height:480px;margin:0 10px 0 0}
.case .group-02 .item:nth-child(6){width:368px;height:480px;margin-right:10px}
.case .group-02 .item:nth-child(7){width:368px;height:480px}

.case .group-03{height:1216px;position:relative}
.case .group-03 .item{float:none;position:absolute}
.case .group-03 .item:nth-child(1){width:368px;height:480px;left:0;top:0}
.case .group-03 .item:nth-child(2){width:746px;height:480px;left:378px;top:0}
.case .group-03 .item:nth-child(3){width:368px;height:236px;left:1134px;top:0}
.case .group-03 .item:nth-child(4){width:368px;height:480px;left:1134px;top:246px}
.case .group-03 .item:nth-child(5){width:368px;height:236px;left:0;top:490px}
.case .group-03 .item:nth-child(6){width:368px;height:480px;left:0;top:736px}
.case .group-03 .item:nth-child(7){width:746px;height:480px;left:378px;top:490px}
.case .group-03 .item:nth-child(8){width:746px;height:236px;left:378px;top:980px}
.case .group-03 .item:nth-child(9){width:368px;height:234px;left:1134px;top:736px}
.case .group-03 .item:nth-child(10){width:368px;height:236px;left:1134px;top:980px}

#case-detail{background-color:white;padding-bottom:100px}
#case-detail .top img{display:block;width:100%;height:auto}
#case-detail .desc{width:640px;margin:0 auto;padding:95px 0 70px 640px}
#case-detail .desc h1{font-size:30px;color:#f3a020;margin-bottom:25px;line-height:initial}
#case-detail .desc p{line-height:36px;text-align:justify;font-size:16px;color:#5f5d5e}
#case-detail .list{margin:0 auto}
#case-detail .list .item img{width:1280px;height:auto;display:block;margin:28px auto 0}
#case-detail .list .alt{width:750px;margin:0 auto;box-sizing:border-box;font-size:16px;color:#999;line-height:1.8;padding:28px 0 0 0;text-align:center}

#about{background-color:#fefefe}
#about .client{position:relative}
#about .client .content{position:relative;width:1500px;height:100vh;padding:0;}
#about .client .content .list{width:1500px;height:100vh;position:relative}
#about .client .content .list .item>div{width:100%;height:100vh;display:flex;align-items:center}
#about .client .content .list div img{display:block;width:100%;height:auto}

#about .client .item{position:absolute;left:0;top:0;width:100%;height:100vh;z-index:10;opacity:1;}
#about .client .item a{display:block;width:100%;height:100%}
#about .client .item img{width:100%;height:100%;object-fit:cover}
#about .client .item.show{animation:client 0.8s both}
#about .client .nav{position:absolute;left:0;bottom:30px;width:100%;display:flex;align-items:center;justify-content:center;z-index:99999}
#about .client .nav div{width:15px;height:15px;border-radius:50%;background-color:#ccc;margin:0 10px;cursor:pointer}
#about .client .nav div.show{background-color:#333}

/*@keyframes client{
	0%{transform:translateX(100%)}
	100%{transform:translateX(0)}
}*/

@keyframes client{
	0%{opacity:0}
	100%{opacity:1}
}

/*@keyframes client{
	0%{transform:translateX(0)}
	10%{transform:translateX(-1500px)}
	50%{transform:translateX(-1500px)}
	60%{transform:translateX(-3000px)}
	100%{transform:translateX(-3000px)}
}*/

.slide-page{transition:all 0.5s;transform:translate3d(0,0,0)}
.slide-page .page{height:100vh;}
.slide-page .page .content{box-sizing:border-box;text-align:justify;width:1502px;padding-left:751px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;height:100vh;line-height:1.5}
.slide-page .page.video{position:relative;}
.slide-page .page.video .content{transform:translateY(-100vh)}
.slide-page .video video{width:100%;height:100vh;object-fit:cover}

#contact .map{width:100%;height:100vh;position:relative}
#contact .map:before{content:"";display:block;width:100%;height:65px;position:absolute;left:0;top:0;background-color:white;z-index:9998}
#contact .map .list{width:200%;height:100vh;transition:all 0.5s;display:flex}
#contact .map .list img{width:100vw;height:100vh;object-fit:none;display:block}
#contact .map .tag{position:absolute;left:0;bottom:0;background-color:white;width:100%;height:94px}
#contact .map .tag .inner{width:1502px;display:flex;margin:0 auto}
#contact .map .tag .inner div{margin-right:40px;font-size:18px;padding-top:10px;cursor:pointer;color:#999}
#contact .map .tag .inner div.selected{color:#444}

#contact .page2{background-color:#f7f7f7}
#contact .contact h5{font-size:22px;margin-bottom:10px}
#contact .contact h6{font-size:24px;margin-bottom:14px}
#contact .contact p{font-size:14px;line-height:1.4;margin-bottom:20px}

#contact .info{display:flex;align-items:flex-end}
#contact .info .form{width:500px}
#contact .info .form h4{font-size:22px;padding-bottom:20px;line-height:1.4;color:#666}
#contact .info .form li{display:flex;align-items:center;margin-bottom:15px;font-size:14px;}
#contact .info .form li:last-child{margin-bottom:0}
#contact .info .form li input{width:500px;height:46px;line-height:46px;padding:0 10px;border:none;-webkit-appearance:none;background-color:white;border-radius:0;box-sizing:border-box}
#contact .info .form li textarea{width:500px;height:200px;padding:10px;border:none;-webkit-appearance:none;background-color:white;border-radius:0;box-sizing:border-box;resize:none}
#contact .info .form li .post{font-size:20px;display:inline-block;height:30px;line-height:30px}
#contact .info .qr{padding:0 0 46px 60px;text-align:center;font-size:14px;}
#contact .info .qr img{width:110px;height:auto;display:block;margin-top:46px}
#contact .info .qr div{padding-top:4px}

#contact .hr{background-color:#fefefe}


#footer{background-color:#f7f7f7}
#footer .inner{width:1100px;height:100vh;margin:0 auto;color:#666;display:flex;flex-direction:column;justify-content:center}
#footer h4{font-size:26px;padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid #ddd;line-height:1.4;color:#666}
#footer .content{display:flex}
#footer .content .form li{display:flex;align-items:center;margin-bottom:15px;font-size:14px;}
#footer .content .form li label{width:60px;flex-shrink:0;line-height:20px;display:block}
#footer .content .form li span{width:15px;flex-shrink:0;line-height:20px;text-align:center;display:block}
#footer .content .form li input{width:540px;height:46px;line-height:46px;padding:0 10px;border:none;-webkit-appearance:none;background-color:white;border-radius:0;box-sizing:border-box}
#footer .content .form li textarea{width:540px;height:200px;padding:10px;border:none;-webkit-appearance:none;background-color:white;border-radius:0;box-sizing:border-box;resize:none}
#footer .content .form li .post{font-size:20px;display:inline-block;padding:10px 10px 10px 0}

#footer .content .info{padding-left:90px}
#footer .content .info h5{font-size:22px;margin-bottom:10px;color:#666}
#footer .content .info h6{font-size:24px;margin-bottom:14px;color:#666}
#footer .content .info p{font-size:14px;line-height:1.4;margin-bottom:40px}
#footer .content .info p a{color:#666}
#footer .content .info .qr{display:flex;font-size:16px;line-height:1.4}
#footer .content .info .qr .logo{width:140px;margin-bottom:28px}

#back-top{position:fixed;right:50px;bottom:50px;z-index:99999;border-radius:50%;overflow:hidden;border:1px solid #dedede;width:50px;height:50px;
		  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;visibility:hidden}
#back-top svg{fill:#dedede}
#back-top:hover{background-color:#1f1f1f}



.clear{clear:both;height:0px;font-size:0px}