@charset "utf-8";
/* CSS Document */
a:hover,a:active{color: #ee3535 !important;}
i{font-style: normal;}

.container{}
.container>section{
  margin: 0 auto 100px;
  width: 1200px;
}

/* title */
.container>section>.title{
	text-align: center;
	margin-bottom: 50px;
}
.container>section>.title i{
	font-size: 48px;
	position: relative;
	padding: 0 1em;
	font-weight: bold;
}
.container>section>.title i:before,.container>section>.title i:after{
	content: "///";
	font-size: 20px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	height: 1em;
}
.container>section>.title i:before{
	left: 0;
}
.container>section>.title i::after{
	right: 0;
}
.container>section>.title .em{
	font-size: 20px;
	letter-spacing: 18px;
	padding-left: 18px;
	line-height: 1;
}
/* title end */

/* act-Foot */
.act-Foot{
  text-align: center;
  border-top: 1px #d5d5d5 dashed;
  padding-top: 35px;
  width: 1000px;
  margin: auto;
}
.act-Foot .title{
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bold;
}
.act-Foot>.title i{
	position: relative;
	padding: 0 2em;
}
.act-Foot>.title i:before,.act-Foot>.title i:after{
	content: "///";
	font-size: 14px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	color: #EA1A21;
}
.act-Foot>.title i:before{
	left: 0;
}
.act-Foot>.title i::after{
	right: 0;
}
.act-Foot p{
	margin-bottom: 10px;
}
/* act-Foot end */

/* 滚动浮现 */
.rolling{
	opacity: 0;
	transform: translateY(50px);
	transition: all 1s ease;
}
.roll-active{
	opacity: 1;
	transform: translateY(0px);
	transition: all 1s ease;
}
.roll-delay-1_0_0{
    transition-delay: 1s;
}
.roll-delay-0_7_5{
    transition-delay: 0.75s;
}
.roll-delay-0_5_0{
    transition-delay: 0.5s;
}
.roll-delay-0_2_5{
    transition-delay: 0.25s;
}
/* 滚动浮现 end */

/* scroll */
.picScroll-left{
	position: relative;
	padding: 0 60px;
}
a.prev,a.next{
    background-color: #ddd1bc;
    background-image: url(https://www.ceramicschina.com/Content/ztw2020_img/arrows_w.png);
    background-repeat: no-repeat;
    background-position-x: center;
    /* background-position-y: -9px; */
    background-size: 12px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 45px;
    width: 45px;
    border-radius: 100%;
    z-index: 9;
}

a.prev{
	left: 0;
}
a.prev:hover,a.next:hover{
    background-color: #CFBA93;
}
a.next{
    right:0;
    background-position-y: -59px;
}
:root a.prev{
    background-position-y: 5px;
}
:root a.next{
    background-position-y: -31px;
}
/* scroll end */

.banner{
	margin-bottom: 60px;
}

/* act-Info */
.act-Info{
	background: #fff;
	padding: 25px 50px 60px;
	text-align: justify;
}
.act-Info:after{
	background: url(../ztw2022_img/designer/Infobg.webp) no-repeat;
	content: "";
	width: 40px;
	height:40px;
	display: block;
	position: absolute;
	right: 50px;
}
/* act-Info end */

/* act-Share */
.act-Share .row{
	margin-bottom: 50px;
	position: relative;
	min-height: 250px;
	display: table;
}
.act-Share .row:last-child{
	margin-bottom: 0px;
}
.act-Share .row:nth-child(2n){
	transition-delay: 0.05s;
}
.act-Share .row:nth-child(3n){
	transition-delay: 0.1s;
}
.act-Share .row:hover .imgbox img{
	transform:scale(1.1);
	-webkit-filter: saturate(1);
	filter: saturate(1);
}
.act-Share .row:nth-child(2n) .imgbox{
	right: 0;
}
.act-Share .row:nth-child(2n) .text{
	padding-right: 130px;
	padding-left: 0;
}
.act-Share .row:nth-child(2n) .text>div{
	padding: 40px 160px 40px 40px;
}
.act-Share .row:nth-child(2n) .Share-head>div{
	float: right;
}
.act-Share .row:nth-child(2n) .Share-head .left{
	margin-right: 30px;
}
.act-Share .imgbox{
    width: 250px;
    height: 250px;
    border-radius: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index:9;
}
.act-Share .imgbox img{
	bottom: revert;
	min-height: 250px;
}
.act-Share .text{
	position: relative;
	padding-left: 120px;
	min-height: 300px;
	display: table-cell;
	vertical-align: middle;
}
.act-Share .text>div{
	background: #fff;
	padding: 40px 40px 40px 160px;
	min-height: 190px;
	text-align: justify;
}
.act-Share .Share-head .name{
	font-size: 32px;
	float: left;
	line-height: 1;
}
.act-Share .Share-head .name:after{
	content: "";
	border-bottom: 4px #333 solid;
	display:block;
	margin-top: 15px;
}
.act-Share .Share-head .left{
	margin: 15px 0 0 30px;
	color: #999;
}
.act-Share .details{
    margin-top: 25px;
}
.act-Share .details a:visited{
	color: #A9874A;
}
.act-Share .details:first-letter{
	color: #f00;
	font-size: 24px;
}
/* act-Share end */

/* act-Designers */
.act-Designers .picList li{
	width: 320px;
	position: relative;
	margin: 0 20px;
}
.act-Designers .picList li:nth-child(2n){
	transition-delay: 0.25s;
}
.act-Designers .picList li:nth-child(3n){
	transition-delay: 0.5s;
}
.act-Designers .picList li:hover .imgbox img{
	transform:scale(1.1);
	-webkit-filter: saturate(1);
	filter: saturate(1);
}
.act-Designers .picList .imgbox{
	width: 100%;
	height: 320px;
}
.act-Designers .picList .text{
	padding: 15px 25px;
	background: #383838;
	color: #fff;
	height: 135px;
}
.act-Designers .picList .text .con{
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.68;
	word-break:break-all;
	text-overflow:ellipsis; /*显示为省略号*/
	display:-webkit-box;/*对象作为伸缩盒子模型显示*/
	-webkit-box-orient:vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/
	-webkit-line-clamp:3;/*显示行数*/
	color: #eee;
}
.act-Designers .picList .text a{
	font-size: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
/* act-Designers end */

/* act-Wonerful */
.act-Wonerful .picScroll-left{
	padding: 0 120px;
}
.act-Wonerful li{
	text-align: center;
	height: 560px;
	position: relative;
}
.act-Wonerful .pageState{
	position: absolute;
	bottom: 50px;
	right: 170px;
	z-index: 1;
	color: #fff;
	font-size: 24px;
}
.act-Wonerful .pageState span{
	color: #f00;
	font-size: 34px;
	padding-right: 5px;
	font-weight: bold;
}
.act-Wonerful .bd{
	border: 1px #e5e5e5 solid;
	background: #323232;
}
.act-Wonerful li img{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
/* act-Wonerful end */

/* act-work */
.act-Work .Piclist ul>li{
  width: 31.6%;
  margin-top: 30px;
  position: relative;
  overflow: hidden;
}
.act-Work .Piclist ul>li:nth-child(1),.act-Work .Piclist ul>li:nth-child(2),.act-Work .Piclist ul>li:nth-child(3){
  margin-top: 0;
}
.act-Work .Piclist ul>li:nth-child(3n){
  margin-right: 0;
}
.act-Work .Piclist ul>li:nth-child(6n){
	transition-delay: 1.25s;
}
.act-Work .Piclist ul>li:nth-child(6n-1){
	transition-delay: 1s;
}
.act-Work .Piclist ul>li:nth-child(6n-2){
	transition-delay: 0.75s;
}
.act-Work .Piclist ul>li:nth-child(6n-3){
	transition-delay: 0.5s;
}
.act-Work .Piclist ul>li:nth-child(6n-4){
	transition-delay: 0.25s;
}
.act-Work .Piclist ul>li:nth-child(6n-5){
	transition-delay: 0.0s;
}
/* .act-Work .Piclist ul>li:nth-child(1){
	transition-delay: 0s;
} */
.act-Work .Piclist .imgbox{
  height: 240px;
}
.act-Work .Piclist li:hover .mask{
	bottom: 0;
}
.act-Work .Piclist li:hover .imgbox img{
	transform:scale(1.1);-webkit-filter: saturate(1);filter: saturate(1);
}
.act-Work .Piclist .mask{
	position: absolute;
	bottom: -48px;
	background: rgba(0,0,0,0.7);
	color: #ccc;
	padding: 12px 25px;
	transition: all 0.4s ease-out;
}
.act-Work .Piclist .mask>div{
	text-overflow: ellipsis;
	white-space: nowrap;
}
.act-Work .Piclist .mask .left{
	font-size: 14px;
	max-width: 210px;
}
.act-Work .Piclist .mask .userimg{
	max-width: 100px;
    margin-left: 5%;
}
.act-Work .Piclist .mask a{
	color: #999;
}
/* act-work end */

.tp-nav{position: fixed;width: 140px;top: 15vh;right: 5vw;}
.tp-nav>.nav-head{position: relative;}
.tp-nav>.nav-head:before{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	content: "";
	width: 1px;
	height: 100%;
	background: #444;
	margin: auto;
	z-index:-1;
}
.tp-nav ul{overflow:hidden;}
.tp-nav li{width: 100%;text-align: center;float: left;border-bottom: 1px #efefef solid;padding: 4px;font-size: 15px;background: #fff;}
.tp-nav li:last-child{/* border-bottom:none; */}
.tp-nav li span{
    cursor: pointer;
    display: block;
    width: 128px;
    height: 34px;
    line-height: 34px;
    border: 1px #777 solid;
}
.tp-nav li.active{
	background: #444;
	border-color: #444;
	color: #fff;
}
.tp-nav li.active span,.tp-nav li.active:hover span{
	color:#fff;
	border-color: rgba(255,255,255,0.7);
}
.tp-nav li:hover,.tp-nav li:hover span{
	color: #f00;
}
.tp-nav li,.tp-nav .ewm{
	border: 1px #777 solid;
	margin-bottom: 10px;
	box-sizing: border-box;
}

.tp-nav .ewm{
	background: #fff;
	margin-bottom: 0;
	padding: 10px 0;
}
.qrcode{margin: 0 auto 10px;position: relative;border: 1px #999 solid;height: 110px;width: 110px;}
.qrcode canvas{width: 100px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
.tp-nav p{line-height: 12px;font-size:12px;font-weight:normal;color: #666;margin-bottom: 3px;text-align:center;}
.tp-nav button{
	margin: 40px auto 0;
	border: none;
	border-radius: 100%;
	display: block;
	width: 50px;
	height: 50px;
	background: #e5e5e5;
	cursor: pointer;
}
.tp-nav button:hover{
	background: #d5d5d5;
}
.none{
  display: none;
}