@charset "utf-8";

:root{
	--brown:#b2837d;
}
body{font-size:medium;}
.diy-web-container{padding-top:18.5%;min-height:100vh;background-position:center top;background-repeat:no-repeat;background-size:100% auto;}
.diy-header{display:none;}
.diy-container{margin:0 auto;padding:15px;width:1370px;min-height:60vh;background-color:#fff;border-top-right-radius:15px;border-top-left-radius:15px;}
.diy-containere div:after, .diy-container ul:after{display:none;}
.condition-item{display:flex;margin-bottom:10px;padding-bottom:10px;}
.condition-item:not(:last-child){border-bottom:1px solid #f5f5f5;}
.condition-item .t{font-weight:bold;padding:3px 5px;white-space:nowrap;}
.condition-item ul{display:flex;flex-grow:1;flex-wrap:wrap;}
.condition-item li{padding:3px 10px;cursor:pointer;border-radius:5px;}
.condition-item li:hover{color:var(--brown);}
.condition-item li.on{background:var(--brown);color:#fff;}
.condition-row{display:flex;align-items:center;}
.condition-row:nth-child(-n+2){margin-right:50px;}
.condition-row .search{background-color:var(--brown);}
.condition2{display:none;}
.image .item a{cursor:pointer;position:relative;}
.image .item em{width:100%;height:0;padding-top:66.66%;font-style:normal;}
.image .item em div{position:absolute;z-index:1;top:0;left:0;padding:3px 5px;border-bottom-right-radius:5px;font-size:12px;color:#fff;}
.image .item em div.not-started,.image .item a div.living{background-color:#f35;}
.image .item em div.playback{background-color:#4E6EF2;}
.image .item em div.ended{background-color:#768CAE;}
.image .item em img{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);}
.image .item em p{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px;width:100%;height:100%;color:#fff;text-align:center;background-color:rgba(0,0,0,.5);}
.image .item em strong{font-size:large;}
.image .item em span{position:static;transform:translateY(0);}
.image .info{padding:15px 15px 10px;background-color:#fff;color:#333;}
.image .info strong{display:block;height:3em;line-height:1.5em;font-weight:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.image .info ul{display:flex;margin-top:5px;gap:10px;align-items:center;justify-content:space-between;font-size:14px;color:#888;}
.image .info li{flex:0 1 auto;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.image .info li:last-child{flex-shrink:0;}
.web-title{margin:20px 0;}
.preview{padding-bottom:20px;}
.preview-list .image .info ul{display:block;}
.preview-list .image .info li:first-child{color:var(--red);}
.preview-list .image .info .layui-icon{vertical-align:middle;}
@media(max-width:1399px){
	.diy-container{width:1170px;}
	.image .item{width:33.333333%;}
}
@media(max-width:1199px){
	.diy-container{width:970px;}
	.condition-row:nth-child(-n+2){margin-right:20px;}
	.image{margin-right:-10px;margin-left:-10px;}
	.image .item{padding:10px;}
}
@media(max-width:991px){
	.diy-container{width:100%;}
	.condition-row:nth-child(-n+2){margin-right:10px;}
}
@media(max-width:840px){
	.diy-web-container{padding-top:0;background-image:none;}
	.sdpcc-home{display:none;}
	.diy-header{display:block;}
	.breadnav{padding-left:15px;}
	.condition{display:none;}
	.condition2{display:block;margin:0 -10px 5px;}
	.condition2-item{float:left;padding:0 10px;width:33.333333%;}
	.image .item{width:50%;}
}
@media(max-width:767px){
	.condition2{margin:0 -7px 7px;}
	.condition2-item{padding:0 7px;}
}
@media(max-width:600px){
	.breadnav{padding-top:8px;padding-bottom:8px;}
	.breadnav img{max-height:32px;}
	.condition2-item{width:50%;}
	.image{margin-right:-7px;margin-left:-7px;}
	.image .item{padding:7px;}
	.image .info{padding:10px;}
	.image .item em p{gap:0;}
}
@media(max-width:479px){
	.image .info{padding:8px;gap:0;}
	.image .info li:last-child{display:none;}
	.image .item em p strong{font-size:medium;}
	.image .item em p span{font-size:14px;}
	.preview-list .item{width:100%;}
	.preview-list .info li:last-child{display:block;}
}