@charset "utf-8";
/* =========================================================
   光影数说 · 智慧城市可视化展板
   主色：深棕 #8B4513 + 米黄 #F5F0DC（老电影票根 + 古籍书页）
   辅色：暗红 #9E2A2B（剧场帷幕） / 浅灰 #DCDCDC（银幕微光）
   点缀：墨黑 #1A1A1A（数轴、关键数字）
   风格：传统古韵 × 轻科技简约，胶片齿孔 × 卷轴装订线
   ========================================================= */
@font-face{font-family:electronicFont;src:url(../font/DS-DIGIT.TTF)}

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box}
*,body{padding:0px;	margin:0px;color:#3B3B3B;font-family:"Noto Serif SC","Songti SC","Source Han Serif SC","SimSun",Georgia,serif;}
body{
	background:
	  radial-gradient(1200px 600px at 8% -10%, rgba(184,136,75,0.18) 0%, transparent 60%),
	  radial-gradient(900px 500px at 100% 0%, rgba(158,42,43,0.10) 0%, transparent 55%),
	  linear-gradient(180deg, #F8F3E0 0%, #F5F0DC 45%, #EFE7C6 100%);
	background-attachment: fixed;
	color:#3B3B3B;
	font-size:.1rem;
	min-height:100vh;
	position:relative;
}
/* 卷轴装订线（左右两侧极淡竖纹） */
body::before,
body::after{
	content:'';
	position:fixed; top:0; bottom:0; width:18px;
	background:
	  repeating-linear-gradient(0deg, transparent 0 14px, rgba(139,69,19,0.08) 14px 15px);
	pointer-events:none; z-index:0;
}
body::before{left:0; border-right:1px solid rgba(139,69,19,0.12);}
body::after{right:0; border-left:1px solid rgba(139,69,19,0.12);}

li{ list-style-type:none;}
img{ border:none; max-width: 100%;}
a{ text-decoration:none; color:#8B4513;}
a.active,a:focus{ outline:none!important; text-decoration:none;}
ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
a:hover{ color:#9E2A2B; text-decoration: none!important}

.clearfix:after, .clearfix:before {display: table; content: " "}
.clearfix:after {clear: both}
.pulll_left{float:left;}
.pulll_right{float:right;}

::-webkit-scrollbar {width:6px;height:6px;position:absolute}
::-webkit-scrollbar-thumb {background-color:#8B4513; border-radius:3px;}
::-webkit-scrollbar-track {background-color:rgba(245,240,220,0.5);}

/***/
.canvas{position: absolute; width:100%; left: 0; top: 0; height: 99%; z-index: 1;}

.allnav{height: calc(100% - 36px);}
.loading{position:fixed; left:0; top:0; font-size:18px; z-index:100000000;width:100%; height:100%; background:#F5F0DC; text-align:center;}
.loadbox{position:absolute; width:160px;height:150px; color:#8B4513; left:50%; top:50%; margin-top:-100px; margin-left:-75px;}
.loadbox img{ margin:10px auto; display:block; width:40px;}

.copyright{ background:rgba(245,240,220,0.6); border: 1px solid rgba(139,69,19,0.18); line-height:.5rem; text-align: center; padding-right: 15px; bottom: 0; color:#6A6A6A; font-size: .16rem; }

/* ============== 顶部光影评书人书场横额 ============== */
.head{
	position: relative;
	z-index: 100;
	background:
	  linear-gradient(180deg, rgba(251,246,227,0.96) 0%, rgba(240,233,206,0.88) 100%);
	border: 1px solid rgba(139,69,19,0.22);
	border-left: 6px solid #8B4513;
	border-right: 6px solid #8B4513;
	box-shadow: 0 8px 28px rgba(139,69,19,0.12);
	padding: .22rem .4rem .2rem;
	display:flex; align-items:center; gap:.3rem;
	overflow:hidden;
	min-height:1.4rem;
}
.head::before{
	content:'';
	position:absolute; inset:0;
	background-image:
	  repeating-linear-gradient(90deg, rgba(139,69,19,0.05) 0 1px, transparent 1px 40px),
	  repeating-linear-gradient(0deg, rgba(139,69,19,0.04) 0 1px, transparent 1px 40px);
	pointer-events:none;
}
/* 印章：影（左侧暗红方印，旋转 -4deg） */
.head__seal{
	flex:0 0 auto;
	width:.82rem; height:.82rem; border-radius:.08rem;
	background:#9E2A2B;
	color:#FFF3D9;
	font-family:"Noto Serif SC","Songti SC","SimSun",serif;
	font-weight:900;
	font-size:.42rem; line-height:.78rem; text-align:center;
	border:2px solid #7A1E1F;
	box-shadow: inset 0 0 0 3px rgba(255,243,217,0.3), 0 6px 16px rgba(158,42,43,0.25);
	transform:rotate(-4deg);
	user-select:none;
	position:relative;
	z-index:2;
}
.head__text{ flex:1; min-width:0; position:relative; z-index:2; text-align:center;}
.head__eyebrow{
	font-family:"Noto Serif SC","Songti SC","SimSun",serif;
	font-size:.12rem; letter-spacing:.3rem; color:#6A6A6A;
	margin-bottom:.06rem;
}
.head h1{
	color:#1A1A1A;
	text-align:center;
	font-size:.42rem;
	line-height:.55rem;
	font-weight:900;
	letter-spacing:.1rem;
	background:linear-gradient(180deg, #1A1A1A 40%, #8B4513 100%);
	-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
	position:relative;
	margin:0 0 .06rem 0;
}
.head__subtitle{
	display:flex; align-items:center; justify-content:center; gap:.14rem;
	font-family:"Noto Serif SC","Songti SC","SimSun",serif;
	font-size:.14rem; color:#6A6A6A; letter-spacing:.05rem;
}
.head__divider{
	display:inline-block; width:.44rem; height:1px;
	background:linear-gradient(90deg, transparent, #B8884B, transparent);
}
/* 印章：数 说 （右侧深棕圆印，旋转 6deg） */
.head__stamp{
	flex:0 0 auto;
	width:.58rem; height:.58rem;
	border:2px solid #8B4513;
	border-radius:50%;
	color:#8B4513;
	font-family:"Noto Serif SC","Songti SC","SimSun",serif;
	font-weight:900;
	font-size:.13rem; line-height:1.2;
	text-align:center;
	padding-top:.08rem;
	background:rgba(255,255,255,0.45);
	user-select:none;
	transform:rotate(6deg);
	position:relative;
	z-index:2;
}
.weather{ position:absolute; right:.4rem; top:.12rem; line-height: .4rem; z-index:3;}
.weather img{ width:.25rem; display: inline-block; vertical-align: middle;}
.weather span{color:#6A6A6A; font-size: .14rem; padding-right: .1rem; font-family:"Consolas",monospace;}

/* ============== 主体三列布局 ============== */
.mainbox{ padding:.15rem .15rem 0rem .15rem; position:relative; z-index:2;}
.mainbox>ul>li{ float: left; padding: 0 .12rem}
.mainbox>ul>li{ width: 30%}
.mainbox>ul>li:nth-child(2){ width: 40%;padding: 0}

/* ============== 数据卡片（胶片齿孔 + 评书装订） ============== */
.boxall{
	border:1px solid rgba(139,69,19,0.28);
	padding:0 .2rem .4rem .15rem;
	background:
	  radial-gradient(500px 200px at 50% 0%, rgba(139,69,19,0.05), transparent 70%),
	  linear-gradient(180deg, #FFFAEC, #F8F0D0);
	box-shadow: 0 14px 42px rgba(26,26,26,0.10), 0 2px 6px rgba(139,69,19,0.08);
	position: relative;
	margin-bottom: .2rem;
	z-index: 10;
	overflow:hidden;
}
/* 卡片四角：评书装订小角 */
.boxall:before,
.boxall:after{ position:absolute; width: .12rem; height: .12rem; content: "";  border-top: 2px solid #9E2A2B; top: 0;}
.boxall:before,.boxfoot:before{border-left: 2px solid #9E2A2B;left: 0;}
.boxall:after,.boxfoot:after{border-right: 2px solid #9E2A2B; right: 0;}
.alltitle{
	font-size:.22rem;
	color:#1A1A1A;
	text-align:center;
	line-height:.55rem;
	font-weight:900;
	letter-spacing:.04rem;
	position:relative;
}
.alltitle::before, .alltitle::after{
	content:'';
	display:inline-block;
	width:.4rem; height:1px;
	background:linear-gradient(90deg, transparent, #B8884B, transparent);
	vertical-align:middle;
	margin:0 .15rem;
}

.boxfoot{ position:absolute; bottom: 0; width: 100%; left: 0;}
.boxfoot:before,
.boxfoot:after{ position:absolute; width: .12rem; height: .12rem;  content: "";border-bottom: 2px solid #9E2A2B; bottom: 0;}

/* ============== 中部数字滚动 ============== */
.bar{background:rgba(255,250,236,0.6); padding: .15rem; border:1px solid rgba(139,69,19,0.22); border-radius:4px;}
.barbox li,.barbox2 li{ width:50%; text-align: center; position: relative; z-index: 100;}
.barbox:before,
.barbox:after{ position:absolute; width: .3rem; height: .12rem; content: ""; }
.barbox:before{border-left: 2px solid #9E2A2B;left: 0;border-top: 2px solid #9E2A2B; }
.barbox:after{border-right: 2px solid #9E2A2B; right: 0; bottom: 0;border-bottom: 2px solid #9E2A2B; }

.barbox li:first-child:before{ position:absolute; content: ""; height:50%; width: 1px; background: rgba(139,69,19,0.2); right: 0; top: 25%;}

.barbox{  border: 1px solid rgba(139,69,19,0.22); position: relative; background:rgba(255,250,236,0.6);}
.barbox li{ font-size: .7rem; color: #9E2A2B; padding: .05rem 0;  font-family:electronicFont; font-weight: bold; text-shadow: 0 2px 4px rgba(158,42,43,0.15);}
.barbox2 li{ font-size: .19rem; color:#6A6A6A; padding-top: .1rem;}

/* ============== 地图区 ============== */
.map{  position:relative; height: 7.2rem; z-index: 9;}
.map4{ width: 200%; height:7rem;  position: relative; left: -50%; top: 4%; margin-top: .2rem; z-index: 5;}
.map1,.map2,.map3{ position:absolute; opacity: .35; mix-blend-mode:multiply;}
.map1{ width:6.43rem; z-index: 2;top:.45rem; left: .7rem;  animation: myfirst2 15s infinite linear; filter:sepia(0.4) hue-rotate(-15deg);}
.map2{ width:5.66rem; top:.85rem; left:1.2rem; z-index: 3; opacity: 0.2; animation: myfirst 10s infinite linear; filter:sepia(0.4) hue-rotate(-15deg);}
.map3{ width:5.18rem; top:1.07rem; left: 1.4rem; z-index: 1; filter:sepia(0.4) hue-rotate(-15deg);}

.tabs { text-align: center; padding: .1rem 0 0 0;}
.tabs a {
    position: relative;
    display: inline-block;
    margin-left: 1px;
    padding:.05rem .2rem;
    color: #6A6A6A;
    transition: all .3s ease-out 0s;
    font-size: 14px;
}
.tabs li{ display:inline-block;}
.tabs a:after {
    position: absolute;
    width: 1px;
    height: 10px;
    background-color: rgba(139,69,19,0.18);
    content: '';
	 margin-left:0; right:-1px;    margin-top: 7px;
}
.tabs li a.active {border: 1px solid rgba(139,69,19,0.22); background: rgba(255,250,236,0.6); color:#1A1A1A;}

.tit02{ text-align:center; margin: .1rem 0; position: relative}
.tit02 span{border: 1px solid rgba(139,69,19,0.22); letter-spacing: 2px; padding: .01rem .2rem; background: rgba(255,250,236,0.6);  font-size: .18rem;  color: #9E2A2B;}
.tit02:before,.tit02:after{ position:absolute; width:26%; height: 1px;background: rgba(139,69,19,0.2);  content: ""; top: .12rem;}
.tit02:after{ right:0;}
.tit02:before{ left:0;}

.wrap{ height:2.54rem; overflow: hidden;}
.wrap li{  line-height:.42rem; height:.42rem; font-size: .18rem; text-indent: .24rem; margin-bottom: .1rem; }
.wrap li p{border: 1px solid rgba(139,69,19,0.22);color: #3B3B3B; background:rgba(255,250,236,0.5); }
.sy{ float:left; width: 33%; height:95%; margin-top: .25rem;}


.adduser{ height:1.5rem; overflow: hidden;}
.adduser li{height:.5rem;}
.adduser img{ width: .40rem; border-radius: .5rem; margin-right: .1rem; display: inline-block; vertical-align: middle;}
.adduser span{  line-height:.5rem; font-size: .18rem;color: #3B3B3B; }

.sycm ul{ margin-left:-.5rem;margin-right:-.5rem;  padding: .16rem 0;}
.sycm li{ float: left; width: 33.33%; text-align: center; position: relative}
.sycm li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(139,69,19,0.18); right: 0; top: 15%;}
.sycm li:last-child:before{ width: 0;}

.sycm li h2{ font-size:.3rem; color: #9E2A2B;}
.sycm li span{ font-size:.18rem; color: #6A6A6A; opacity: .85;}

@keyframes myfirst2
{
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}

@keyframes myfirst
{
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);}
}

/* ============== 卡片顶部胶片齿孔装饰 ============== */
.film-perfs{
	display:flex; justify-content:space-around;
	background:#1A1A1A;
	padding:.06rem .08rem;
	margin:0 0 .12rem 0;
	position:relative;
}
.film-perfs::after{
	content:'光影';
	position:absolute;
	left:50%; top:50%;
	transform:translate(-50%,-50%);
	color:#F5F0DC;
	font-size:.12rem;
	letter-spacing:.1rem;
	font-weight:900;
	opacity:.6;
	pointer-events:none;
}
.film-perfs span{
	width:.12rem; height:.18rem;
	background:#F5F0DC;
	border-radius:2px;
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.25);
}

/*Plugin CSS*/
.str_wrap {
	overflow:hidden;
	width:100%;
	position:relative;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	white-space:nowrap;
}


.str_move {
	white-space:nowrap;
	position:absolute;
	top:0;
	left:0;
	cursor:move;
}
.str_move_clone {
	display:inline-block;
	vertical-align:top;
	position:absolute;
	left:100%;
	top:0;
}
.str_vertical .str_move_clone {
	left:0;
	top:100%;
}
.str_down .str_move_clone {
	left:0;
	bottom:100%;
}
.str_vertical .str_move,
.str_down .str_move {
	white-space:normal;
	width:100%;
}
.str_static .str_move,
.no_drag .str_move,
.noStop .str_move{
	cursor:inherit;
}
.str_wrap img {
	max-width:none !important;
}