/*---------------------------------
==========PROJECT Pianpian=========
Author: Pincury Zeazje
Contact: @zeazje
OriginalDate: 2015-11-03
Copyright (C) Leptideas 2016
PianpianWeb Committee All Rights.
---------------------------------*/
@charset "utf-8";
html {margin:0; padding:0; height:100%;}
body {margin:0; padding:0; font-family:"微软雅黑","文泉驿微米黑","Microsoft Yahei"; background:#EDEDEF; height:100%; min-width:540px;}
/*.center {margin:0 auto; width:1px; height:1px; padding:-1px 0 0 -1px; position:relative;}*/


.screen1 {height:100%; /*min-height:520px;*/ width:100%; background:url(../res/bg_c.jpg) no-repeat; background-size:cover;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}
#s1_bg {width:100%; height:100%; background:rgba(0,0,0,0.4);}
/*
 #top {background:black; width:100%; height:26px; line-height:26px; margin-bottom:10px;}
  .nav {font-size:14px; color:white;}
  #smap {margin-left:16px;}
   #snap a {text-decoration:none; margin-right:5px;}
   #snap span:hover {border-top:2px solid #4F9535;}
   #index {margin-left:17px;}
*/
#topNav  {width:100%; height:auto; background:rgba(0,0,0,0.9);
 position:fixed;
 _position:absolute;
 left:0;
 top:0;
 display:none;}
 .logoImg {width:32px; height:32px; margin-top:7px; float:left; background: url(../res/pianpian.png) no-repeat; margin-left:5px; border-radius:16px; cursor:pointer;}
 .navBar ul {margin:0; float:right; margin-right:100px; width:360px;}
 .navBar li {list-style-type:none; float:left; width:90px; height:46px; line-height:46px; text-align:center; cursor:pointer; color:#fff; margin:0;}
  .navBar li:hover {background:rgba(255,255,255,0.2)}
  .navBar img {vertical-align:middle;}

 #topL img {float:left;}
 .topBar {width:240px; float:right; margin:30px 150px 0 0;}
  .topBar img {cursor:pointer; margin-left:7px;}
 #dewplayer {margin-left: 7px; border-radius:0 10px 10px 0;}
  /*#play {float:right;}*/

 #leftNav {width:80px; height:240px; background:#ffa500; position:fixed; _position:absolute; top:220px; border-radius:0 15px 15px 0; box-shadow: 0 0 2px #000;}
 ._leftNav {width:56px; float:left; height:100%; text-align:center; margin:-1px 0 0 3px;}
  .navBox {margin:0 auto; width:52px; height:25%; cursor:pointer;}
   .navBox:hover {background:rgba(255,255,255,0.1);}
 ._rightNav {width:20px; height:100%; float:right; margin-left:-2px; background:rgba(255,255,255,0.05); border-radius:0 15px 15px 0; cursor:pointer;}
  ._rightNav:hover {background:rgba(255,255,255,0.15);}/*#ffb42b*/
  #s1Nav {margin:100px 0 0 1px;}
 
#screen2 {height:auto; background:#F1F1F1;}
 #s2top {width:100%; height:46px; background:rgba(0,0,0,0.8);
 -webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}

#container {width:80%; margin:20px auto; padding-bottom:20px; text-align:center;}
 .hr {color:#d0d0d0; height:1.2px; background:#d0d0d0; border:0; margin:50px 0 20px;}
  #description h3 {font-size:1.6em; margin-top:90px; font-weight:600;}
  #description p {font-size:1.05em; font-weight:300; margin-top:10px; color:#222;}
 #content {color:#333;}
  #content h3 {font-size:1.5em;}
  #content p {font-size:1.07em;}
  
   #works_frame {width:100%; height:auto; margin:20px auto; text-align:center;}
   .des_banner {width:96%; height:36px; margin:0 auto;}
     .descript {float:left; color:#444; }
      .descript a {text-decoration:none; cursor:pointer; color:#ff7216;}
     .detail a {float:right; color:#ff7216; text-decoration:none; cursor:pointer;}
   #works_group {width:100%; height:auto;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}
   
   .works_box {width:300px; height:180px; margin:10px 7px 10px 7px; display:inline-table; cursor:pointer;}
   #w_box1{background:url(../res/works_a.jpg);}
   #w_box2{background:url(../res/works_b.jpg);}
   #w_box3{background:url(../res/works_c.jpg);}
   #w_box4{background:url(../res/works_d.jpg);}
   #w_box5{background:url(../res/works_f.jpg);}
   #w_box6{background:url(../res/works_g.jpg);}
   ._descript {width:100%; height:100%; display:inline-table; font-size:1.5em;}
   ._des-paragph {height:180px; line-height:180px; color:#fff; display:block; visibility:hidden;}
    .works_box:hover ._descript ._des-paragph {background:rgba(0,0,0,0.5); visibility:visible;}
   .orange_link {color:#ff7216; text-decoration:none;}
    .on_hover {margin:10px auto 0; width:220px; cursor:pointer;}
    .on_hover:hover {background:#fff;}
  .table {width:90%; margin:10px auto; font-size:0.96em;}
   .table span {display:table-cell;}
   .tr_1, .tr_2 {width:100%; height:36px; line-height:36px; text-align:left; padding:0 15px 0;}
   .tr_1 {background:#ddd;}
   .tr_2 {background:#eee;}
   .row_1 {width:36px;}
   .row_2 {width:200px;}
   .row_3 {width:500px;}
   .row_4 {width:auto; text-align:right; padding-right:4px;}
   .tr  li {text-align:left; margin-left:2px; list-style-type:none; padding-left:10px; border-left:2px solid #ccc;}
   .tr_p {font-size:0.82em;}
    .red {color:red; font-size:1.6em;}
    .ora {color:#ff9000; font-size:1.6em;}
    .yel {color:#fff000; font-size:1.6em;}
    .gre {color:#66cc00; font-size:1.6em;}
    .blu {color:#3366ff; font-size:1.6em;}
  
#footer{width:100%; background:#ededff; text-align:center; padding:5px 0 10px;}
 .foot {width:100%; text-align:center;}
 .foot p {margin-top:1px; font-size:12px; color:#bbb;}
 #footer_logo {width:36px; height:36px; border-radius:18px; background:url(../res/ppr.png); margin:5px auto 10px;}
 
 /*To top Fixed*/
 #toTop {
 position:fixed;
 _position:absolute;
 right:30px;
 bottom:40px;
  _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-40);
 cursor:pointer;
 display:none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}