*{ margin:0; padding:0; border:0;}
body{ background:#1e1e1e; font-size:14px; color:#000; transition:0.2s;}
li{ list-style-type:none; cursor:pointer; transition:0.2s;}
.cb{ clear:both;}
.bolder{ font-weight:bolder;}
::-webkit-scrollbar{ width:10px; background-color:#1e1e1e;}
::-webkit-scrollbar-thumb{ background-color:#F90;}


/**top**/
.top{ width:100%; height:260px; background:#1e1e1e url("/static/app/images/top_bg.jpg") center bottom; background-size:auto 100%; border-bottom:20px solid #1e1e1e;}
.top a{ display:block; width:600px; height:260px; margin:auto; background:url("/static/app/images/top_banner.png") center bottom no-repeat; background-size:auto 70%;}
.main{ max-width:1750px; margin:auto; overflow:hidden;}
.PChide{display:none !important;}

/**banner**/
.banner{ width:100%; max-width:900px; margin:auto;}
.banner ul{ margin:10px 0; margin:6px;}
.banner ul li{ width:50%; float:left; margin-bottom:5px;}
.banner ul li img{ height:50px; width:100%;}


/**comein**/
.comein{ height:38px; width:100%; max-width:980px; margin:10px auto 0; white-space:nowrap; overflow:hidden; overflow-x:scroll;}
.comein::-webkit-scrollbar{ height:0px;}
.comein ul li{ display:unset; padding:0 5px; line-height:30px; margin:2px; border-radius:5px; color:#F90;}
.comein ul li:nth-child(1){ color:#999}
.comein ul li:nth-child(2){ color:#F0F}
.comein ul li:nth-child(3){ color:#7FFF00}
.comein ul li:nth-child(4){ color:#F30}
.comein ul li:nth-child(5){ color:#FF0}
.comein ul li:nth-child(6){ color:#6CC}
.comein ul li:hover{ color:#FFF;}


/**APP**/
.main .card{ float:left; margin:5px; background:#FFF; border-radius:12px; padding:3px; overflow:hidden;}
.main .card .focus{ height:200px; overflow:hidden; background-size:cover; background-color:#000; background-position:center center; cursor:pointer; border-radius:8px 8px 0 0; border-bottom:10px solid #FFF;}
.main .card .applist{ height:604px; overflow-x:hidden; overflow-y:scroll; background-color:#FAFAFA;}
.main .card .applist ul{ padding:10px 15px 20px;}
.main .card .applist ul li{ display:inline-block; width:14.2857%; float:left; text-align:center; color:#333; padding:5px 0; line-height:26px; border-radius:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:.2s; position:relative;}
.main .card .applist ul li.cu{ font-weight:900;}
.main .card .applist ul li img{ display:block; width:52px; height:52px; margin:4px auto; border-radius:6px;}
.main .card .applist ul li i{ position:absolute; top:5px; left:50%; margin-left:22px;}
.main .card .applist ul li:hover{ color:#F00;}
.main .card:first-child{ width:484px;}

/**网站**/
.main .card .title{ height:54px; line-height:54px; width:100%; color:#000; border-radius:8px 8px 0 0; position:relative; text-align:center; background-color:#FFF; font-size:15px; font-weight:400; background-size:26px 26px; background-position:22px 13px; background-repeat:no-repeat; border-bottom:1px solid #bbb;}
.main .card .title::after{ content:""; position:absolute; width:50px; height:3px; border-radius:1px; left:50%; margin-left:-25px; bottom:0; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s;}
.main .card:hover .title::after{ width:100%; left:0; margin-left:0;}
.main .card:hover .list,.main .card:hover .applist{ background-color:#FFF;}
.main .card .list{ width:234px; height:740px; padding:10px 0; background-color:#FAFAFA; overflow-x:hidden; overflow-y:scroll;}
.main .card .list::-webkit-scrollbar,.main .card .applist::-webkit-scrollbar{ width:3px; background-color:#FFF;}
.main .card .list ul li{ height:28px; line-height:28px; width:100%; position:relative;}
.main .card .list ul li div{ height:28px; line-height:28px; width:calc(100% - 28px); overflow:hidden; white-space:nowrap;}
.main .card .list ul li div i{ height:28px; width:25px; float:left; text-align:right; font-size:12px; color:#999; padding-right:5px; margin-left:0px; background-position:center right; background-repeat:no-repeat;}
.main .card .list ul li div i.vip{ background:url(/static/app/images/v.png) center right; background-repeat:no-repeat;}
.main .card .list ul li div img,.card .list ul li div span.nologo{ display:inline-block; width:16px; height:16px; float:left; margin:6px 6px 6px 4px; border-radius:50%;}
.main .card .list ul li div span.nologo{ background-image:url("/static/app/images/logolist.png");}
.main .card .list ul li div p.tips{ display:inline; padding:3px 6px; background:#F00; color:#FFF; border-radius:9px; font-size:12px; position:relative; top:-1px; margin-right:3px;}
.main .card .list ul li span.collect{ height:28px; width:28px; color:#BBB; position:absolute; top:0; right:0; z-index:1; text-align:center;}
.main .card .list ul li span.collect i{ line-height:28px; font-size:12px;}
.main .card .list ul li:hover{ background-color:#F0F0F0; color:#F00;}
.main .card .list ul li:hover span.collect{ color:#555;}
.main .card .list ul li:hover div i{ color:#000;}
.main .card .list ul li span.collect[data-collected="1"] i{color:#F00;}
.main .card .list ul li.less{ color:#555;}
.main .card .card_bottom{ height:30px; margin:auto; border:10px solid #FFF; cursor:pointer; background:#FAFAFA; border-radius:0 0 8px 8px;}
.main .card .card_bottom span{ color:#FFF; margin:auto; display:block; height:30px; line-height:30px; width:100%; border-radius:15px; text-align:center; position:relative;}
				@keyframes scaless{0%{transform:scale(1)}50%,75%{transform:scale(1.04,1.4)}78%,100%{opacity:0}}
.main .card .card_bottom span:before {content:'';display:block;width:100%;height:30px;border-radius:15px;opacity:.7;}
.main .card .card_bottom span:hover:before{ animation:scaless 1s 1 cubic-bezier(0, 0, .49, 1.02);}
.main .card .card_bottom span p{ width:100%; height:30px; line-height:30px; text-align:center; color:#FFF; position:absolute; left:0; top:0;}
.main .card:nth-of-type(n+7) .list{ height:300px;}





.main .card:nth-child(1),.main .card:nth-child(1) .title::after,.main .card:nth-child(1) .applist::-webkit-scrollbar-thumb,.main .card:nth-child(1) .card_bottom span,.main .card:nth-child(1) .card_bottom span:before{ background-color:#099;}
.main .card:nth-child(2),.main .card:nth-child(2) .title::after,.main .card:nth-child(2) .list::-webkit-scrollbar-thumb,.main .card:nth-child(2) .card_bottom span,.main .card:nth-child(2) .card_bottom span:before{ background-color:#F66;}
.main .card:nth-child(3),.main .card:nth-child(3) .title::after,.main .card:nth-child(3) .list::-webkit-scrollbar-thumb,.main .card:nth-child(3) .card_bottom span,.main .card:nth-child(3) .card_bottom span:before{ background-color:#F0AB09;}
.main .card:nth-child(4),.main .card:nth-child(4) .title::after,.main .card:nth-child(4) .list::-webkit-scrollbar-thumb,.main .card:nth-child(4) .card_bottom span,.main .card:nth-child(4) .card_bottom span:before{ background-color:#393;}
.main .card:nth-child(5),.main .card:nth-child(5) .title::after,.main .card:nth-child(5) .list::-webkit-scrollbar-thumb,.main .card:nth-child(5) .card_bottom span,.main .card:nth-child(5) .card_bottom span:before{ background-color:#FF6FB7;}
.main .card:nth-child(6),.main .card:nth-child(6) .title::after,.main .card:nth-child(6) .list::-webkit-scrollbar-thumb,.main .card:nth-child(6) .card_bottom span,.main .card:nth-child(6) .card_bottom span:before{ background-color:#C9BC25;}
.main .card:nth-child(7),.main .card:nth-child(7) .title::after,.main .card:nth-child(7) .list::-webkit-scrollbar-thumb,.main .card:nth-child(7) .card_bottom span,.main .card:nth-child(7) .card_bottom span:before{ background-color:#FF80C0;}
.main .card:nth-child(8),.main .card:nth-child(8) .title::after,.main .card:nth-child(8) .list::-webkit-scrollbar-thumb,.main .card:nth-child(8) .card_bottom span,.main .card:nth-child(8) .card_bottom span:before{ background-color:#F90;}
.main .card:nth-child(9),.main .card:nth-child(9) .title::after,.main .card:nth-child(9) .list::-webkit-scrollbar-thumb,.main .card:nth-child(9) .card_bottom span,.main .card:nth-child(9) .card_bottom span:before{ background-color:#36b2cd;}
.main .card:nth-child(10),.main .card:nth-child(10) .title::after,.main .card:nth-child(10) .list::-webkit-scrollbar-thumb,.main .card:nth-child(10) .card_bottom span,.main .card:nth-child(10) .card_bottom span:before{ background-color:#F66;}
.main .card:nth-child(11),.main .card:nth-child(11) .title::after,.main .card:nth-child(11) .list::-webkit-scrollbar-thumb,.main .card:nth-child(11) .card_bottom span,.main .card:nth-child(11) .card_bottom span:before{ background-color:#D8B445;}
.main .card:nth-child(12),.main .card:nth-child(12) .title::after,.main .card:nth-child(12) .list::-webkit-scrollbar-thumb,.main .card:nth-child(12) .card_bottom span,.main .card:nth-child(12) .card_bottom span:before{ background-color:#EA6C9E;}
.main .card:nth-child(13),.main .card:nth-child(13) .title::after,.main .card:nth-child(13) .list::-webkit-scrollbar-thumb,.main .card:nth-child(13) .card_bottom span,.main .card:nth-child(13) .card_bottom span:before{ background-color:#F8D549;}
.main .card:nth-child(14),.main .card:nth-child(14) .title::after,.main .card:nth-child(14) .list::-webkit-scrollbar-thumb,.main .card:nth-child(14) .card_bottom span,.main .card:nth-child(14) .card_bottom span:before{ background-color:#c79650;}
.main .card:nth-child(15),.main .card:nth-child(15) .title::after,.main .card:nth-child(15) .list::-webkit-scrollbar-thumb,.main .card:nth-child(15) .card_bottom span,.main .card:nth-child(15) .card_bottom span:before{ background-color:#C173DB;}
.main .card:nth-child(16),.main .card:nth-child(16) .title::after,.main .card:nth-child(16) .list::-webkit-scrollbar-thumb,.main .card:nth-child(16) .card_bottom span,.main .card:nth-child(16) .card_bottom span:before{ background-color:#8ac842;}
.main .card:nth-child(17),.main .card:nth-child(17) .title::after,.main .card:nth-child(17) .list::-webkit-scrollbar-thumb,.main .card:nth-child(17) .card_bottom span,.main .card:nth-child(17) .card_bottom span:before{ background-color:#2EBBCF;}
.main .card:nth-child(18),.main .card:nth-child(18) .title::after,.main .card:nth-child(18) .list::-webkit-scrollbar-thumb,.main .card:nth-child(18) .card_bottom span,.main .card:nth-child(18) .card_bottom span:before{ background-color:#BFBC2D;}
.main .card:nth-child(19),.main .card:nth-child(19) .title::after,.main .card:nth-child(19) .list::-webkit-scrollbar-thumb,.main .card:nth-child(19) .card_bottom span,.main .card:nth-child(19) .card_bottom span:before{ background-color:#F66;}
.main .card:nth-child(20),.main .card:nth-child(20) .title::after,.main .card:nth-child(20) .list::-webkit-scrollbar-thumb,.main .card:nth-child(20) .card_bottom span,.main .card:nth-child(20) .card_bottom span:before{ background-color:#F90;}



/**预览**/
.preview_bg{ display:none; width:100%; height:100%; z-index:9999; position:fixed; left:0; bottom:0; background:rgba(0,0,0,0.6)}
.preview{ display:none; width:100%; height:100%; z-index:10000; position:fixed; left:0; bottom:0;}
.preview .preview_but{ width:320px; height:45px; margin:13px auto; overflow:hidden;}
.preview .preview_but span{ float:left; display:inline-block; width:45px; font-weight:900; text-align:center; line-height:45px; color:#FFF; font-size:16px; cursor:pointer; solid #444; border-radius:23px;}
.preview .preview_but span i{ line-height:45px;}
.preview .preview_but .preview_name{ width:230px; background:#F90;}
.preview .preview_but .preview_name i{ float:left; margin-left:20px;}
.preview .preview_but .preview_name p{ display:inline-block; margin-left:-30px; color:#FFF; font-size:14px;}
.preview .preview_but .preview_collect{ background:#FFF; color:#999;}
.preview .preview_but .preview_close{ font-size:30px;}
.preview .preview_box{ background:#FFF; height:100%;}
.preview .preview_box iframe{ width:100%; height:100%; border:none; background:#222;}
.preview .preview_collect[data-collected="1"] i{color:#fe0505;}

/**收藏**/
.collect-view{ position:fixed; top:0; right:-170px; width:170px; height:100%; z-index:999; background:#fff; -webkit-box-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.3);-moz-box-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.3); box-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.3);}
.collect-view .button{ width:40px; height:auto; position:absolute; top:55%; margin-top:-100px; left:-40px; overflow:hidden;}
.collect-view .button span{ width:40px; height:40px; display:block; text-align:center; background:#f90; color:#FFF; cursor:pointer; border-bottom:1px solid #FFF; transition:0.2s;}
.collect-view .button span:first-child{ border-radius:10px 0 0 0}
.collect-view .button span:last-child{ border-bottom:none; border-radius:0 0 0 10px;}
.collect-view .button span:hover{ background:#ffc800;}
.collect-view .button span i{ line-height:40px;}
.collect-view .button .button_active{ background-color:#3e975b !important;}
.collect-view .button .button_next{ display:none;}
.collect-view .box{ width:100%;}
.collect-view .box .head{ border-bottom:1px solid #999; padding:10px; line-height:40px;}
.collect-view .box .head .title{ margin-left:10px; font-size:18px; font-weight:bold;}
.collect-view .box .head .btn{ display:inline-block; width:40px; height:40px; font-size:20px; text-align:center; font-weight:bold; border-radius:6px; cursor:pointer; float:right;}
.collect-view .box .head .btn i{ line-height:40px;}
.collect-view .box .head .btn:hover { background:#f1f1f1;}
.collect-view .box .head .btn:active {opacity:0.6;}
.collect-view .box .body{ padding:5px; height:500px; overflow-y:scroll;} 
.collect-view .box .body::-webkit-scrollbar{ width:5px; background-color:#FFF;}
.collect-view .box .body::-webkit-scrollbar-thumb{ background:#3e975b;}
.collect-view .box .body li{ background:#FFF; width:100%; height:36px; float:left; position:relative; overflow:hidden; border-bottom:1px solid #DDD;}
.collect-view .box .body li div{ height:36px; line-height:36px;}
.collect-view .box .body li div img{ width:20px; height:20px; float:left; margin:8px; border-radius:50%;}
.collect-view .box .body li span{ height:36px; width:28px; background:#FFF; position:absolute; top:0; right:0; z-index:1; text-align:center; transition:.2S;}
.collect-view .box .body li span i{ line-height:36px; color:#999;}
.collect-view .box .body li span:hover i{ color:#F00;}
.collect-view .box .body li:hover{ color:#F00;}

/**关灯**/
.black .app li{ color:#FFF;}
.black .card .title{ color:#F0F0F0}
.black .card .list{ background:#002626; border-color:#044;}
.black .card .list ul li{ background:#002626; color:#ccc;}
.black .card .list ul li:hover div{ background:#023636; color:#FFF;}
.black .card .list ul li:hover span{ background-color:#023636;}
.black .card .list ul::-webkit-scrollbar{ background:#002626;}

/**底部**/
.us{ line-height:40px; text-align:center; color:#ffe000; clear:both; margin-top:30px;}
.foot{ width:100%; height:360px; border-bottom:150px solid #fdae03;}
.foot div{ width:600px; height:360px; margin:auto; background:url("/static/app/images/foot_banner.jpg") center bottom no-repeat; background-size:auto 80%;}




/**自适应 单元250 **/
@media screen and (min-width:1600px) and (max-width:1850px){
	.main{ width:1500px; height:2200px;}
	.main .card:nth-child(3) .list,.main .card:nth-child(4) .list,.main .card:nth-child(5) .list{ height:1180px;}
	.main .card:nth-of-type(n+6) .list{ height:300px;}
	.main .card:nth-child(6),.main .card:nth-child(7),.main .card:nth-child(8),.main .card:nth-child(12),.main .card:nth-child(13),.main .card:nth-child(14),.main .card:nth-child(18),.main .card:nth-child(19),.main .card:nth-child(20){ position:relative; top:-440px;}

}
@media screen and (min-width:1350px) and (max-width:1600px){
	.main{ width:1250px; height:2640px;}
	.main .card:nth-child(3) .list,.main .card:nth-child(4) .list{ height:1180px;}
	.main .card:nth-child(6) .list{ height:300px;} 
	.main .card:nth-child(14) .list{ height:740px;}
	.main .card:nth-child(5),.main .card:nth-child(6),.main .card:nth-child(7),.main .card:nth-child(10),.main .card:nth-child(11),.main .card:nth-child(14),.main .card:nth-child(15),.main .card:nth-child(16),.main .card:nth-child(19),.main .card:nth-child(20){ position:relative; top:-440px;}
}
@media screen and (min-width:1100px) and (max-width:1350px){
	.main{ width:1000px; height:3080px;}
	.main .card:nth-child(3) .list{ height:1180px;}
	.main .card:nth-child(6) .list{ height:300px;}
	.main .card:nth-child(4),.main .card:nth-child(5),.main .card:nth-child(6),.main .card:nth-child(8),.main .card:nth-child(10),.main .card:nth-child(11),.main .card:nth-child(12),.main .card:nth-child(14),.main .card:nth-child(15),.main .card:nth-child(16),.main .card:nth-child(18),.main .card:nth-child(19),.main .card:nth-child(20){ position:relative; top:-440px;}
}
@media screen and (min-width:800px) and (max-width:1100px){
	.top,.top a{ height:230px;}
	.banner{ width:750px;}
	.comein{ width:730px;}
	.banner ul li{ width:100%;}
	.main{ width:750px; height:3960px;}
	.main .card:nth-child(3) .list,.main .card:nth-child(4) .list,.main .card:nth-child(5) .list{ height:740px;}
	.main .card:nth-child(6) .list{ height:300px;}
}
@media screen and (min-width:550px) and (max-width:800px){
	.top,.top a{ width:100%; height:200px;}
	.banner{ width:500px;}
	.comein{ width:480px;}
	.banner ul li,.foot div{ width:100%;}
	.banner ul li img{ height:50px;}
	.main{ width:500px; height:5720px;}
	.main .card .focus{ height:180px;}
	.main .card:nth-child(5) .list,.main .card:nth-child(6) .list{ height:300px;}
}
@media screen and (max-width:550px){
	.top,.top a{ width:100%; height:160px;}
	.banner,.main{ width:96%;}
	.comein{ width:92%;}
	.main .card .focus{ height:160px;}
	.main .card .list,.banner ul li,.foot div{ width:100%;}
	.main .card .applist{ height:auto}
	.main .card:nth-child(2) .list{ height:auto; max-height:400px;}
	.main .card:nth-child(3) .list{ height:auto; max-height:500px;}
	.main .card:nth-child(4) .list{ height:auto; max-height:400px;}
	.main .card:nth-child(5) .list{ height:auto; max-height:400px;}
	.main .card:nth-of-type(n+6) .list{ height:auto; max-height:300px;}
	.main .card .applist ul{ padding:5px;}
	.main .card .applist ul li{ width:16.6666666666666%; font-size:13px;}
	.main .card:first-child,.main .card{ width:calc(100% - 16px);}
	.main .card .list ul li{ float:left; width:33.333333333333%;}
	.main .card .list ul li div{ width:100%;}
	.main .card .list ul li div i{ width:20px;}
	.main .card .list ul li span.collect{ display:none;}
	.foot,.foot div{ height:280px;}
	.collect-view .button .button_next{ display:block;}
	.PChide{display:block !important;}
}
@media screen and (max-width:460px){
	.banner ul li img{ height:40px;}
	.banner,.main{ width:99%;}
	.main .card .applist ul li{ width:20%;}
	.main .card .applist ul li img{ width:50px height:50px;}
	.main .card .list ul li div i{ margin-right:2px;}
	.main .card .list ul li div img, .card .list ul li div span.nologo{ display:none}
}