.stylr{display: grid;
grid-template-columns: auto 35% 35%;
grid-gap: 0px 20px;
width: calc(100% - 0px);padding: 0px 30px;transition: filter 0.3s ease-in,transform 1.1s ease;}
.lo33{ grid-template-columns: calc( 20% - 0px) calc(40% - 0px)  40% !important;}
.stylr div{position:relative;overflow:hidden;background:#fff;
/*box-shadow: 0 12px 20px #14141420;*/
border-radius:0px;}

.source{transition: filter 0.3s ease-in,transform 1.1s ease;margin-right:4px;padding:0px 20px 20px 0}
.source h1{font-size:1.6rem;font-weight:600;margin-bottom:16px}
.source p{line-height:180%;font-size:1rem}
.styles{margin-right:4px}
.stylr  .source img,.stylr  .styles img,.stylr  .wc img{width:100%;object-fit:cover;height:100%;border-radius:0px;
/*transition: filter 0.5s ease-in,transform 0.4s ease;*/
}
.stylr  .styles{display:flex;align-items: center;justify-content:end}
.stxt{display:flex;padding:0 0px;overflow:auto;flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;padding-bottom:15px;width:calc(100% - 60px);margin:0 30px;margin-bottom:10px;}
 .stxt .sname{padding:8px 12px;cursor:pointer;margin-right:8px;
 white-space: nowrap;
/*overflow: hidden;*/
/*text-overflow: ellipsis;*/
}
.wc,.styles{
/*box-shadow: 0 12px 20px #14141420;*/
}
.stxt .sname.selected,.stxt .sname:hover{color:#fff;
background: linear-gradient(102.51deg,rgba(255,0,153,.68) 9.6%,#ff3d00 95.98%);
border-radius:30px;
}
.shake{
            animation: shake 800ms ease-in-out;
        }
 @keyframes shake { /* 水平抖动，核心代码 */
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(+2px, 0, 0); }
            30%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(+4px, 0, 0); }
            50% { transform: translate3d(-4px, 0, 0); }
        }
.a3 {
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-animation: scaleUp 0.45s ease-in-out forwards;
animation: scaleUp 0.45s ease-in-out forwards;opacity: .0
}
@-webkit-keyframes scaleUp {
0% { opacity: .0}
100% { -webkit-transform: scale(1); opacity: 1; }
}
@keyframes scaleUp {
0% { opacity: .0}
100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

.a2 {
	-webkit-transform: translateX(-600px);
	transform: translateX(-600px);
	-webkit-animation: moveRight 0.65s ease forwards;
	animation: moveRight 0.65s ease forwards;opacity: .3;filter:blur(10px);
}

@-webkit-keyframes moveRight {
	0% { opacity: .3;filter:blur(10px);}
	100% { -webkit-transform: translateX(0); opacity: 1; ;filter:blur(0px);}
}

@keyframes moveRight {
	0% { opacity: .3;filter:blur(10px);}
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; ;filter:blur(0px);}
}

.a4 {
	-webkit-transform: translateX(600px);
	transform: translateX(600px);
	-webkit-animation: moveLeft 0.65s ease forwards;
	animation: moveLeft 0.65s ease forwards;opacity: .3;filter:blur(10px);
}

@-webkit-keyframes moveLeft {
	0% { opacity: .3;filter:blur(10px);}
	100% { -webkit-transform: translateX(0); opacity: 1; ;filter:blur(0px);}
}

@keyframes moveLeft {
	0% { opacity: .3;filter:blur(10px);}
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; ;filter:blur(0px);}
}

.blurs{filter:blur(10px);}
.a4 {
filter:blur(30px);
	-webkit-animation: blur 0.65s ease forwards;
	animation: blur 0.65s ease forwards;opacity: .1
}

@-webkit-keyframes blur {
	0% { opacity: .1}
	100% { filter:blur(0); opacity: 1; }
}

@keyframes blur {
	0% { opacity: .1}
	100% {filter:blur(0); transform: translateY(0); opacity: 1; }
}
.source{position:relative}
#loading,#loading2{position:absolute;top:50%;left:50%;display:block;-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%);z-index:10;}
.progressing {
width:20%;
height:20px;
border-radius:10px !important;
color: #0080ff;background:rgba(255,255,255,.4) !important;
border:0px solid;
/*position: relative;*/
/*margin:0 auto;*/
}
.progressing::before {
content:"";
position: absolute;
margin:0px;
inset:0 100% 0 0;
border-radius: inherit;border:2px solid rgba(255,255,255,.7);
background:linear-gradient(102.51deg,rgba(255,0,153,.68) 9.6%,#ff3d00 95.98%);
animation:loadani 2.5s infinite;
}
@keyframes loadani {
100% {inset:0}
}
.opa0{opacity:0}
.s3c{background:#fff;padding:0px;}
.s3c h1{margin-bottom:16px;font-size:1.8rem}
.sence3{display: grid;
  grid-template-columns: 500px auto;
  grid-gap: 0px;
margin:0 30px;width:calc(100% - 60px);margin-top:80px;padding:0}
.sence3 .ui img{width:100%}

@media screen and (max-width:900px) {
.navFixed{display:none !important}
 .stylr {
    display: grid;
    grid-template-columns: 100% !important;
    grid-gap: 30px 0px !important;
  }
  .sence3{
display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  grid-gap: 20px 0;

}
}
.s2c{background:#fff}
.qrxcx{width:160px;margin:0 auto}