@-ms-viewport { width:device-width; }
@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
*{ text-decoration: none;}
html { height:100%; text-decoration: none;}
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
#contact{ position: absolute;  z-index: 1; bottom:50%; right: 20px; width: 30px; height: 90px;line-height: 20px; padding-top: 10px; background: rgba(255,118,0,1.00); text-align: center; border-radius: 5px;}
#list{ position: absolute;  z-index: 1; top: 0px; width: 100%; height: 100%;line-height: 20px; padding-top: 10px; background: rgba(0,0,0,.5); display: none;text-align: left; border-radius: 5px;}

#zan{ position: absolute;  z-index: 1; bottom:calc(50% - 70px); right: 15px; width: 40px; height: 40px;line-height: 20px;  background: rgba(255,255,255,0.80); text-align: center; border-radius: 25px;}
#zan_img{ background:url(/images/zan.png) no-repeat; height:30px; width:30px; margin:0  auto; margin-top:4px; background-size:30px 30px;}
#zan_num{ margin-top:10px;}

#views{ position: absolute;  z-index: 1; top:100px; left: 40px; width: 25px; height: 25px;line-height: 20px;  background: rgba(255,255,255,0.80); text-align: center; border-radius: 25px;}
#views_img{ background:url(/images/views.png) no-repeat; height:25px; width:25px; margin:0  auto; margin-top:2px; margin-left:3px; background-size:20px 20px;}
#views_num{ position:relative; left:30px; top:-24px; width:160px; text-align:left;}
@media screen and (max-device-width: 600px) {
	#views{ position: absolute;  z-index: 1; top:60px; left: 40px; width: 25px; height: 25px;line-height: 20px;  background: rgba(255,255,255,0.80); text-align: center; border-radius: 25px;}
#views_img{ background:url(/images/views.png) no-repeat; height:25px; width:25px; margin:0  auto; margin-top:2px; margin-left:3px; background-size:20px 20px;}
#views_num{ position:relative; left:30px; top:-24px; width:160px; text-align:left;} 
#img_url img{ width:100% !important;max-width:100% !important;;}
#video_urls{ width:100% !important;;}
	}

#list_nei{ width:320px; height:450px; margin:0 auto; background:#e6472a; position:relative; top:calc(50% - 225px);border-radius:10px;box-shadow:0 0 30px #000; overflow:hidden;} 
#books{ width:300px; height:430px; left:10px; top:10px; position:absolute; background:#FFF; border-radius:10px;}
#add{ width:300px; height:430px; left:10px; top:10px; position:absolute; background:#FFF; border-radius:10px;}
#book_loop{ background:#e6472a; position:absolute; width:1000px;border-radius:1000px; height:1000px; left:-350px; top:380px; }
#book_btn{ width:150px ; height:30px; line-height:30px; margin:0 auto; text-align:center; font-size:18px; font-weight:bold; margin-top:18px;border-radius:30px; background:#f7d724; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#FF0000;}
#book_top{ color:#000; text-align:center; line-height:30px; height:30px; padding-top:5px; font-size:20px; color:#e6472a; font-weight:bold;}
#book-line{ height:5px; background:#e6472a; width:95%; margin:0 auto;border-radius:10px;}
#book_list{ padding:10px; padding-top:20px;}
#book_list li{ list-style:none; width:117px;font-size:15px; float:left; height:30px; line-height:30px; background:url(/css/icon/book.png)   no-repeat 0px 4px ; background-size:18px 20px; padding-left:20px;}
#book_list li a{ color:#000; text-decoration:none;} 
#book_long{ width:100% !important;; clear:both;} 
#book_list ul{ color:#000; list-style:none; margin:0px; padding:0px; height:30px; padding-left:23px; max-height:none; }
#book_list ul a{ color:#000;} 
#name{background:url(/css/icon/name.png)   no-repeat 0px 2px ; background-size:20px 20px;}
#tel{background:url(/css/icon/tel.png)   no-repeat 0px 2px ; background-size:20px 20px;}
#web{background:url(/css/icon/web.png)   no-repeat 0px 2px ; background-size:20px 20px;}
#adds{background:url(/css/icon/add.png)   no-repeat 0px 2px ; background-size:20px 20px;}
#email{background:url(/css/icon/email.png)   no-repeat 0px 2px ; background-size:20px 20px;}
#code{ text-align:center; margin-top:20px; color:#000;}  
#zanok{position: absolute;  z-index: 210012121200; display:none; width:200px; height:40px;bottom:50%; text-align:center; left:calc(50% - 100px);border-radius: 5px; line-height:40px; color:#FFFFFF; background:rgba(0,0,0,0.5)} 
/*弹窗界面*/


#img_all{ width:100%; height:100%;  background-color: rgba(0, 0, 0, 0.8); position:absolute; z-index:100000100000100000; text-align:center; display:none; } 
#img_url{ position: relative;top: 50%; /*偏移*/transform: translateY(-50%);}
#img_url img{max-width: 60%;}
.video_all{ width:100%; height:100%;  background-color: rgba(0, 0, 0, 0.8); position:absolute; z-index:100000100000100000; text-align:center; display:none; } 
#video_url{ position: relative;top: 50%; /*偏移*/transform: translateY(-50%);}

#video_urls{ width:50%;}