body{color:#222;-webkit-text-size-adjust:none;}

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe{margin:0; padding:0;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

body,button,input,select,textarea {font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;font-size:62.5%; line-height:1.5;}

ol,ul{list-style:none;}



html,body{ width:100%; height:100%; overflow:hidden;}

.grid {
    width: 100%; height: 100%;
    /*margin: 100px auto 50px auto;*/
    margin: 0;
    perspective: 500px; /*For 3d*/
}
.grid .img {
    /*width: 60px; */overflow: hidden;width: 12.49%;
    /*background-color: #a82020;*/
    display: inline-block;
    height:20%; display: block; float: left;}

.animate {
    text-transform: uppercase;
    background: rgb(0, 100, 0); color: white;
    padding: 10px 20px; border-radius: 5px;
    cursor: pointer;margin:10px auto;width:100px;text-align:center;
}
.animate:hover {background: rgb(0, 75, 0);}
.section-wrap{ width:100%;height:100%;overflow:visible;transition:transform 1s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);}

.section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}

.section-wrap .section .title{width:100%;position:absolute;top:10%;color:#fff;font-size:2.4em;text-align:center;}

.section-wrap .section .title p{ padding:0 4%;opacity:0}

.section-wrap .section .title.active .tit{ opacity:1;transform:translateY(-25px);-webkit-transform:translateY(-25px);transition:all 2s cubic-bezier(0.86,0,0.8,1);-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);}

.section-wrap .section-1,.section-wrap .section-2,.section-wrap .section-3,.section-wrap .section-4,.section-wrap .section-5,
.section-wrap .section-6,.section-wrap .section-7{ background-color:#000}

.put-section-0{ transform:translateY(0);-webkit-transform:translateY(0);}

.put-section-1{ transform:translateY(-100%);-webkit-transform:translateY(-100%);}

.put-section-2{ transform:translateY(-200%);-webkit-transform:translateY(-200%);}

.put-section-3{ transform:translateY(-300%);-webkit-transform:translateY(-300%);}

.put-section-4{ transform:translateY(-400%);-webkit-transform:translateY(-400%);}

.put-section-5{ transform:translateY(-500%);-webkit-transform:translateY(-500%);}

.put-section-6{ transform:translateY(-600%);-webkit-transform:translateY(-600%);}

.section-btn{ width:14px;position:fixed;right:4%;top:50%;}

.section-btn li{ width:14px;height:14px;cursor:pointer;text-indent:-9999px;border-radius:50%;-webkit-border-radius:50%;
    margin-bottom:12px; background:rgba(180,180,180,0.36);text-align:center; color:#fff; onsor:pointer;}

.section-btn li.on{ background:rgba(240,240,240,0.6)}

.arrow{ display:none;opacity:1;animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;-webkit-animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;transform:rotate(-90deg);-webkit-transform:rotate(-90deg); position:absolute;bottom:10px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:100%;-webkit-border-radius:100%;line-height:60px;text-align:center;font-size:20px;color:#fff;border:1px solid #fff;cursor:pointer;overflow:hidden;}

.arrow:hover{ animation-play-state:paused;-webkit-animation-play-state:paused;}

@keyframes arrow{ 0%,100%{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }

@-webkit-keyframes arrow{ 0%,100%{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }
.pos-abs{
    position: absolute;
}
.pos-rel{
    position: relative;
}
.lef-top{
    left: 0;
    top: 0;
}
.hei100{
    height: 100%;
    min-height: 460px;
}
.wid100{
    width: 100%;
}
.tex-cent{
    text-align: center;
}
.d_none{
    /*display: none !important;*/
    width: 0 !important;
    height:0 !important;
    margin:0 !important;
 }
.img123show{
    -webkit-transition:height 2s, width 2s,margin-right 2s,margin-left 2s;
    -moz-transition:height 2s, width 2s,margin-right 2s,margin-left 2s;
    -o-transition:height 2s, width 2s,margin-right 2s,margin-left 2s;
    transition:height 2s, width 2s,margin-right 2s,margin-left 2s;
}
.img123show:not(.d_none):nth-child(2n){
    -webkit-transition:height 0.7s, width 0.7s,margin-right 0.7s,margin-left 0.7s;
    -moz-transition:height 0.7s, width 0.7s,margin-right 0.7s,margin-left 0.7s;
    -o-transition:height 0.7s, width 0.7s,margin-right 0.7s,margin-left 0.7s;
    transition:height 0.7s, width 0.7s,margin-right 0.7s,margin-left 0.7s;
 }
.img123show:not(.d_none):nth-child(3n){
    -webkit-transition:height 1.5s, width 1.5s,margin-right 1.5s,margin-left 1.5s;
    -moz-transition:height 1.5s, width 1.5s,margin-right 1.5s,margin-left 1.5s;
    -o-transition:height 1.5s, width 1.5s,margin-right 1.5s,margin-left 1.5s;
    transition:height 1.5s, width 1.5s,margin-right 1.5s,margin-left 1.5s;
 }
.img123show:not(.d_none):nth-child(4n){
    -webkit-transition:height 0.3s, width 0.3s,margin-right 0.3s,margin-left 0.3s;
    -moz-transition:height 0.3s, width 0.3s,margin-right 0.3s,margin-left 0.3s;
    -o-transition:height 0.3s, width 0.3s,margin-right 0.3s,margin-left 0.3s;
    transition:height 0.3s, width 0.3s,margin-right 0.3s,margin-left 0.3s;
 }
img[audioid]{
    cursor: pointer;
}