.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:radial-gradient(circle at 0 0,rgba(255,0,153,.39) 20%, #00f0cd 100%);
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:radial-gradient(circle at 0 0,rgba(255,0,153,.39) 20%, #00f0cd 100%);
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}

.tnavsub{
    display: none;
    position: absolute;
    background: #fff;
    min-width: 170px;
    z-index: 1;top:8px;border-radius:20px;padding:10px;box-shadow: 0 12px 40px #14141420;
}
.tnavsub a {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    display: block;margin:0
}
.navType:hover .tnavsub {display: block;}
.topnav:hover .navType a{}
#nav .navType:hover .tnavsub a{background:none !important;color:#222}
#nav .navType .tnavsub a:hover{background:radial-gradient(circle at 0 0,rgba(255,0,153,.6) 50%, #00f0cd 100%) !important;color:#fff}
#nav .navType.hasSub a.tmenu:hover{background:initial !important;color:initial !important;display:none}
#nav .navType.hasSub a.tmenu{background:initial !important;color:initial !important;}

 .sencePM{
width:100%;

height: calc(100vh - 65px);
max-height:900px;
background-position:0 0;
/*background-image: url(/static/ciyun/2024/tu/sence27.jpg);*/
background-repeat: no-repeat;
background-size:cover;
background-color: #fff;text-align:center;cursor:pointer;
position:relative;
}
.dtips {
font-size: 14px;

}
.dtips[data-title] {
position: relative;
}
.dtips[data-title]:focus::before,
.dtips[data-title]:focus::after,
.dtips[data-title]:hover::before,
.dtips[data-title]:hover::after {
opacity: 1;
visibility: visible;
transition: 0.15s 0.15s;
}
.dtips::before {
content: attr(data-title);
padding:6px 12px;
border-radius: 16px;
color: #eee;
background: #333;
pointer-events: none;
}
.dtips::after {
content: "";
width: 0;
height: 0;
color: #333;
overflow: hidden;
pointer-events: none;
}
.dtips[data-dir="top"]::after,
.dtips[data-dir="top"]::before {
position: absolute;
left: 50%;
bottom: 140%;
transform: translateX(-50%);
white-space: nowrap;
opacity: 0;
visibility: hidden;
}
.dtips[data-dir="top"]::after {
margin-bottom: -1em;
border: 0.6em solid transparent;
border-top-color: currentColor;
}
.dtips[data-dir="bottom"]::after,
.dtips[data-dir="bottom"]::before {
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
white-space: nowrap;
opacity: 0;
visibility: hidden;
}
.dtips[data-dir="bottom"]::after {
margin-top: -1em;
border: 0.6em solid transparent;
border-bottom-color: currentColor;
}
.dtips[data-dir="left"]::after,
.dtips[data-dir="left"]::before {
position: absolute;
top: 50%;
right: 100%;
transform: translateY(-50%);
white-space: nowrap;
opacity: 0;
visibility: hidden;
}
.dtips[data-dir="left"]::after {
margin-right: -1em;
border: 0.6em solid transparent;
border-left-color: currentColor;
}
.dtips[data-dir="right"]::after,
.dtips[data-dir="right"]::before {
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
white-space: nowrap;
opacity: 0;
visibility: hidden;
}
.dtips[data-dir="right"]::after {
margin-left: -1em;
border: 0.6em solid transparent;
border-right-color: currentColor;
}
.dtips[data-dir="center"]::after,
.dtips[data-dir="center"]::before {
position: absolute;
top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); 
white-space: nowrap;
opacity: 0;
visibility: hidden;
}
.dtips[data-dir="center"]::after {
margin-top: -1.6em;
border: 0.6em solid transparent;
border-bottom-color:currentColor;
}