/*common start*/
@font-face {
font-family: 'CopperplateGothic Light';
src: url('../css/Copperplate Gothic Light.ttf');
} 
body{width: 100%;font-size: 62.5%;font-family: "CopperplateGothic Light","arial","sans-serif";background-color: #1a1a1a;color: #fff;line-height: 2em;}
*{margin:0;padding:0;}
h1,h2,h3,h4,h5,strong{font-weight: normal;}
ul li{list-style: none;}
a{text-decoration: none;}
.cf:before,.cf:after{content: ".";display: block;height: 0;visibility: hidden;}
.cf:after{clear:both;}
.cf{zoom:1;} 
#logo{color: #d1d1d1;line-height: 3.6em;font-size: 3em;}
#logo a{color: #d1d1d1;}
.wapper{padding:0em 4em;max-width: 100em;margin:0 auto;font-size: 1.2em;}
.wapper .nav{width: 24%;float: left;}
.wapper .content{width: 76%;float: left;}
/*common end*/
/*nav start*/
.wapper .nav h2{font-size: 2em;line-height: 2em;}
.wapper .nav ul{padding-left: 1em;margin-bottom: 2em;}
.wapper .nav ul li{font-size: 1.6em;line-height: 2em;}
.wapper .nav a{color: #797fff;}
.wapper .nav .on,.wapper .nav .current-cat a{color: #cc3333;}
/*nav end*/
/*about start*/
.about h3{color: #797fff;font-size: 1.6em;line-height: 2.6em;}
.about ul{width: 33%;float: left;}
.about ul li{line-height: 1.6em;font-size: 1.2em;margin-bottom: 1.5em;}
.about ul strong{display: block;}
/*about end*/
/*contact start*/
.contact h3{color: #797fff;font-size: 1.6em;line-height: 2.6em;}
.contact img{width: 100%;}
.contact p{margin-bottom: 2em;font-size: 1.4em;}
.contact p i{display: block;font-style: normal;color: #797fdf;}
/*contact end*/
/*index start*/
.index{padding-top: 1.5em;}
.index img{width: 100%;}
.index p{margin-bottom: 1em;line-height: 2em;}
/*index end*/
/*work start*/
.work h3{color: #797fff;font-size: 1.6em;line-height: 2.6em;}
.work ul li{width: 97%;margin-bottom: 2em;}
.work ul .colHalf{width: 47%;float: left;margin-right: 3%;}
.work ul li img{width: 100%;cursor:pointer;}
/*work end*/

#panel{
    background-color:#222;
    width:100%;
    position:fixed;
    bottom:0px;
    left:0px;
    right:0px;
    height:0px;
    text-align:center; 
    display: table;
}
#panel img{
    cursor:pointer;
    position:relative;
    border:1px solid #000;
    -moz-box-shadow:0px 0px 10px #111;
    -webkit-box-shadow:0px 0px 10px #111;
    box-shadow:0px 0px 10px #111;
}

#wrapper{
    position:relative;
    margin:40px auto 0px auto;
    display:table-cell;
    vertical-align: middle;
}
a#next,
a#prev,
a#close{
    width:30px;
    height:30px;
    position:fixed;
    cursor:pointer;
    outline:none;
    display:none;
    background:#aaa url(../images/icons.png) no-repeat top left;
}
a#next:hover, a#prev:hover,a#close:hover{
    background-color:#fff;
}
a#next{
    right:0px;
    top:50%;
    margin-top:-20px;
    background-position: 0px 0px;
}
a#prev{
    left:0px;
    top:50%;
    margin-top:-20px;
    background-position: 0px -30px;
}
a#close{
    right:0px;
    top:0px;
    background-position: 0px -60px;
}
.toTop{position:fixed;right:0;bottom:20px;_position: absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-72));width:40px;height:40px;display: none;}
.toTop a{display:block;width:30px;height:30px;text-indent:-9999px;background:#fff url(../images/icons.png) no-repeat 0px -90px;}
span#loading{
    display:none;
    padding-right: 30px;
    background:transparent url(../images/loading.gif) no-repeat center right;
    position:fixed;left:50%;bottom:0;
    margin-left: -38px;
}