body {
			background-color: #CCCCCC;
			margin:0;
			width:100%;
			overflow-x: none;
			overflow-y: none;
			
		}
		canvas {
			background-color: white;
			border: 1px solid #000;
			touch-action: none; /* 禁止触摸事件的默认行为，防止滚动页面 */
			}

		#thumbnailContainer {
			display: flex;
			overflow-x: hidden;
			overflow-y: scroll;
			flex-direction: column;
			width: 130px; /* 设置容器高度为60px */
			height:90%;
			float:left;
			background-color:#e0e0e0;
					
			position:fixed; 
			left:0;
			top:40px;
			padding-top:15px;
			z-index:12;
			-ms-overflow-style: none;  /* IE and Edge */
			scrollbar-width: none;  /* Firefox */
			::-webkit-scrollbar {
				-webkit-appearance: none;
				width: 7px;
			}
			::-webkit-scrollbar-thumb {
				border-radius: 4px;
				background-color: rgba(0, 0, 0, .5);
				-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
			}
			
			/* 为IE和Edge显示滚动条 */
			-ms-overflow-style: scrollbar;
			
			/* 为Firefox显示滚动条 */
			scrollbar-width: auto;

		}

		.thumbnail {
			display:inline-table;
			width: 100px;
			height: 60px;
			border: 1px solid #666666;
			cursor: pointer;
			margin-left:5px;
			margin-right:5px;
			margin-bottom:5px;
		}

		.thumbnail.selected {
			border: 2px solid #000000;
			margin-bottom:3px;
			
		}
		
		.thumbnail.onion {
			border: 2px solid blue; 
			margin-bottom:3px;
			
		}

		#onionskinCanvas {
			display: none; /* 初始状态隐藏 */
			position: absolute;
			top:0;
			left: 135px;
			pointer-events: none; /* 禁止鼠标事件 */
			opacity:0.5;
			z-index:2;
		}

		#selecteOnionSkinUi {
			display: none; /* 初始状态隐藏 */
		}
		#threeDCanvas {
			float:right;
			position: absolute;
			padding-right:10px;
			width:1024px;
			height:576px;
			}
		#topbar {
			background-color: #999999;
			height:30px;
			width:100%;
			padding:5px;			
			position:fixed; 
			top:0;			
			z-index:6;
		}
		#canvasSize{
			float:right;
			padding-right:10px;
		}
		#drawUi{			
			position:fixed; 
			top:40px;
			padding-left:15px;
			padding-top:5px;
			padding-bottom:5px;
			left:130px;
			background-color:#dddddd;
			width:100%;
			z-index:5;
		}
		#catch3dBtn {
			float:right;
			background-color:orange;
			height:50px;
			width:125px;
			border-radius:15px;
			margin-right:25px;
		}
		
		.tab {
			border: 1px solid #555555;
			border-radius: 5px;
			overflow: hidden;
			border-radius:15px;
			margin-top:0px;
			margin-left:140px;
			position:fixed; 
			bottom:0;
			width:740px;
			height:110px;
			background-color: rgba(200, 200, 200, 0.7);
			z-index:8;
		}
		.tab .tab-title {
			list-style: none;
			display: flex;
			margin: 0;
			padding: 0;
			width:300px;
			z-index:8;
			
		}
		.tab .tab-title li {
			flex: 1;
			text-align: center;
			padding: 5px;
			background-color: #aaa;
			border-right: 1px solid #666666;
			cursor: pointer;
			border-top-left-radius:15px;
			border-top-right-radius:15px;
			width:330px;
			z-index:8;
			display: flex;
			align-items: center;
			justify-content: center;
			
		}
		.tab .tab-title .active {
			display: flex;
			background-color: rgba(240, 240, 240, 0.7);
			font-weight: bold;
			z-index:8;
			align-items: center;
			justify-content: center;
		}
		.tab .tab-content .content-item {
			display: none;
			padding: 10px;
			z-index:8;
			width:100%;
		}
		.tab .tab-content .active {
			display: block;
			background-color: rgba(240, 240, 240, 0.7);
			height:85px;
			z-index:8;
			
		}
		#drawingCanvas {
			margin-top: 82px;
			margin-left: 135px;
			margin-right:300px;
			margin-bottom:200px;
		}
		#3dModel{
			border: 1px solid #fff;
			border-radius: 5px;
			overflow: hidden;
			border-radius:15px;
			margin-top:5px;
			margin-left:140px;
			position:fixed; 
			top:0;
			width:350px;
			height:60px;
			background-color:#999999;
			font-color:black;
		}
		#animationToolBar{
			position:fixed; 
			bottom:110px;
			display: block;
			background-color: rgba(240, 240, 240, 0.7);
			height:40px;
			border: 1px solid #555555;
			border-radius:15px;
			padding-top:0px;
			padding-left:0px;
			padding-right:5px;
			left:130px;
			margin:10px;
			z-index:10;
			width:735px;
			display: flex;
			align-items: center;
		}
		.switchBtn {
		  position: relative;
		  display: inline-block;
		  width: 40px;
		  height: 20px;
		}

		.switchBtn input { 
		  opacity: 0;
		  width: 0;
		  height: 0;
		}

		.slider {
		  position: absolute;
		  cursor: pointer;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: #ccc; /* 未选中时的颜色 */
		  transition: .4s;
		  border-radius: 34px; /* 圆角 */
		  margin-left:4px;
		}

		.slider:before {
		  position: absolute;
		  content: "";
		  height: 12px;
		  width: 12px;
		  left: 4px;
		  bottom: 4px;
		  background-color: white;
		  transition: .2s;
		  border-radius: 50%; /* 圆角 */
		}

		input:checked + .slider {
		  background-color: #666666; /* 选中时的颜色 */
		}

		input:focus + .slider {
		  box-shadow: 0 0 1px #666666; /* 焦点时的颜色 */
		}

		input:checked + .slider:before {
		  transform: translateX(16px);
		}
		#dragBar{
		  position: relative;
		  width:32px;
		  border-width:0px;
		  background-color:transparent;
		  cursor:pointer;
		}
		.toolbarBtn{
		  border-style:none;
		  border-width:0px;
		  border-radius:8px;
		  background-color:#999999;
		  height:28px;
		  position: relative;
		  top:0px;
		  margin:2px;
		  display: flex;
		  align-items: center;
		  padding-top:0px;
		  padding-bottom:0px;
		  padding-left:8px;
		  padding-right:8px;
		}
		#animationTools{
			position:relative; 
			width:720px;
			display: block;
			display: flex;
			align-items: center;
		}
		.miniMaxBtn{
			border-width:0px;
			border-style:none;
			background-color:transparent;
			width:25px;
		}
		.toolbarBtnCap{
		  border-style:none;
		  border-width:0px;
		  border-radius:8px;
		  background-color:rgb(255,100,0);
		  height:32px;
		  position: relative;
		  top:0px;
		  margin:2px;
		  display: flex;
		  align-items: center;
		  padding-top:2px;
		  padding-bottom:0px;
		  padding-left:5px;
		  padding-right:5px;
		}
		#tabDrag{
		  float: right;
		  margin-top:5px;
		  margin-right:5px;
		  margin-left:5px;
		}
		#tabMini{
		  margin-top:5px;
		  float: right;
		}
		#tabMax{
		  margin-top:15px;
		  margin-right:15px;
		  float: right;
		}
		#brushSize{
			width:100px;
		}
		#brushOpacity{
			width:100px;
		}
		#zoomTools{			
		  position:fixed; 
		  display: flex;
		  top:85px;	
		  right:170px;
		  z-index:5;
		  width:110px;
		  border-radius:12px;
		  background-color: rgba(240, 240, 240, 0.7);
		  border-style:solid;
		  border-width:1px;
		  border-color:black;
		  font-size:15px;
		  align-items: center;
		  padding-left:5px;
		  height:55px;
		  float: right;
		  
		}
		#frameNumShow{			
		  position:fixed; 
		  display: flex;
		  top:85px;	
		  right:5px;
		  z-index:5;
		  width:155px;
		  border-radius:12px;
		  background-color: rgba(240, 240, 240, 0.7);
		  border-style:solid;
		  border-width:1px;
		  border-color:black;
		  font-size:9pt;
		  align-items: center;
		  padding-left:5px;
		  height:55px;
		  float: right;
		  
		  
		}
		.zoomBtn{		  
		  border-style:none;
		  border-width:0px;
		  border-radius:8px;
		  background-color:#999999;
		  height:28px;
		  margin:2px;
		  display: flex;
		  align-items: center;
		  padding-top:0px;
		  padding-bottom:0px;
		  padding-left:5px;
		  padding-right:5px;
		  float: right;
		}
		#logo{			
		  flex: 1;
		  display: flex;
		  align-items: center;
		  color:white;
		  font-weight:bolder;
		}