*{
    border:0px;
}
  body{
    overflow: scroll;
  }
/* body{
    font-family:Georia,serif;
    background:#ddd;
    font-weight:bold;
    font-size:15px;
    color:#333;
 
    -webkit-font-smoothing:antialiased;
} */
/* a{
    text-decoration:none;
    color:#555;
} */
.clr{
    width:0;
    height:0;
    overflow: hidden;
    clear:both;
    padding:0;
    margin:0;
}
.nav{
    width:100%;
    /* position:absolute; */
    left:0;
    bottom:0;
    font-family:"Josefin Slab","Myriad pro" ,serif;
}
.nav input{
    position:fixed;
    cursor:pointer; 
}
.nav a{
     /* width:20%;*/ 
    /* height:34px;
    line-height:34px; */
     /* bottom:0;  */
    cursor:pointer; 
}
.nav input{
    opacity:0;
    z-index:1000;
}
/* .nav a{
    z-index:10;
    font-weight:700;
    font-size:16px;
    background:#e23a6e;
    color:#fff;
    text-align:center;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
} */
/* #nav1,#nav1 + a{
    left:0%;
}
#nav2,#nav2 + a{
    left:14.2857142857%; 
}
#nav3,#nav3 + a{
    left:28.5714285714%;
}
#nav4,#nav4 + a{
    left:42.8571428571%;
}
#nav5,#nav5 + a{
    left:57.1428571428%;
}
#nav6,#nav6 + a{
    left:71.4285714285%;
}
#nav7,#nav7 + a{
    left:85.7142857142%;
} */
#nav1,#nav1 + a{
    left:0%;
}
#nav2,#nav2 + a{
    left:14.2857142857%;
}
#nav3,#nav3 + a{
    left:28.5714285714%;
}
#nav4,#nav4 + a{
    left:42.8571428571%;
}
#nav5,#nav5 + a{
    left:57.1428571428%;
}
#nav6,#nav6 + a{
    left:71.4285714285%;
}
#nav7,#nav7 + a{
    left:85.7142857142%;
}
#nav8,#nav8 + a{
    left:100%;
}
.nav input:checked + a,
.nav input:checked:hover +a{
    background:#821134;
}
.nav input:checked + a:after{
    content:"";
    width:0;
    height:0;
    overflow:hidden;
    border:20px solid transparent;
    border-bottom-color:#821134;
    position:absolute;
    bottom:100%;
    left:50%;
    margin-left:-20px;
}
.nav input:hover + a{
    background:#AD244f;
}
.scroll,.panel{
    width:100%;
    height:100%;
    /* position:relative;
    text-align:center; */
    /* padding-top:250px; */
}
.scroll{
    left:0;
    top:0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    /* color:#e23a6e; */
    /* font-weight:bold; */
}
.panel{
    background:#fff;
    overflow: hidden;
    /* height: auto; */
}
/*动画*/
/* #nav1:checked ~ .scroll #panel1 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#nav2:checked ~ .scroll #panel2 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#nav3:checked ~ .scroll #panel3 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#nav4:checked ~ .scroll #panel4 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#nav5:checked ~ .scroll #panel5 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
} */
@keyframes moveDown {
    0%{
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px);
        opacity:0;
    }
    100%{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        opacity:1;
    }
}
/* .panel p{
    color:#000;
    margin-top:20px;
} */
#nav1:checked ~ .scroll{
     -webkit-transform: translateY(0%);
     -moz-transform: translateY(0%);
     -ms-transform: translateY(0%);
     -o-transform: translateY(0%);
     transform: translateY(0%);
 }
#nav2:checked ~ .scroll{
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}
#nav3:checked ~ .scroll{
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    -o-transform: translateY(-200%);
    transform: translateY(-200%);
}
#nav4:checked ~ .scroll{
    -webkit-transform: translateY(-300%);
    -moz-transform: translateY(-300%);
    -ms-transform: translateY(-300%);
    -o-transform: translateY(-300%);
    transform: translateY(-300%);
}
#nav5:checked ~ .scroll{
    -webkit-transform: translateY(-400%);
    -moz-transform: translateY(-400%);
    -ms-transform: translateY(-400%);
    -o-transform: translateY(-400%);
    transform: translateY(-400%);
}
#nav6:checked ~ .scroll{
    -webkit-transform: translateY(-500%);
    -moz-transform: translateY(-500%);
    -ms-transform: translateY(-500%);
    -o-transform: translateY(-500%);
    transform: translateY(-500%);
}
#nav7:checked ~ .scroll{
    -webkit-transform: translateY(-600%);
    -moz-transform: translateY(-600%);
    -ms-transform: translateY(-600%);
    -o-transform: translateY(-600%);
    transform: translateY(-600%);
}
#nav8:checked ~ .scroll{
    -webkit-transform: translateY(-700%);
    -moz-transform: translateY(-700%);
    -ms-transform: translateY(-700%);
    -o-transform: translateY(-700%);
    transform: translateY(-700%);
}
#nav9:checked ~ .scroll{
    -webkit-transform: translateY(-800%);
    -moz-transform: translateY(-800%);
    -ms-transform: translateY(-800%);
    -o-transform: translateY(-800%);
    transform: translateY(-800%);
}
#nav10:checked ~ .scroll{
    -webkit-transform: translateY(-900%);
    -moz-transform: translateY(-900%);
    -ms-transform: translateY(-900%);
    -o-transform: translateY(-900%);
    transform: translateY(-900%);
}
.icon{
    width:200px;
    height:200px;
    /* background:#fa96b5; */
    -webkit-transform:translateY(-50%) rotate(45deg);
    -moz-transform:translateY(-50%) rotate(45deg);
    -ms-transform:translateY(-50%) rotate(45deg);
    -o-transform:translateY(-50%) rotate(45deg);
    transform:translateY(-50%) rotate(45deg);
    position:absolute;
    left:50%;
    top:0;
    margin-left:-100px;
}
[data-icon]:after{
    content:attr(data-icon);
    width:200px;
    height:200px;
    color:#fff;
    font-size:90px;
    text-align:center;
    line-height:200px;
    position:absolute;
    left:18%;
    top:18%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.panelColor{
    /* background:#fa96b5; */
    color:#fff;
}
.panelColor .icon{
    background:#fff;
    /* color:#fa96b5; */
}
.panelColor .icon:after{
    /* color:#fa96b5; */
}
/* .scroll .panel h1{
    font-size:60px;
} */
@media screen and (max-device-width: 520px){
 
}