* {
    margin:0;
    padding:0;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

body {
    background-color: #ddd;
    font-family:"Verdana", "monaco", "Microsoft YaHei";
    text-shadow:1px 1px 1px rgba(0, 0, 0, .1);
    overflow-x:hidden;
}
img {
    vertical-align: middle;
}
a {
    color:#2DA845;
}

a:hover {
    color: #36c;
}

.handle {
    position: absolute;
    z-index: 10;
    width: 50px;
    height:98%;
    background-color: rgba(0, 0, 0, 0);
    left: 0;
    top: 1%;
    border-radius:0 10px 10px 0;
    cursor: pointer;
    opacity: 0;
    text-align:center;
    border:none;
    font:bold 50px/100% Simsun; 
    color:#555;
    text-shadow:1px 1px 0 rgba(255, 255, 255, .3);
}
.handle:hover {
    background-color: rgba(0, 0, 0, .2);
    width:80px;
    opacity: 1;
}


.tips {
    position: absolute;
    top:0px;
    background-color: rgba(0, 0, 0, 0);
    cursor: default;
    z-index:11;
    height: 20px;
    line-height: 20px;
    padding: 0 20px;
    border-radius: 5px;
    left: 50%;
    margin-left: -285px;
    opacity: 0;
    font-size:14px;
    width:530px;
    text-align:center;
    color:#000;
}

.tips a {
    color: #000;
}
.tips:hover {
    background-color: rgba(0, 0, 0, .2);
    opacity: 1;
    height: 40px;
    line-height: 40px;

}

.author {
    top:auto;
    bottom:10px;
    width:200px;
    margin-left:-100px;
    color:#000;
}

.next {
    left: auto;
    right: 0;
    border-radius:10px 0 0 10px;
}
.slides {
    overflow: hidden;
    width:100%;
}

.page{
    position: absolute;
    width:900px;
    height:640px;
    top:50%;
    left:50%;
    margin: -320px 0 0 -450px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow:0 0 10px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 0 10px rgba(0, 0, 0, .5);
    box-shadow:0 0 10px rgba(0, 0, 0, .5);
    background-color:#fff;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
    display: none;
}
/*type1*/
.slides .p-current {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    display:block;
}

.slides .p-past {
    -webkit-transform: translate(-980px, 0);
    -moz-transform: translate(-980px, 0);
    -o-transform: translate(-980px, 0);
    -ms-transform: translate(-980px, 0);
    transform: translate(-980px, 0);
    display:block;
}

.slides .p-past-far {
   
    -webkit-transform:  translate(-1960px,0);
     -moz-transform:  translate(-1960px,0);
     -o-transform:  translate(-1960px,0);
     -ms-transform:  translate(-1960px,0);
     transform:  translate(-1960px,0);
     display: block;
     }

.slides .p-next {
    -webkit-transform: translate(980px, 0);
    -moz-transform: translate(980px, 0);
    -o-transform: translate(980px, 0);
    -ms-transform: translate(980px, 0);
    transform: translate(980px, 0);
    display: block;
}

.slides .p-next-far {
    -webkit-transform: translate(1960px, 0);
    -moz-transform: translate(1960px, 0);
    -o-transform: translate(1960px, 0);
    -ms-transform: translate(1960px, 0);
    transform: translate(1960px, 0);
    display: block;
    
}

/*type2*/
.slides2 .p-current {
    -webkit-transform: translate(0, 0) scale(1);
    -moz-transform: translate(0, 0) scale(1);
    -o-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    display:block;
    z-index: 10;
}

.slides2 .p-past {
    -webkit-transform: translate(-900px, 0) scale(.8);
    -moz-transform: translate(-900px, 0) scale(.8);
    -o-transform: translate(-900px, 0) scale(.8);
    -ms-transform: translate(-900px, 0) scale(.8);
    transform: translate(-900px, 0) scale(.8);
    opacity: 0.5;
    display:block;
}

.slides2 .p-past-far {
    opacity: 0.5;
    -webkit-transform: translate(-1800px, 0) scale(.8);
    -moz-transform: translate(-1800px, 0) scale(.8);
    -o-transform: translate(-1800px, 0) scale(.8);
    -ms-transform: translate(-1800px, 0) scale(.8);
    transform: translate(-1800px, 0) scale(.8);
    display: block;
}

.slides2 .p-next {
    opacity: 0.5;
    -webkit-transform: translate(900px, 0) scale(.8);
    -moz-transform: translate(900px, 0) scale(.8);
    -o-transform: translate(900px, 0) scale(.8);
    -ms-transform: translate(900px, 0) scale(.8);
    transform: translate(900px, 0) scale(.8);
    display: block;
}

.slides2 .p-next-far {
    opacity: 0.5;
    -webkit-transform: translate(1800px, 0) scale(.8);
    -moz-transform: translate(1800px, 0) scale(.8);
    -o-transform: translate(1800px, 0) scale(.8);
    -ms-transform: translate(1800px, 0) scale(.8);
    transform: translate(1800px, 0) scale(.8);
    display: block;
    
}



/*content style*/
.headline {
    font-size:50px;
    color: #2DA845;
    margin-top: 280px;
}
.t2 {
    margin-bottom: .63em;
}
.content{
    padding:30px 50px;
    position: relative;
    font-size: 24px;
    color: #555;
}
.chrome {
    position: absolute;
    top:50px;
    right:250px;
    z-index: -1;
    width:250px;

}
.canary {
    -webkit-transform: translate(120px, 0);
    -moz-transform: translate(120px, 0);
    -o-transform: translate(120px, 0);
    -ms-transform: translate(120px, 0);
    transform: translate(120px, 0);
    z-index: -2;
}

.chromium {
    -webkit-transform: translate(240px, 0);
    -moz-transform: translate(240px, 0);
    -o-transform: translate(240px, 0);
    -ms-transform: translate(240px, 0);
    transform: translate(240px, 0);
    z-index: -3;
}
ul, ol{
    padding-left: 1.5em;
    line-height: 1.8;
    margin-bottom: 1em;
}
p {
    margin-bottom: .53em;
    line-height:1.5;
}
li p {
    padding-left: 2em;
    line-height : 1.2;
    font-size:20px;
}
ul li {
    list-style:none;
    position: relative;
}
ul li:before {
    content: '.';
    font-size: 1.6em;
    position: absolute;
    left: -.53em;
    top: -.6em;
}
.pic-effect{
    border-radius: 5px;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}
.c-red {
    color:red;
}
.c-green {
    color: green;
}
.c-blue {
    color: #06c;
}
.s-list {
    font-size:18px;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}

.fs-20 {
    font-size: 20px;
}
.c-grey {
    color:#999;
}