/*color: 字/背蓝 #3930d8，#2f26c9; 背景蓝 rgba(42,34,179,1.00) #20438c #4d13d1; 背灰 #e9e8fa 字黄 #F2B326 字黑 #555 字红 #FF6154 #fa4a4d 背绿#11b719*/
:root {  
	--main-color:#0052d9;
	--main-color-red:rgb(235, 67, 52);
	--blue:#007aff;
	--indigo:#6610f2;
	--purple:#6f42c1;
	--pink:#e83e8c;
	--red:#dc3545;
	--orange:#fd7e14;
	--yellow:#ffc107;
	--green:rgba(40,167,69,1.00);
	--teal:#20c997;
	--cyan:#17a2b8;
	--white:#fff;
	--gray:#6c757d;
	--gray-dark:#343a40;
	--primary:#007bff;
	--secondary:#6c757d;
	--success:#28a745;
	--info:#17a2b8;
	--warning:#ffc107;
	--danger:#dc3545;
	--light:#f8f9fa;
	--dark:#343a40;
	--breakpoint-xs:0;
	--breakpoint-sm:576px;
	--breakpoint-md:768px;
	--breakpoint-lg:992px;
	--breakpoint-xl:1200px;
	--font-family-sans-serif:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-family-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}
input:-webkit-autofill {
	-webkit-box-shadow:0 0 0 1000px #fff inset!important;
}
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
/*@font-face { font-family: "阿里妈妈方圆体 VF Regular"; src: url("../../../vendor/font/ali/fangyuan/0Ex5bKdfy1Gl.woff2") format("woff2"),  url("../../../vendor/font/ali/fangyuan/0Ex5bKdfy1Gl.woff") format("woff"); font-display: swap; }*/
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
	font-family: 'iconfont';
	src: url('../../../vendor/iconfont/iconfont.woff2?v=1.1') format('woff2'), url('../../../vendor/iconfont/iconfont.woff?v=1.1') format('woff'), url('../../../vendor/iconfont/iconfont.ttf?v=1.1') format('truetype');
}
.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@font-face{
	font-family:"CEYYTW02";
	src:url('../../../vendor/font/zhankucanger/TsangerYuYangT_W02_W02.ttf')
}
html { /*font-family: Montserrat,"CEYYTW02",sans-serif; */-webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { /*display: block;*/ }
html { font-size: 62.5%; }
html, body, div, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, form, table, input, select, button, textarea, iframe, tr, td, samp { padding: 0; margin: 0; }
body { margin: 0; font-family: Montserrat,"Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1.4rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: rgba(247,247,247,1.00); text-align: left; color: #333; }
/*body { margin: 0; font-family: "阿里妈妈方圆体 VF Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1.4rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #FCFCFC; font-variation-settings: 'wght' var(--wght), 'wdth' var(--wdth), 'slnt' var(--slnt), 'SRIF' var(--SRIF); }*/

.ali { font-family: "阿里妈妈灵动体 VF Thin";  --wght: 700;
 --wdth: 100;
 --slnt: 0;
 --SRIF: 1;
font-variation-settings: 'wght' var(--wght), 'wdth' var(--wdth), 'slnt' var(--slnt), 'SRIF' var(--SRIF); }
*, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html { font-size: 62.5%; }
html, body, div, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, form, table, input, select, button, textarea, iframe, tr, td, samp { padding: 0; margin: 0; }

textarea { font-size: 1.2rem; }
img { border: none; }
a { color: #333; text-decoration: none; }
a:hover { color: var(--main-color); }
a:focus { outline: none; }
a {
blr:expression(this.onFocus=this.blur()); /* IE Opera */ outline: none; /* FF Opera */ }
a:focus { -moz-outline-style: none; /* FF */ }
i { font-style: normal; }
ul, dl, ol, li { list-style: none outside none; }
/*input{margin:0; padding:0; border:#dedede 1px solid;}*/
.clear { clear: both; font-size: 0px; height: 1px; line-height: 1px; margin: 0; padding: 0px; }
.fl { float: left }
.fr { float: right }
.ellipsis { overflow: hidden; text-overflow: ellipsis; word-break: keep-all; white-space: nowrap; }
.red { color: #f00; }
.color { color: #00a3d3; }
.top10 { margin-top: 10px; }
.top20 { margin-top: 20px; }
.opacity { _filter: alpha(opacity=80); -moz-opacity: 80; opacity: 80; opacity: 0.8 !important; }
.border-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
/** html div {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="public.png");
background:none;
}*/

/*@font-face {
  font-family: 'iconfont';
  src: url('../../../../vendor/iconfont/iconfont.woff2?12') format('woff2'),
       url('../../../../vendor/iconfont/iconfont.woff?12') format('woff'),
       url('../../../../vendor/iconfont/iconfont.ttf?12') format('truetype');
}*/
.iconfont { font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }
.box { background-color: #fff; margin: 0 auto; max-width: 1920px; min-width: 1000px; }
.flex { display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; }
.wrap {flex-wrap: wrap;}
/*自动高对齐*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
*html .clearfix { height: 1%; zoom: 1; }
*+html .clearfix { height: 1%; zoom: 1; }
/*header*/
#nav { background-color: rgba(255, 255, 255, 1); border-bottom: #DDD solid 1px; position: sticky !important;top: 0;
  right: 0;
  left: 0;
  z-index: 1030;}
.fixed-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2); }
.disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}
header { }
header .nav-top { display: flex; padding: 0em 0.5em; flex-wrap: wrap; justify-content: space-between; font-size: 1.5rem; }
header .nav-top ul { }
header .nav-top ul, header .nav-top ul li { list-style: none outside none; }
header .nav-top a { height: 5rem; line-height: 5rem; display: block; position: relative; padding: 0 0.5em; white-space: nowrap; }
header .nav-top a:hover, header .nav-top a.active { color: var(--main-color); }
header .nav-top a:hover::after { content: ""; position: absolute; left: 10%; bottom: 0; width: 80%; height: 2px; background-color: var(--main-color); }
header .nav-top-wrap { flex: 1; }
@media (max-width: 600px) {
header .nav-top-wrap { flex-basis: 100%; order: 2; }
}
.nav-top-tool .top-account,.nav-top-tool .top-logout { display: none;}
.nav-top-logo { /*width:70px;*/ }
.main, .cwidth { max-width: 1420px; margin: 0 auto; }
.main .category { display: flex; padding: 0.75em 0.5em 0.5em 0.5em; flex-wrap: wrap; border-radius: 3px; margin-top:0.5em; background:#fff;}
.main .category a.item { display: block; padding: 0 0.75em; background-color: #FCFCFC; line-height: 2.3em; margin-left: 0em; margin-right: 0.3em; margin-bottom: 0.25em; border-radius: 3px; color: #333; }
.main .category a.item.active, .main .category a.item:hover { background-color: var(--main-color); color: #FFF; }
.main .main-content {flex-wrap: wrap;min-height:85vh;}
@media screen and (min-width: 1001px) {
	.main .web-left {position: sticky;position: -webkit-sticky;top: 60px;
		width: 260px; margin: 0.5em 0.5em 0.5em 0em; background-color: #FFF; border-radius: 3px;align-self: flex-start; order:1;
	}
	.main .web-left #nav-quick {}
	.main .web-left #nav-quick ul {overflow-x: auto;max-height: calc(100vh - 130px); /* 确保高度不超过可视窗口的高度 */}
	.main .web-left #nav-quick .title { font-size: 1.5rem; line-height: 1.85em; padding-bottom: 0.6em; border-bottom: solid #DDD 1px;margin: 0.5em 0.75em;}
	.main .web-left #nav-quick ul {margin:0.5em 0;}
	.main .web-left #nav-quick ul li {position: relative; margin: 0.25rem 0;}
	.main .web-left #nav-quick ul li.active::after,.main #nav-quick ul li:hover::after { content: ""; position: absolute; left:0; bottom: 0.2rem; width: 4px; height: 1.6em; background-color: var(--teal); border-radius: 3px; }
	.main .web-left #nav-quick ul li div.a  { display: block; line-height: 2.6rem; cursor: pointer; border-radius: 3px; padding:0 0.25em;overflow: hidden; text-overflow: ellipsis; word-break: keep-all; white-space: nowrap; margin-left: 0.5em; margin-right: 0.5em;}
	.main .web-left #nav-quick ul li div.a:hover { background: #f3f3f3 !important;color:rgb(51, 51, 51) !important;}
	.main .web-left #nav-quick ul li div.level1 { padding-left: 0.5em;}
	.main .web-left #nav-quick ul li div.level2 { padding-left: 1.7em; font-size: 1.3rem;}
	.main .web-left #nav-quick ul li div .small {display:none;}
}
@media screen and (max-width: 1000px) {
	.main .web-left {position: sticky;position: -webkit-sticky;top: 60px;
		width: 60px; margin: 0.5em 0 0.5em 0em; background-color:; border-radius: 3px;align-self: flex-start; order:1;
	}
	.main .web-left #nav-quick {}
	.main .web-left #nav-quick ul {overflow-x: auto;max-height: calc(100vh - 130px); /* 确保高度不超过可视窗口的高度 */}
	.main .web-left #nav-quick .title { font-size: 1.5rem; line-height: 1.85em; padding-bottom: 0.6em; border-bottom: solid #DDD 1px;margin: 0.5em 0.75em; display:;}
	.main .web-left #nav-quick .title span {display:none;}
	.main .web-left #nav-quick ul {margin:0.5em 0;}
	.main .web-left #nav-quick ul li {position: relative; margin: 0.25rem 0;}
	.main .web-left #nav-quick ul li.active::after,.main #nav-quick ul li:hover::after { content: ""; position: absolute; left:0; bottom: 0.2rem; width: 4px; height: 1.6em; background-color: var(--main-color); border-radius: 3px; }
	.main .web-left #nav-quick ul li div.a  { display: block; line-height: 2.6rem; cursor: pointer; border-radius: 3px; padding:0 0.25em;overflow: hidden; text-overflow: ellipsis; word-break: keep-all; white-space: nowrap; margin-left: 0.5em; margin-right: 0.5em;}
	.main .web-left #nav-quick ul li div.a:hover { background: #f3f3f3;color:rgb(51, 51, 51);}
	.main .web-left #nav-quick ul li div.level1 {}
	.main .web-left #nav-quick ul li div.level2 { font-size: 1.3rem;}
	.main .web-left #nav-quick ul li div .large {display:none;}
}


.main .web-page { padding: 0.75em 1em; flex-wrap: wrap; flex:1; margin: 0.5em 0; background: #FFF; order:2;}
.main .web-page .list-web { margin: 1em 0; }
.main .web-page .list-web .li {position: relative; padding: 1.0em 0; border-bottom:solid #EEE 1px;}
.main .web-page .list-web .li .c { flex:1; line-height: 2em; color:#666; /*height: 100px;*/}
.main .web-page .list-web .li .c .outline {display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 4em; /* 两行文本的高度 */}
.main .web-page .list-web .li .c a.title { font-size: 1.6rem; padding: 0; line-height: 2.1em; color:#000; display: block; }
.main .web-page .list-web .li .c a.title:hover { color: var(--main-color); }

.main .web-page .list-web .li .tag { margin-top:0.5em;}
.main .web-page .list-web .li .tag .iconfont {margin-right: 0.75em;color:#888;}
.main .web-page .list-web .li .tag .tag-link {font-size: 1.2rem; color: #999;}
.main .web-page .list-web .li .tag .tag-link a {  margin: 0 1em 0.5em 0; padding: 0; line-height: 2.1em; color:#888; display: block; }
.main .web-page .list-web .li .tag .tag-link a:hover { color: var(--main-color); }

.main .web-page .list-web .li .photo {display: block; width: 21%; margin-left: 1.5em; max-width:23rem; min-width:12rem; height:17.5rem; overflow: hidden;/*flex-grow: 0;*/ /* 右侧自动增长 */
  /*flex-shrink: 0;*/ /* 右侧不缩小 */
  /*flex-basis: 0;*/ /* 右侧基础宽度为0 */}
.main .web-page .list-web .li .photo img { display:block;width:100%; color:rgba(204,204,204,0.10); max-height: 100%; object-fit: cover;transition: transform 0.3s; /* 添加过渡效果 */}
.main .web-page .list-web .li .photo img:hover {transform: scale(1.2); /* 悬浮时放大到 1.2 倍大小 */}
.main .web-page .list-web .li .c .info { padding-top:0.5em;}
.main .web-page .list-web .li .c .info .writer .avatar { height: 3.2rem; width:3.2rem; overflow: hidden; border-radius: 50%; margin-right: 0.5em;}
.main .web-page .list-web .li .c .info .writer .avatar img { display: block; width:100%; height: 100%; object-fit: cover;transition: transform 0.3s;}
.main .web-page .list-web .li .c .info .writer .nickname {font-size:1.3rem;}
.main .web-page .list-web .li .c .info .date { font-size:1.2rem; color: #999; margin: 0 1em; font-family: Montserrat;}

.main .web-page .crumb { line-height: 2em; color: #666; margin-bottom: 0.5em; border-bottom: #EEE solid 1px; font-size: 1.4rem; position: relative; padding-bottom: 0.5em;}
.main .web-page .crumb a, .news_li .news_page .crumb span { display: block; color: #666; white-space: nowrap; }
.main .web-page .crumb #changewidth { position: absolute; right: -0.5em; cursor: pointer; border-radius: 3px; width: 1.8em;text-align: center;}
.main .web-page .crumb #changewidth:hover { background-color: #EEE; color: #0080DD; }
.main .web-page .crumb a.aa { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 1em; }

.main .web-page .content_work { background-color: rgba(255, 255, 255, 0.8); border-radius: 3px; padding: 0.5em 1em 0.5em 1em; min-height: 710px; }
.main .web-page h1 { font-size: 2.4rem; font-weight: normal; margin: 0.5em 0; line-height: 1.5em; color: #333; }
.main .web-page h1 .tag { color:var(--main-color);}
.main .web-page .outline { margin: 0.5em 0; color: #333;}
.main .web-page blockquote { color: #666; background-color: #F1F1F1; padding: 0.5em 1em; position: relative; font-family: 'Open Sans', sans-serif; line-height: 175%; /*text-indent: 35px;*/ border-left-width: 5px; border-left-style: solid; border-left-color:rgba(22,177,59,0.85); margin: 0.5em 0; }
/*blockquote:before { color: #124F8F; content: "\201C"; font-size: 3em; position: absolute; left: -15px; top: 35px; line-height: 0.1em; }
blockquote:after { color: #124F8F; content: "\201D"; font-size: 3em; position: absolute; right: 15px; bottom: 0em; line-height: 0.1em; }*/
.main .web-page .info-web { background:; margin: 0.5em 0; font-size: 1.2rem; line-height: 1.6rem;}
.main .web-page .info-web .date { line-height: 1.8rem;}
.main .web-page .info-web .font span { cursor: pointer;}
.main .web-page .detail-web { line-height: 1.8em; font-size: 1.4rem; word-wrap: break-word }
.main .web-page .detail-web p { padding: 0.45em 0; font-size: 1.4rem; word-break: break-all; }
.main .web-page .detail-web img { max-width:100% !important;}
.main .web-page .detail-web img.mainimg { float:right; margin: 0 0 0.5em 0.5em; min-width: 250px;}
}
.main .web-page .detail-web .date {}


.main .web-page .detail-web ul { padding-left: 1.5em; list-style:disc; color: #666; }
.main .web-page .detail-web ol { padding-left: 1.5em;}
.main .web-page .detail-web a {color:var(--main-color);}
.main .web-page .detail-web pre { line-height: 1.2em;white-space: pre; white-space: pre-wrap; word-wrap: break-word;}
.main .web-right {padding: 0.75em 1em; flex-wrap: wrap; width:280px; margin: 0.5em 0  0.5em 0.5em; background: #FFF; order:3;}
.main .web-page .detail-web .btn-code {position: absolute;
  top: 5px;right:5px;
  cursor: pointer;
  color: rgb(255, 255, 255);
  background: rgba(0, 0, 0, 0.5);
  width: 30px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-radius: 3px;}
.main .web-page .detail-web .btn-switch {background: rgba(53,170,83,0.9);}
.main .web-page .detail-web .btn-copy {background: rgba(253,126,20,0.9);}
.main .web-page .detail-web .btn-run {background: rgba(4,121,250,0.9);}
.main .web-page .detail-web .btn-debug,.main .web-page .detail-web .btn-php {background: rgba(235,67,52,0.9);}

.main .web-page h2 { font-size: 1.5em; font-weight: normal; margin: 1.5em 0 0.5em 0; line-height: 1.5em; color: #000; }
.main .web-page h3 { font-size: 1.3em; font-weight: normal; margin: 1em 0 0.5em 0; line-height: 1.5em; color: #000; }

.main .web-page .small, .main .web-page .small p { font-size: 1.2rem !important; }
.main .web-page .large, .main .web-page .large p { font-size: 1.6rem !important; }

.main .web-page .content-web .tag { margin-top:0.5em;}
.main .web-page .content-web .tag .iconfont {margin-right: 0.75em;color:#888;}
.main .web-page .content-web .tag .tag-link a { font-size: 1.2rem; margin: 0 0.75em 0.75em 0; padding: 0 0.75em; height: 1.8em; line-height: 1.8em; color:#666; display: block; background: #eee; border-radius: 3px;}
.main .web-page .content-web .tag .tag-link a:hover { color: var(--main-color); }
/*表格*/
.main .web-page .content-web table.lichil { width: 100% !important; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 15px; border-color: #CCC; margin: 0.25em 0; }
.main .web-page .content-web table.lichil tr { border: #CCC solid 1px; border-width: 1px 0 0 1px; }
.main .web-page .content-web table.lichil td { min-width: 3em; padding: 0.25em !important; border: #CCC solid 1px; border-width: 0 1px 1px 0; }
.main .web-page .content-web table.lichil th { background-color: #CCC; padding: 0.25em !important; }
.main .web-page .content-web table.lichil tr:nth-child(even) td { background-color: #EEE; }

/*标签*/
.main .web-page .list-tag { margin: 1em 0; }
.main .web-page .list-tag a { font-size: 1.4rem; margin: 0 0.75em 0.75em 0; padding: 0 0.75em; height: 2em; line-height: 2em; color:#666; display: block; background: #F6F6F6; border-radius: 3px;}
.main .web-page .list-tag a:hover { color: #F60; /*background: rgba(255,204,0,0.3);*/ }


@media screen and (max-width: 720px) {
	.main .web-right { width: 100%; margin-top: 1em; margin-left: 0; }
	#changewidth {display:none;}
}

.footer { background-color: rgba(0,0,0,0.04); padding-top: 2em; color: #111; }
.footer .nav-foot { padding-bottom: 1em; }
.footer .nav-foot a { color: #111; line-height: 2em; padding: 0 1em; }
.footer .nav-foot .nav { flex: 1; }
.footer .nav-foot .title { font-size: 1.6rem; }
.footer .copyright { text-align:; }
.footer .copyright * { color: rgba(0,0,0,1.00); font-size: 10px; }


#fixed-window_bak { width:50px; height: 50px; background: #000; position: fixed; bottom: 10px; right:10px;}

#fixed-window { position: absolute; z-index: 9999;border-radius:3px; _overflow:hidden; right:12px; }
#fixed-window.fixed-window { position: fixed !important; bottom:20px;}
#fixed-window .btn { width:4rem; height: 4rem; display: block; background: rgba(255,255,255,.7); border: solid #eee 0px; margin-bottom: 0.25em;box-shadow: 0 12px 32px rgba(55,99,170,.06), 0 2px 6px rgba(55,99,170,.06);border-radius: 50%; cursor: pointer; position: relative;}

/*蓝色：rgba(69,134,243,1.00) 红色：rgba(235,67,52,1.00) 黄色：rgba(251,189,6,1.00) 绿色：#35AA53*/
#fixed-window .btn.change { background:rgba(53,170,83,0.7);}
#fixed-window .btn.qrcode { background:rgba(253,126,20,0.7);}
#fixed-window .btn.progress { background:rgba(4,121,250,0.7)/*rgba(69,134,243,0.7)*/; color: #FFF; cursor: default;font-size:1rem;}
#fixed-window .btn.progress span { font-size:1.2rem;}
#fixed-window .btn.top { background:rgba(235,67,52,0.7);}

#fixed-window .btn.change:hover { background:rgba(53,170,83,0.8);}
#fixed-window .btn.qrcode:hover { background:rgba(253,126,20,0.8);}
#fixed-window .btn.progress:hover { background:rgba(69,134,243,0.8);}
#fixed-window .btn.top:hover { background:rgba(235,67,52,0.9);}

#fixed-window .iconfont  {font-size:1.6rem; color:#FFF;}
#fixed-window .btn:hover .iconfont  {font-size:2rem; color:#FFF;}
#fixed-window .top { display: none;}
#fixed-window .btn .wx { position: absolute; top: -100px; left: -170px; width: 160px;height:160px; display:none; color: #04458A; }
#fixed-window .btn .wx img {width:100%; height:100%; }
#fixed-window .change .iconfont  {font-size:3rem;transition: transform 0.3s; display: block;}
#fixed-window .change:hover .iconfont  {font-size:3rem;transform: rotate(360deg);}
/*减淡*/
#fixed-window.light .btn.change { background:rgba(53,170,83,0.1);}
#fixed-window.light .btn.qrcode { background:rgba(253,126,20,0.1);}
#fixed-window.light .btn.progress { background:rgba(69,134,243,0.1);}
#fixed-window.light .btn.top { background:rgba(235,67,52,0.1);}


#back-top { position: fixed; bottom: 30px; right: 30px; z-index: 9; border: none; outline: none; cursor: pointer; color: #fff; width: 46px; height: 46px; background: var(--main-color); border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; padding: 0; display: none; line-height: 46px; opacity: .9; }
#back-top:hover { opacity: 1; }
#back-top span { font-size: 2rem; font-weight: bold; }
/*定时关闭弹窗 */
.popup_timing { position: absolute; z-index: 999999999; width: 99%; text-align: center; font-size: 1.4rem; }
.popup_timing span { background-color: #000; z-index: 999; color: #FFF; width: auto; line-height: 2em; display: inline-block; border-radius: 0.5em; max-width: 80%; padding: 0.5em 1em; opacity: 0.9; font-weight: bold; }

.drag-tag {position: absolute; max-width: 360px; width: 100%; min-height:120px; top:100px; left:0; background: #FFF; padding: 1em;box-shadow:0px 0px 10px rgba(0,0,0,0.2);}
.drag-tag .con-tag { position: relative;}
.drag-tag .t { font-size:1.6rem; margin-bottom: 0.5em;}
.drag-tag .c { font-size:1.4rem; line-height: 1.75em; color: #666;}
.drag-tag .con-tag::before {
	content: '';
	position: absolute;
	top: -22px; /* 控制箭头位置 */
	/*transform: translateX(-50%);*/ /* 控制箭头位置水平居中 */
	width: 0;
	height: 0;
	border-left: 12px solid transparent; /* 控制箭头左侧空白区域 */
	border-right: 12px solid transparent; /* 控制箭头右侧空白区域 */
	border-bottom: 12px solid #FFF; /* 控制箭头颜色和大小 */
}
.drag-tag .con-tag.left::before {
	left: 1px !important; /* 控制箭头位置居中 */
}
.drag-tag .con-tag.right::before {
	right: 1px !important; /* 控制箭头位置居中 */
}
#progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background-color: rgba(22,177,59,0.9);
}

/*工具列表*/
.list-tool {
	display: flex;
	flex-wrap: wrap;
	/*align-items: stretch;*/
}
.li-tool {
	width: 25%; padding: 0.25em;
}
.li-tool .img { display: block;text-align: center;overflow: hidden; margin:1em; height: 200px; }
.li-tool .img img {
	display: block; margin: auto; width:100%;height: 100%;/*max-height: 100%; 图片会一样高，但会被截取*/
	object-fit: scale-down;object-position: center;transition: transform 0.3s; /* 添加过渡效果 */
}
.li-tool .img img:hover {transform: scale(1.2); /* 悬浮时放大到 1.2 倍大小 */}


.li-tool .title {
	margin:0.5em 1em; /* 设置图片和标题之间的间距 */
	display: block;
	line-height: 1.5em;
	height:3em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2; /* 最多显示两行 */
}

@media (max-width: 1200px) {
	.li-tool {
		width: 33.33%;
	}
}
@media (max-width: 900px) {
	.li-tool {
		width: 50%;
	}
}
@media (max-width: 450px) {
	.li-tool {
		width: 100%;
	}
}
/*html在线*/
#textareaCode {display:none;}
.tool-editor .column-editor { width:50%; border:#FFF solid 1px; background: #FFF; /*height: 500px;*/ margin-top:;}
.tool-editor .column-editor #textarea {height: 60vh; overflow: auto; padding: 0.5em;}

.tool-editor.tool-editor-asymmet .column-editor:nth-child(1) { width:20% !important;}
.tool-editor.tool-editor-asymmet .column-editor:nth-child(2) { width:80% !important;}

.tool-editor .column-editor:nth-child(2) {border-left:#EEE solid 10px;}
.tool-editor .CodeMirror { background: #FFF !important; padding:5px; height: 60vh !important;}
.button-editor { margin-top:0.5em;}
.button-editor button {
	border-width: 0;
	border-radius: 3px;
	background: #EEE;
	padding: 8px 20px;
	cursor: pointer; margin-right: 0.5em;
}
@media (max-width: 720px) {
	.tool-editor .column-editor {
		 width:100%;
	}
	.tool-editor .column-editor:nth-child(2) {border-left:#EEE solid 0px;border-top:#EEE solid 10px;}
	.button-editor #change {display: none;}
}

/*vip*/
.layout { 
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	justify-content: center;
}
.main-vip {
	flex: 1 1 auto;justify-content: right;align-items: center;display: flex; max-width: 1000px; margin-left:auto; margin-right:auto; width:100%;padding-top:2em;padding-bottom: 2em;
}
.body-vip {display: flex;margin:0 auto; width:100%;align-items: stretch;}
.ad-vip { flex:1;padding-right:2em;}
.con-vip { width:100%;max-width: 380px; background-color: #FFF; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 15px; border-radius: 5px; margin:0 auto; }
.con-vip * { font-size: 12px; }
.con-vip button:hover {cursor:pointer;background-color:rgba(0,82,217,0.90);}
.con-vip a:hover { }
.con-vip .title {margin-top: 1em;}
.con-vip .title span.line { width: 100%; height: 50px; line-height: 50px; text-align: left; text-indent: 1.5em; font-size: 16px; }
.con-vip .title-reg span.line { color:var(--main-color);}
.con-vip .vip-form { padding: 0 5% 0 5%; display: flex;
  flex-direction: column;
  align-items: center;
  /*height: 200px;*/ }
.con-vip .vip-form input:focus {outline: none;}
.con-vip .vip-form .item-control { flex-grow: 1;display: flex;align-items: center; width:100%; margin: 0.5em auto 0 auto;}
.con-vip .vip-form .item-control:first-child {}
.con-vip .vip-form .item-msg { height:2em;line-height: 2em; color:var(--main-color-red); width:100%;}

.con-vip .agreement { margin: 0.5em 0 1.5em 0; line-height: 12px; display:;  text-align: center; color:#AAA;}
.con-vip .agreement input { display: block; float: left; border: #F60 solid 1px; margin-right: 0.5em; }
.con-vip .agreement label { }
.con-vip .agreement a {color:#999;}
.con-vip .agreement input[type="checkbox"] { }

.con-vip .vip-form .item-control input { background-color: #FFF; flex: 1; height: 40px; border-width: 0; border-bottom: #CCC solid 1px; border-radius: 0px; font-size: 14px; }

.item-control input:hover { border-bottom: 1px solid #FEB843 !important; }
.item-control input:focus { border-bottom: 1px solid #FEA91D !important; }
	
.con-vip .vip-form .item-control .refer { display: block; width: 100%; height: 40px; line-height: 40px; text-align: center; padding: 0 0.5em; background-color: var(--main-color); border: var(--main-color) solid 1px; border-radius: 3px; color: #FFF; font-size: 14px; border-width: 0; }
.con-vip .vip-form .item-control .refer:hover {background-color:rgba(0,82,217,0.90);}
/*.vip-form .member_forget { text-align: right; line-height: 3em; }
.vip-form .member_forget a { line-height: 2em; display: inline-block; }
.vip-form .member_forget a.regi { float: left; }
.vip-form .member_forget a:hover { color: #F60 }*/

.con-vip .vip-form .item-pwd { position: relative; }
.con-vip .vip-form .item-pwd input { padding: 0 3.5em 0 0em; }
.con-vip .vip-form .item-pwd span.iconfont { font-size: 24px; line-height: 42px; position: absolute; right: 0; padding: 0 0.35em; width: 1.8em; height: 40px; cursor: pointer;}

.con-vip .vip-form #getcode { width: 105px; height: 40px; display: block; background-color: var(--main-color); line-height: 40px; text-align: center; color: #FFF; border-radius: 3px; border-width: 0; }
.con-vip .vip-form #getcode:hover {cursor:pointer;background-color:rgba(0,82,217,0.90);}
.warning { color: var(--main-color-red); }

.con-vip .vip-form .extend {
	display: flex; width: 100%;
	justify-content: space-between;
	text-align: justify;
	padding: 0.5em 0;
}
.con-vip .vip-form .extend a {color:#666; line-height: 2em;}
.con-vip .vip-form .extend a:hover {color:var(--main-color);}
/*
  滚动条样式
*/
::-webkit-scrollbar {
  -webkit-appearance: none;
  background: transparent;
  width: 6px !important;
  height: 6px !important; }

:hover::-webkit-scrollbar-thumb {
  display: block;
  border-radius: 4px;
  box-shadow: 0 0 0 2px transparent; }

::-webkit-scrollbar-thumb {
  background: var(--theme-color);
  border-radius: 4px;
  border-style: solid;
  border-color:transparent;
  border-width: 2px;
  background-clip: padding-box; }
  /* html body .main-header .right::-webkit-scrollbar {
    display: none; 
  } */
* {
	--theme-color:rgba(22,177,59,0.9);
	--theme-bg-color:#f5f7fd;
	box-sizing: border-box;
	scrollbar-width:auto;
	scrollbar-color: var(--theme-color) var(--theme-bg-color);
	word-wrap: break-word;
	word-break: break-all;
	word-spacing: normal;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 
}
#nav-quick ul {
	--theme-color:rgba(180,180,180,0.80);
	--theme-bg-color:#f5f7fd;
	box-sizing: border-box;
	scrollbar-width:auto;
	scrollbar-color: var(--theme-color) var(--theme-bg-color);
	word-wrap: break-word;
	word-break: break-all;
	word-spacing: normal;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 
}