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

.header{
    padding: 0.3rem 0.4rem;
    border-bottom: 1px #e5e5e5 solid;
}
.head .col_right{
	line-height: 0.6rem;
}
.templatenav{
	background: #333;
	overflow: hidden;
}
.templatenav a:first-child{
	background: #f00;
    font-weight: bold;
}
.templatenav a{
	float: left;
	width: 25%;
	color: #fff;
	padding: 0.25rem 0;
	text-align: center;
	font-size: 0.37rem;
}
.container{}
.container>section{
  margin: 0 auto 1.2rem;
  width: 100%;
}

/* title */
.container>section>.title{
	text-align: center;
	margin-bottom: 0.6rem;
}
.container>section>.title i{
	font-size: 0.7rem;
	position: relative;
	padding: 0 1.5em;
	font-weight: bold;
	color: #333;
}
.container>section>.title i:before,.container>section>.title i:after{
	content: "///";
	font-size: 0.32rem;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	height: 0.43rem;
}
.container>section>.title i:before{
	left: 0;
}
.container>section>.title i::after{
	right: 0;
}
.container>section>.title .em{
	font-size: 0.32rem;
	letter-spacing: 0.32rem;
	padding-left: 0.32rem;
	line-height: 1;
	color: #f00;
}
/* title end */

/* act-Foot */
.act-Foot{
  text-align: center;
  border-top: 1px #d5d5d5 dashed;
  width: 100%;
  margin: auto;
  padding: 1rem 0.2rem 0.6rem;
}
.act-Foot .title{
  margin-bottom: 15px;
  font-size: 0.43rem;
  font-weight: bold;
  color: #333;
}
.act-Foot>.title i{
	position: relative;
	padding: 0 2em;
}
.act-Foot>.title i:before,.act-Foot>.title i:after{
	content: "///";
	font-size: 0.32rem;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	color: #EA1A21;
	margin-top: 0.05rem;
}
.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-left: 0.4rem;
}
a.prev,a.next{
    background-color: rgba(206,174,123,0.6);
    background-image: url(https://www.ceramicschina.com/Content/ztw2020_img/arrows_w.png);
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: 0.25rem;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0.4rem;
    height: 1rem;
    width: 1rem;
    border-radius: 100%;
    z-index: 9;
}

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

.banner{
	height: 6rem;
	position: relative;
	overflow: hidden;
}
.banner img{
	height: 100% !important;
	max-height: revert;
	max-width: revert;
	margin: auto;
	position: absolute;
	left: -50%;
	right: -50%;
}

/* act-Info */
.act-Info{
	background: #fff;
	padding: 0.6rem 0.4rem 1rem;
	text-align: justify;
	box-sizing: border-box;
	margin-top: 0.6rem !important;
	border-radius: 0.2rem;
	position: relative;
}
.act-Info:after{
	background: url(../ztw2022_img/designer/Infobg.webp) no-repeat;
	content: "";
	width: 0.68rem;
	height: 0.68rem;
	display: block;
	position: absolute;
	right: 0.4rem;
	background-size: 0.68rem;
}
/* act-Info end */

/* act-Share */
.act-Share .row{
	margin-bottom: 0.6rem;
	position: relative;
	min-height: 250px;
	display: table;
	border-radius: 0.2rem;
	overflow: hidden;
}
.act-Share .row:last-child{
	margin-bottom: 0px;
}
.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.6rem;
	left: auto;
}
.act-Share .row:nth-child(2n) .Share-head{
	text-align: left;
	padding: 0 3.5rem 0 0.2rem;
}
.act-Share .row:nth-child(2n) .text>div{
	padding: 0.6rem 0.4rem;
}
.act-Share .row:nth-child(2n) .Share-head>div{
	float: right;
	text-align: right;
	position: relative;
}
.act-Share .row:nth-child(2n) .name:after{
    text-align: right;
    position: absolute;
    right: 0;
}
.act-Share .imgbox{
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 100%;
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index:9;
}
.act-Share .imgbox img{
	bottom: revert;
	min-height: 100%;
}
.act-Share .text{
	position: relative;
	/* padding-left: 1.5rem; */
	min-height: 4rem;
	display: table-cell;
	vertical-align: middle;
}
.act-Share .text>div{
	background: #fff;
	padding: 0.6rem 0.4rem;
	min-height: 190px;
	text-align: justify;
}
.act-Share .Share-head{
	padding-left: 3.5rem;
	padding-right: 0.2rem;
	margin: 0.2rem 0 0.2rem;
	display: inline-block;
	min-height: 2.3rem;
	width: 100%;
}
.act-Share .Share-head .name{
	font-size: 0.6rem;
	/* float: left; */
	line-height: 1;
	color: #333;
	width: 100%;
	height: 1rem;
}
.act-Share .Share-head .name:after{
	content: "";
	border-bottom: 3px #333 solid;
	display:block;
	margin-top: 15px;
	width: 3em;
}
.act-Share .Share-head .left{
	margin: 0.32rem 0 0 0;
	color: #999;
	text-align: justify;
}
.act-Share .details{
    margin-top: 0.48rem;
    padding: 0.4rem 0 0;
    border-top: 1px #ddd dotted;
}
.act-Share .details p{
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	text-align: justify;
	white-space: revert;
	overflow: hidden;
	padding: 0 0.2rem;
}
.act-Share .details .more{
	margin-top: 0.4rem;
	/* border-top: 1px #ddd solid; */
	/* padding-top: 0.4rem; */
	text-align: center;
}
.act-Share .details a:visited{
	color: #A9874A;
}
.act-Share .details:first-letter{
	color: #f00;
	font-size: 24px;
}
/* act-Share end */

/* act-Designers */
.act-Designers .swiper-wrapper{
	padding-bottom: 0.9rem;
}
.act-Designers .swiper-pagination{
	bottom: 0;
}
.act-Designers .swiper-pagination-bullet-active{
	background: #ceae7b;
}
.act-Designers .picList li{
	width: 7.5rem;
	position: relative;
	border-radius: 0.2rem;
	overflow: hidden;
}
.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%;
}
.act-Designers .picList .imgbox img{
	position: revert;
}
.act-Designers .picList .text{
	padding: 0.4rem 0.68rem;
	background: #383838;
	color: #fff;
	height: 3.5rem;
}
.act-Designers .picList .text .con{
	margin-top: 0.15rem;
	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;
}
.act-Wonerful li{
	text-align: center;
	max-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 .swiper-pagination{
	position: revert;
	margin-top: 0.32rem;
}
.act-Wonerful .swiper-pagination-current{
	color: #f00;
	font-weight: bold;
}
.act-Wonerful li img{
}
/* act-Wonerful end */

/* act-work */
.act-Work .Piclist ul>li{
  width: 100%;
  margin-bottom: 0.6rem;
  position: relative;
  overflow: hidden;
  border-radius: 0.2rem;
}
.act-Work .Piclist ul>li:last-child{
	margin-bottom: 0;
}
.act-Work .Piclist .imgbox{
  /* height: 6rem; */
}
.act-Work .Piclist .imgbox img{position: relative;}
.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: 0;
	background: #fff;
	color: #ccc;
	padding: 0.32rem 0.4rem;
	transition: all 0.4s ease-out;
	width: 100%;
	overflow: hidden;
}
.act-Work .Piclist .mask>div{
	text-overflow: ellipsis;
	white-space: nowrap;
}
.act-Work .Piclist .mask .left{
	font-size: 0.37rem;
	max-width: 5.5rem;
	float: left;
	overflow: hidden;
	color: #666;
}
.act-Work .Piclist .mask .userimg{
	max-width: 2.67rem;
	margin-left: 5%;
	float: right;
	height: 0.6rem;
	line-height: 0.6rem;
	overflow: hidden;
}
.act-Work .Piclist .mask .userimg img{
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 100%;
}
.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;
}

@media screen and (min-width:480px){
	html{font-size:45px;}
}
@media screen and (min-width:680px){
	html{font-size:60px;}
}