body{overflow:hidden;}
.wrap{width:100%;height:100%;overflow:hidden;/* background-color:#fff; */background-color: #2a2b2f;}
.container{position:relative;width:90%;max-width:1800px;margin:auto;}
button i{color:#696969;}
button:hover i{/* color:#1e1e1e; */color: #eee;}

.header{position:fixed;top:0px;left:0px;right:0px;z-index:20;/* background-color:rgb(255,255,255, 0.4); */background-color: #2a2b2f;color: #eee;}
.header .container{height:50px;  padding:10px; margin-bottom:0px; border-bottom:1px solid #a2a2a2;}

.header div.title{position:absolute;left:0px; width:100%;}
.header div.title span.title{position:absolute;left:50px;top:5px; font-weight:600;}
.header ul.menu{position:fixed;bottom:15px;right:5%;}
.header ul.menu li{float:left; display:inline-block; }
.header ul.menu li.fullscreenMenu{display:none;}
.header button.menu{border:0px; background-color:rgb(0 0 0 / 0);}
.header button.menu i{font-size:30px; }
.header button.menu:hover i{}

@media (min-width : 800px) {
	.header div.title{width:calc(100% - 200px); }
	.header div.title span.title{position:absolute;left:50px;top:5px; font-weight:600;}
	.header ul.menu{ position:absolute;right:0px; bottom:initial;}
	.header ul.menu li{margin-right:10px;}
	.header ul.menu li.fullscreenMenu{display:inline-block;}
	.header ul.menu li:last-child{margin-right:0px;}
}

.header div.tableContents{position:absolute;top:50px;left:0px;width:340px;height:calc(100vh - 110px);border-left:1px solid #a2a2a2;border-right:1px solid #a2a2a2;/* background-color:#fff; */background: #2a2b2f;}
.header div.tableContents .head{position:relative;padding:20px 10px; font-weight:bold;}
.header div.tableContents .head button{position:absolute;top:15px;right:10px;}
.header div.tableContents .head button i{color:#ccc;}
.header div.tableContents .head button:hover i{/*color:#1e1e1e;*/color:#eee;}
.header div.tableContents .cover{position:relative;height:150px;/* background-color:#f0f0f0; */background: #2a2b2f;border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
.header div.tableContents .cover img{position:absolute;left:10px;top:10px; max-width:100px; max-height:130px;}
.header div.tableContents .cover p{position:absolute;right:20px;top:10px;width:190px; line-height:1.6rem; }
.header div.tableContents ul{height:calc(100vh - 310px); overflow-y:auto; }
.header div.tableContents ul li{padding:9px 15px 9px 25px;border-bottom:1px solid #a2a2a2;line-height:1.6rem;cursor:pointer;position:relative;}
.header div.tableContents ul li:last-child{border-bottom:0px;}
.header div.tableContents ul li.selected{color:#eb6a1e;}
.header div.tableContents ul li.small{font-size:14px;padding: 3px 15px 3px 40px;}
.header div.tableContents ul li.small.hide{height:0; display:none !important;}
.header div.tableContents ul li .arrow{position:absolute; left:6px; top:50%; transform:translate(0, -50%); font-size:13px; color:#a2a2a2; transition:transform 0.3s ease;}
.header div.tableContents ul li .arrow.rotate{transform: translate(0, -50%) rotate(90deg);}
.header div.searchBox{position:absolute;top:50px;right:0px;width:340px;height:calc(100vh - 110px);border-left:1px solid #a2a2a2;border-right:1px solid #a2a2a2;/* background-color:#fff; */background: #2a2b2f;}
.header div.searchBox .head{position:relative;padding:20px 10px; font-weight:bold;}
.header div.searchBox .head button{position:absolute;top:15px;right:10px;}
.header div.searchBox .head button i{color:#ccc;}
.header div.searchBox .head button:hover i{/*color:#1e1e1e;*/color:#eee;}
.header div.search{padding:20px 10px;border-bottom:1px solid #a2a2a2;/* background-color:#f0f0f0; */background-color: #2a2b2f;text-align:center;border-top: 1px solid #eee;}
.header div.search input{padding:8px; width:230px; height:40px; border:1px solid #acacac; font-size:18.5px;}
.header div.search button{padding:8px;width:40px; height:40px; border:1px solid #acacac; background-color:#fff;}
.header div.search button i{font-size:20px;}
.header div.search button:hover i {color:#182a8b;}
.header div.searchResult{height:calc(100vh - 250px); overflow-y:auto;}
.header div.searchResult .msg{padding-top:50px; text-align:center; color:#898989;}
.header div.searchResult .msg i{margin-bottom: 10px;font-size: 50px;color: #dc8080;}
.header div.searchResult ul li{ padding:5px;margin-bottom:5px;border-bottom:1px solid #acacac; cursor:pointer;}
.header div.searchResult ul li div.text{line-height:160%;height:60px; font-size:.75rem;}
.header div.searchResult ul li div.text .keyword{padding:2px;background-color:#ff0;color: #000;}
.header div.searchResult ul li div.text .page{color:#eb6a1e;}
.header::after{ content:' '; display:block; clear:both;}


.body{padding:65px 0px;}
.body .move{position:absolute; top:0px; height:calc(100vh - 120px); padding-top:35vh; vertical-align:middle; opacity:0; }
.body .move.on{opacity:1;}
.body .move button{border:0px; background-color:rgb(0 0 0 / 0);}
.body .move button i{font-size:50px;  opacity:0.8; }
.body .screen{position:relative;left:50%;}
.body .prev{left:-5%;}
.body .next{right:-5%; }
.body .screen{}
.body .screen .page{ }
@media (min-width : 800px) {
	.body .prev{left:0px;}
	.body .next{right:0px; }
}

.footer{position:fixed;bottom:0px;left:0px;right:0px;z-index:10;/* background-color:rgb(255,255,255, 0.4); */background-color: #2a2b2f;}
.footer .container{ padding:10px 0px; height:60px; border-top:1px solid #a2a2a2;}
@media (min-width : 800px) {
	.footer .container{ text-align:center; }
}

.footer button {display:inline-block; border:0px; background-color:rgb(0 0 0 / 0);}
.footer button i{font-size:40px; }
.footer button:hover i{}
.footer .box { display:inline-block; height:40px; padding:5px 10px 4px 8px; border-radius:4px; background-color:#696969; color:#fff;vertical-align:text-bottom;}
.footer .box input{ display:inline-block; width:60px; font-size:21px; text-align:center;}
.footer .box span{}





.body .screen .page img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin: 0;
	max-width:100%;
}

.body .screen .page {
	background-repeat: no-repeat;
	/*background-size: 100% 100%;*/
	background-color: white;
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow: 0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow: 0 0 20px rgba(0,0,0,0.2);
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.body .screen .even .gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: -webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image: -ms-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image: -o-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
	background-image: linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
}

.body .screen .odd .gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: -webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
	background-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image: -moz-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image: -ms-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image: -o-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
	background-image: linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
}

.body .screen .shadow {
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;
	-webkit-box-shadow: 0 0 20px #ccc;
	-moz-box-shadow: 0 0 20px #ccc;
	-o-box-shadow: 0 0 20px #ccc;
	-ms-box-shadow: 0 0 20px #ccc;
	box-shadow: 0 0 20px #ccc;
}