* {margin: 0;padding: 0;box-sizing: border-box;}
a {text-decoration: none;color: #898989;}
html {background: #1E1E1E;--side-width:320px;}
body {display: flex;}
li {list-style: none;}
button {border: none;cursor: pointer;}
::-webkit-scrollbar {width: 0px;height: 0px;}

#video-main {margin-left: var(--side-width);flex:1;}
#video-main .main {max-width: 1800px;margin: 0 auto;margin-bottom: 60px;}
@media screen and (max-width: 1400px) {#video-main {margin-left:0}}

@media screen and (max-width: 2200px) {#video-main .main {max-width: 1600px;}}
@media screen and (max-width: 2000px) {#video-main .main {max-width: 1400px;}}
@media screen and (max-width: 1800px) {#video-main .main {max-width: 1200px;}}
@media screen and (max-width: 1600px) {#video-main .main {max-width: 1000px;}}
@media screen and (max-width: 1400px) {#video-main .main {max-width: 1200px;}}
@media screen and (max-width: 1400px) {#video-main .main {max-width: 1000px;}}
@media screen and (max-width: 1000px) {#video-main .main {max-width: 800px;padding: 0 10px;}}
/*左侧导航*/
#video-side {width: var(--side-width );height: 100vh;overflow: auto;position: fixed;z-index: 2;background: #2C2C2C;display: flex; flex-direction: column; justify-content: space-between;padding: 18px 26px;box-shadow: rgb(180, 150, 150) 0.1px 0px 2px;}

#video-side .logo {padding: 0 14px;}
#video-side .logo img {width: 100%;}
#video-side .menu { display: flex;flex-direction: column;flex: 1;margin-top: 20px;}
#video-side .menu .item {padding: 12px 20px; background: #1E1E1E; margin: 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;}
#video-side .menu .item svg {margin-right:10px;fill: #999;}
#video-side .menu .item a {font-size: 20px;}
#video-side .menu .item:hover svg {fill: #EECFAF;}
#video-side .menu .item:hover span {color: #EECFAF;}
#video-side .menu .item.active svg {fill: #EECFAF;}
#video-side .menu .item.active span {color: #EECFAF;}

#video-side .menu .submenu {display: grid;grid-template-columns: repeat(3,1fr);gap: 10px;margin: 8px;}
#video-side .menu .submenu a {background: #1E1E1E; border-radius: 5px; padding: 4px 6px;display: flex;justify-content: center;align-items: center;font-size: 14px;}
#video-side .menu .submenu a:hover {color: #EECFAF;}

#video-side .copy .guide {display: flex;width: 100%;justify-content: center;opacity: .6;margin-bottom: 30px;}
#video-side .copy .guide img {width: 94%;}
#video-side .copy p {color: #999;font-size: 12px;}
#video-side .copy p.large {padding: 0 10px;}
#video-side .copy p.small {white-space: nowrap;margin-top: 10px;}

@media screen and (max-width: 1400px) { #video-side {display: none;}}

#video-side .copy .link {margin-bottom: 30px;}
#video-side .copy .link p {text-align: center;display: flex;justify-content: center;flex-wrap: wrap;}
#video-side .copy .link p a {margin: 0 10px;font-size: 14px;}

#video-side-menu {
	position: absolute;
	top: 15px;
	left: 15px;
	background: #FF5B82;
	width: 38px;
	height: 38px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	fill: #fff;
}
#video-side-menu svg {
	width: 20px;
	height: 20px;
}

/*顶部公告*/
#video-main .find {display: flex; justify-content: center; align-items: center; padding: 70px 0; background-image: linear-gradient(265deg, #dbb277 16.67%, #ff99004f 16.67%, #40d16e00 50%, #1e1e1e 50%, #000000 66.67%, #000000 66.67%, #dab17600 100%); background-size: 60.00px 60.00px;}
#video-main .find .find-main {width: 90%; border: 2px solid #dbb277; border-radius: 100px; display: flex; height: 50px;align-items:center;background:#252525; justify-content: space-between;border-left: 5px solid #1D72F3;}
#video-main .find .find-main svg {fill: #898989; margin: 0 10px;}
#video-main .find .find-main input {height: 100%; flex: 1; background: transparent; border: none; outline: none; color: #898989; font-size: 16px;min-width: 0;}
#video-main .find .find-main button {background: #dbb27717; border-radius: 1px; height: 100%; color: #eee; font-size: 14px; width: 100px;}
/*在线区鼠标移动*/ 
#video-main > div.main > center > a{color: #a9a9a9;}
#video-main > div.main > center > a:hover{color: #ffffff;border: 1px solid #898989;}
#video-main > div.main > center > a:hover{transform: translateY(-2px);}			
/*信息区info免费安全无毒*/
#video-main .info {background: #2C2C2C; color: #fff; display: flex; border-radius: 100px; padding: 16px 20px; font-size: 16px;margin: 20px 0;}
#video-main .info .item {display: flex;align-items: center;margin-right: 10px;}
#video-main .info .item .text { display: flex;align-items: center;}
#video-main .info .item svg {fill: #999;margin-right: 10px;}
#video-main .info .item p {color: #999;display: flex;align-items: center;}
#video-main .info .item b {color: #FF5B82;margin: 0 4px;    font-family: system-ui;}

@media screen and (max-width: 750px) {
#video-main .info {border-radius: 10px;}
#video-main .info .item {flex: 1;align-items: center;margin: 0;}
#video-main .info .item .text {flex-direction: column; align-items: start; margin-left: 10px;}
#video-main .info .item b {margin: 0;}
#video-main .info .item svg {margin: 0;}
}	
/*资源导航*/
.list-title {margin: 20px 0;color: #EECFAF;display: flex;align-items: center;}
.list-title svg {margin-right: 10px;fill: #EECFAF;}
.list-title h2 {flex: 1;display: flex;align-items: center;}
.list-title h2 .mark {font-size: 14px;font-weight: normal;background: #FF5B82;height: 26px;line-height: 26px;margin-left: 12px;padding: 0 10px;border-radius: 10px;color: #fff;}	  

/*资源导航内容*/
.website {display: flex;margin-bottom: 20px;flex-wrap: wrap;}
.website .item {width: calc(14.28% - 12px);margin: 6px;background: #2C2C2C;display: flex;align-items: center;border-radius: 6px;padding: 10px;position: relative;}
.website .item:hover {color: #EECFAF;}
.website .item .detail {overflow: hidden;flex: 1;}
.website .item img {height: 58px; width: 58px; border-radius: 50%; overflow: hidden;object-fit: cover;margin-right: 10px;flex-shrink: 0;}
.website .item .small {font-size: 12px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.website .item .mark {position: absolute;right: 10px;top: 0;font-size: 12px;background: #878787;border-radius: 0 0 5px 5px;color: #1E1E1E;padding: 2px 4px;}
@media screen and (max-width: 1800px) {.website .item {width: calc(20% - 12px);}}
@media screen and (max-width: 1600px) {.website .item {width: calc(25% - 12px);}}
@media screen and (max-width: 800px) {.website .item { width: calc(50% - 12px);} .website .item .detail {flex: auto;width: 170px;}}  

/*分类页分类简介*/	
.webinfo {width: 100%;background: #2C2C2C;margin: 20px 0;border-radius: 10px;color: #999;padding: 10px;display: flex;align-items: center;}
.webinfo .thumb {width: 60px;height: 60px;border-radius: 50%;overflow: hidden;margin-right: 10px;flex-shrink: 0;}
.webinfo .thumb img {width: 100%;height: 100%;}
.webinfo .detail .large {font-weight: 600;}
.webinfo .detail .small {font-size: 12px;}		  

/*分类页视频列表*/
#video-main .list {display: flex;flex-wrap: wrap;align-content: flex-start;}
#video-main .list .item {width: calc(16.66% - 12px); margin: 6px; background: #2C2C2C; border-radius: 4px;transition: 0.6s;}
#video-main .list .item:hover {transform: translateY(-6px); box-shadow: 0 34px 20px -24px rgba(0, 0, 0, 0.8);  }
#video-main .list .item .thumb {position: relative;width: 100%;height: 180px;border-radius:4px;overflow: hidden;}
#video-main .list .item .thumb .icon {opacity: 0;transition: all .6s; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);background: #000000; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 23px; fill: #fff; border-radius: 50%;}
#video-main .list .item:hover .thumb .icon {opacity: 1;}
#video-main .list .item .thumb .icon svg {width: 16px;}
#video-main .list .item .thumb img {width: 100%; height: 100%; object-fit: cover;}
#video-main .list .item .thumb .duration {position: absolute;right: 10px;bottom: 10px;z-index: 1;background: rgba(0,0,0,.5);border-radius: 4px;padding: 2px 4px;color: #fff;font-size: 12px;}
#video-main .list .item .title {height: 40px;overflow: hidden;margin: 4px;}
#video-main .list .item .title p {color: #ffffff;font-size: 16px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#video-main .list .item .detail {margin: 0 10px 10px;}
#video-main .list .item .detail span {font-size: 12px;}
#video-main .list .empty {color: #999;}
@media screen and (max-width: 2200px) {#video-main .list .item {width: calc(20% - 12px);}}
@media screen and (max-width: 2000px) {#video-main .list .item {width: calc(25% - 12px);}}
@media screen and (max-width: 1800px) {#video-main .list .item {width: calc(33.33% - 12px);}}
@media screen and (max-width: 1600px) {#video-main .list .item {width: calc(33.33% - 12px);}}
@media screen and (max-width: 1400px) {#video-main .list .item {width: calc(25% - 12px);}}
@media screen and (max-width: 1200px) {#video-main .list .item {width: calc(33.33% - 12px);}}
@media screen and (max-width: 1000px) {#video-main .list .item {width: calc(50% - 12px);}}
@media screen and (max-width: 750px) {#video-main .list .item .thumb { height: 150px;}}
@media screen and (max-width: 470px) {#video-main .list .item .thumb { height: 120px;}}

/*播放器下标题*/
#video-main .watch #suggest {flex:1;background: #2C2C2C;border-radius: 4px;padding: 20px;color: #898989;display: flex;flex-direction: column;justify-content: space-between;}
#video-main .watch #suggest .title {margin-bottom: 10px;}
#video-main .watch #suggest .title>h4 {font-size: 20px;margin-bottom: 10px;}
#video-main .watch #suggest .title>div {display: flex;}
#video-main .watch #suggest .title>div>span {display: flex;align-items: center;font-size: 12px;}
#video-main .watch #suggest .title>div>span svg {fill: #999;margin-right: 10px;}
#video-main .watch #suggest .title>div>span p {margin-right: 10px;}

#video-main .watch #suggest .detail {flex: 1;margin-bottom: 10px;}
#video-main .watch #suggest .detail .table {border-radius: 6px; overflow: hidden; margin-top: 20px;}
#video-main .watch #suggest .detail .table .item {font-size: 14px; display: flex; background: #1E1E1E; border: 1px solid #333; padding: 5px 10px;}
#video-main .watch #suggest .detail .table .item dl {margin-right: 10px;flex-shrink: 0;}
#video-main .watch #suggest .detail .table .item dd {font-size: 12px;}

#video-main .watch #suggest .detail .label {margin-top: 10px;}
#video-main .watch #suggest .detail .label a {background: #1E1E1E;color: #999;padding: 4px 10px;border-radius: 4px;font-size: 12px;}

#video-main .watch #suggest .source {display: flex;flex-wrap: wrap;margin-top: 10px;}
#video-main .watch #suggest .source p {margin-bottom: 10px;width: 100%;}
#video-main .watch #suggest .source a {background: #FF5B82;color: #fff;border-radius: 4px;padding: 2px 4px;margin-right: 10px;margin-bottom: 10px;}

#video-main .watch #suggest .action {display: flex;justify-content: space-between;}
#video-main .watch #suggest .action button {background: #000;color: #fff;border-radius: 6px;display: flex;align-items: center;width: 48%;justify-content: center;padding: 10px 0;font-size: 16px;}
#video-main .watch #suggest .action button svg {fill: #fff;margin-right: 6px;}

@media screen and (max-width: 1800px) {
#video-main .watch {flex-direction: column;}
#video-main .watch #player {width: 100%;margin-bottom: 10px;}
}

/*资源站和资源站分类选择*/
.webslite {display: flex;flex-wrap: wrap;}
.webslite .item {background: #2C2C2C;margin-right: 10px;padding: 4px 10px;border-radius: 5px;margin-bottom: 10px;}
.webslite .item:hover {color: #EECFAF;}
.webslite .item.active {background: #FF5B83;color: #fff;}

@media screen and (max-width: 750px) {
	.webslite .item {
	width: calc(25% - 10px);
	text-align: center;
	font-size: 14px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	}
}					

/*按标签*/
@layer properties{@property --max-height{ syntax:"<number>"; inherits:true; initial-value:0; } @property --bg-x{ syntax:"<number>"; inherits:true; initial-value:50; } @property --bg-y{ syntax:"<number>"; inherits:true; initial-value:-200; } @property --scale{ syntax:"<number>"; inherits:true; initial-value:1; } @property --accent-color-hue{ syntax:"<number>"; inherits:true; initial-value:0; } @property --item-y{ syntax:"<number>"; inherits:true; initial-value:0; } @property --item-opacity{ syntax:"<number>"; inherits:true; initial-value:0; } @property --accent-color{ syntax:"<color>"; inherits:true; initial-value:hsl(calc(var(--accent-color-hue)*1deg), 100%, 58%); } @property --radial-bg-color{ syntax:"<color>"; inherits:true; initial-value:black; }}:root{ --background-color:hsl(222deg 17% 14%); --dark-color:hsl(227deg 37% 3%); --light-color:hsl(211deg 23% 51%); --accent-color-hue:219; --accent-color:hsl(calc(var(--accent-color-hue)*1deg) 100% 58%); --radial-bg-color:var(--dark-color); --max-height:0; --bg-y:-50; --bg-x:200; --item-y:20; --item-opacity:0; --_inner-radius:10; --_inner-padding:6; --inner-radius:calc(var(--_inner-radius) * 1px); --inner-padding:calc(var(--_inner-padding) * 1px); --outer-radius:calc(calc(var(--_inner-radius) + var(--_inner-padding)) * 1px); --debug:0; --a11y:0; --outline-color:hsla(calc(var(--accent-color-hue)*1deg) 100% 58% / calc(var(--a11y)*100%));}*,*:before,*:after{ box-sizing:border-box; outline:calc(var(--debug)*1px) dotted red; outline-offset:-1px;}html,body{ width:100%; height:100%; padding:0; margin:0;}body{ background:var(--background-color); font-family:"Mona sans",sans-serif;}main{ max-width:800px; margin:10em auto; padding:0; display:grid; grid-template-columns:repeat(1,1fr); grid-gap:32px; place-items:center; align-items:start;}@media (min-width:760px){ main{ grid-template-columns:repeat(3,1fr); }}header{ color:white;}header h3{ letter-spacing:0.15em;}div.select{ color:white; background:var(--dark-color) radial-gradient(ellipse 70% 70% at calc(var(--bg-x)*1%) calc(var(--bg-y)*1%),var(--radial-bg-color) 0%,var(--dark-color) 100%); padding:var(--inner-padding); border-radius:var(--outer-radius); position:relative; width:200px; z-index:1; transition:background 0.3s ease,--bg-y 0.4 ease,--bg-x 0.4s ease;}div.select:hover{ animation:glow 1.2s ease-in-out;}div.select:hover > button:after{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='98' fill='none'%3E%3Cpath fill='hsl(219deg 100% 58%)' d='M25.536 6c1.54-2.667 5.388-2.667 6.928 0l18.187 31.5c1.54 2.667-.385 6-3.465 6H10.814c-3.079 0-5.003-3.333-3.464-6L25.536 6ZM25.536 92c1.54 2.667 5.388 2.667 6.928 0l18.187-31.5c1.54-2.667-.385-6-3.465-6H10.814c-3.079 0-5.003 3.333-3.464 6L25.536 92Z'/%3E%3C/svg%3E") no-repeat center center/0.6em;}div.select:before{ content:""; display:block; position:absolute; width:calc(100% - 2px); height:calc(100% - 2px); top:1px; left:1px; background:var(--dark-color); border-radius:var(--outer-radius); z-index:-1;}div.select > button{ padding:calc(var(--inner-padding)*2) calc(var(--inner-padding)*2); background:var(--background-color); border-radius:var(--inner-radius); border:0; color:white; text-align:left; font-size:1em; width:100%; cursor:pointer; position:relative; box-shadow:inset 0 2px 1px -1px rgba(255,255,255,0.1); transform:scale(var(--scale)); animation-duration:0.2s; animation-timing-function:cubic-bezier(0.66,-0.82,0.33,1.73);}div.select > button:focus{ outline:1px solid var(--accent-color); outline-offset:-1px;}div.select > button:after{ content:""; position:absolute; right:8px; height:100%; width:1em; top:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='98' fill='none'%3E%3Cpath fill='hsl(211deg 23% 51%)' d='M25.536 6c1.54-2.667 5.388-2.667 6.928 0l18.187 31.5c1.54 2.667-.385 6-3.465 6H10.814c-3.079 0-5.003-3.333-3.464-6L25.536 6ZM25.536 92c1.54 2.667 5.388 2.667 6.928 0l18.187-31.5c1.54-2.667-.385-6-3.465-6H10.814c-3.079 0-5.003 3.333-3.464 6L25.536 92Z'/%3E%3C/svg%3E") no-repeat center center/0.6em;}div.select > div{ display:flex; flex-direction:column; overflow:hidden; height:0; transition:height 0.3s ease-in-out; color:#9f9f9f; overflow-y:auto; position:relative; max-height:415px;}div.select > div > a{ display:block; padding:calc(var(--inner-padding)*1.6) calc(var(--inner-padding)*1.2); color:var(--light-color); cursor:pointer; margin-top:8px; text-decoration:none; border-radius:var(--inner-radius); position:relative;}div.select > div > a > span{ position:relative; display:block; transform:translateY(calc(var(--item-y)*1px)); opacity:var(--item-opacity); transition:--item-y 0.2s ease 0.1s,--item-opacity 0.2s 0.1s;}div.select > div > a:nth-child(1) span{ transition-delay:0.1s;}div.select > div > a:nth-child(2) span{ transition-delay:0.15s;}div.select > div > a:nth-child(3) span{ transition-delay:0.2s;}div.select > div > a:focus{ outline:1px solid var(--outline-color); outline-offset:-1px;}div.select > div > a:hover,div.select > div > a:focus{ color:var(--accent-color);}div.select:focus-within{ outline:1px dashed var(--outline-color);}div.select:hover > div,div.select:has(button:focus) > div,div.select:focus-within > div{ height:calc(var(--max-height)*1px); --item-y:0; --item-opacity:1;}.select.nomotion{ transition:none !important; animation:none !important;}.select.nomotion:before,.select.nomotion:after,.select.nomotion *,.select.nomotion *:before,.select.nomotion *:after{ transition:none !important; animation:none !important;}@media (prefers-reduced-motion:reduce){ .select{ transition:none !important; animation:none !important; } .select:before,.select:after,.select *,.select *:before,.select *:after{ transition:none !important; animation:none !important; }}@keyframes glow{ from{ --radial-bg-color:var(--accent-color); --bg-x:100; --bg-y:0; } 50%{ --radial-bg-color:hsl(290deg 100% 58%); --bg-x:60; --bg-y:120; } to{ --radial-bg-color:var(--dark-color); --bg-x:60; --bg-y:120; }}@keyframes popOut{ from{ --scale:1; } 50%{ --scale:1.02; } to{ --scale:1; }}

/*按专题图片列表*/
div.rowps { margin: 1em auto; display: inline-flex; flex-wrap: wrap; justify-content: center; } div.rowps > div { /*box-shadow: 0 0px 8px rgb(180 150 150);*/ display: inline-flex; color: #ffffff; margin: 0.08%; padding: 1%; background: #00000000; margin-bottom: 3px; margin-right: 3px; border-radius: 4px; } div.rowps > div > a { color: #f7d0bfdb; } .v_000{ display: flex; flex-wrap: wrap; justify-content: center; } .v_1 { width: 320px; cursor: pointer; margin: 1% 2%; } .v_1_1 { width: 320px; height: 200px; border-top-left-radius: 8px; border-top-right-radius: 8px; } img.v_img { width: 320px; height: 200px; border-top-left-radius: 8px; border-top-right-radius: 8px; } .v_1_2 { color: #fff; background: rgb(50, 50, 61); line-height: 60px; padding-left: 20px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .v_1:hover .v_1_2 { color: #1bbc9d; }


/*按系列找片*/ 
.maddos-category-wrapper { background: none repeat scroll 0% 0% #fff; color: #9f9f9f; overflow-y: auto; position: relative; } ol, ul { margin-top: 0; margin-bottom: 10px; } .maddos-category-wrapper ol li { margin: 2px 10px 2px 10px; position: relative; } .maddos-category-header { padding: 8px 0; } .maddos-category-header, .maddos-link-header, .maddos-link-header, .maddos-link-header a { background-color: #000000; font-family: arial; color: #fff; text-align: center; line-height: 1.0; } ol > a { color: #337ab7; text-decoration: none; } ol > a { color: #444; } a:hover { color: #17b; } a:visited { color: #888; } 
/*系列名称*/
 div.xilie{ background-color: #2a2a2a; font-size: 18px; color: #fff; position: relative; text-align: center; border-bottom: 3px solid #dbb277; margin-top: 0; padding: 8px 0; min-height: 25px; height: auto; } .maddos-widget { overflow: hidden; margin: 2% 4% 2% 5%; background-color: #fff; box-shadow: 3px 6px 10px 0px #999; width: 24%; } @media screen and (max-width: 600px) { .maddos-widget {;width: 100%;}} ol > li::before { content: counter(list-item) "."; background: lightgray; border-radius: 1ch; padding-inline: 1ch; margin-inline-end: 1ch; }

/*番号列表*/
.website {display: flex;margin-bottom: 20px;flex-wrap: wrap;}
.website .item {width: calc(14.28% - 12px);margin: 6px;background: #2C2C2C;display: flex;align-items: center;border-radius: 6px;padding: 10px;position: relative;}
.website .item:hover {color: #EECFAF;}
.website .item .detail {overflow: hidden;flex: 1;}
.website .item img {height: 58px; width: 58px; border-radius: 50%; overflow: hidden;object-fit: cover;margin-right: 10px;flex-shrink: 0;}
.website .item .small {font-size: 12px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.website .item .mark {position: absolute;right: 10px;top: 0;font-size: 12px;background: #ababab;border-radius: 0 0 5px 5px;color: #1E1E1E;padding: 2px 4px;}
@media screen and (max-width: 1800px) {.website .item {width: calc(20% - 12px);}}
@media screen and (max-width: 1600px) {.website .item {width: calc(25% - 12px);}}
@media screen and (max-width: 800px) {.website .item { width: calc(50% - 12px);} .website .item .detail {flex: auto;width: 170px;}}

/*翻页*/
ul.page {display: flex;flex-wrap: wrap;margin: 20px 0;align-content: flex-start;} ul.page li {display: flex; background: #2C2C2C; margin: 0 6px 6px 0; border-radius: 4px;overflow: hidden;} ul.page li.active {background: #FF5B82;color: #fff;} ul.page li.active a {color: #fff;font-size: 18px;} ul.page li:hover {background: #FF5B82;} ul.page li:hover a {background: #FF5B82;color: #fff;} ul.page li a{padding: 4px 10px;}span.disabled {padding: 4px 10px; color: #888; pointer-events: none;}

/*等待*/
.loader { z-index: 11; position: fixed; top: 50%; left: 40%; margin-left: 10%; transform: translate3d(-50%, -50%, 0); } .dot { width: 24px; height: 24px; background: #3ac; border-radius: 100%; display: inline-block; animation: slide 1s infinite; } .dot:nth-child(1) { animation-delay: 0.1s; background: #32aacc; } .dot:nth-child(2) { animation-delay: 0.2s; background: #64aacc; } .dot:nth-child(3) { animation-delay: 0.3s; background: #96aacc; } .dot:nth-child(4) { animation-delay: 0.4s; background: #c8aacc; } .dot:nth-child(5) { animation-delay: 0.5s; background: #faaacc; } @-moz-keyframes slide { 0% { transform: scale(1); } 50% { opacity: 0.3; transform: scale(2); } 100% { transform: scale(1); } } @-webkit-keyframes slide { 0% { transform: scale(1); } 50% { opacity: 0.3; transform: scale(2); } 100% { transform: scale(1); } } @-o-keyframes slide { 0% { transform: scale(1); } 50% { opacity: 0.3; transform: scale(2); } 100% { transform: scale(1); } } @keyframes slide { 0% { transform: scale(1); } 50% { opacity: 0.3; transform: scale(2); } 100% { transform: scale(1); } } 

/*列表等待*/
.loadlb { width: 250px; height: 50px; line-height: 50px; text-align: center; position: absolute; //top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: helvetica, arial, sans-serif; text-transform: uppercase; font-weight: 900; color: #ce4233; letter-spacing: 0.2em; margin: 20px 0; } .loadlb::before, .loadlb::after { content: ""; display: block; width: 15px; height: 15px; background: #ce4233; position: absolute; -webkit-animation: load 1.7s infinite alternate ease-in-out; animation: load 2.7s infinite alternate ease-in-out; } .loadlb::before { top: 0; } .loadlb::after { bottom: 0; } @-webkit-keyframes load { 0% { left: 0; height: 30px; width: 15px; } 50% { height: 8px; width: 40px; } 100% { left: 235px; height: 30px; width: 15px; } } @keyframes load { 0% { left: 0; height: 30px; width: 15px; } 50% { height: 8px; width: 40px; } 100% { left: 235px; height: 30px; width: 15px; } } .loadlb span { font-family: "Lato"; color: #ffffff; text-transform: uppercase; font-size: 1em; letter-spacing: 1.5px; text-align: center; width: 155px; margin-top: 20px; -webkit-animation: fade 2s infinite; -moz-animation: fade 2s infinite; } @-webkit-keyframes fade { 50% { opacity: 0.5; } 100% { opacity: 1; } }