@charset "utf-8";

/* CSS Document */

@font-face{

font-family:"Raphaelicons";

src:url(../fonts/raphaelicons-webfont.eot) format('eot'),

url(../fonts/raphaelicons-webfont.svg) format('svg'),

url(../fonts/raphaelicons-webfont.ttf) format('ttf'),

url(../fonts/raphaelicons-webfont.woff) format('woff');

}

body,ul,li,p,h1,h2,h3,h4{ margin:0; padding:0}

body{ font-family:Georgia, serif; font-size:15px; font-weight:400; color:#333; overflow:hidden;font-smoothing:anitialiased/*消除锯齿*/} 

a{ color:#CCC; text-decoration:none}

.st_containner{

width:100%; 

height:100%;

position:absolute;

left:0;

bottom:0;

font-family:Georgia, "Times New Roman", Times, serif;

}

.st_containner > input,.st_containner > a{ 

float:left; 

width:20%; 

height:35px; 

line-height:35px;

position:fixed;

bottom:0;

}

.st_containner input{ 

z-index:1000;

opacity:0;

cursor:pointer;

}

.st_containner input ~ a{ 

background-color:#F36; 

color:#fff;

font-weight:bold; 

font-size:16px;

text-align:center;

text-shadow:1px 1px 1px rgba(0,0,0,0.3);

}

.st_containner input:checked + a,.st_containner input:checked:hover + a{/*  '+'号只匹配紧跟在元素之后的内容  比如：input和a，a只在input的后面这是候给a加样式时可以用‘+’号 */

background-color:#C03;

}

.st_containner input:checked + a:after{

content:"";

width:0;

height:0;

overflow:hidden;

border:20px solid transparent;

border-bottom-color:#C03;/*本行与上面一行制作出一个三角形*/

position:absolute;

left:50%;

bottom:100%;

margin-left:-20px;

}

.st_containner input:hover + a{

background-color:#b32045;

}

#st_control_1,#st_control_1 + a{

left:0%;

}

#st_control_2,#st_control_2 + a{

left:20%;

}

#st_control_3,#st_control_3 + a{

left:40%;

}

#st_control_4,#st_control_4 + a{

left:60%;

}

#st_control_5,#st_control_5 + a{

left:80%;

}

/*内容*/

.st_scroll,

.st_panel{

width:100%;

height:100%;

position:relative;

z-index:1;

}

.st_scroll{

left:0;

top:0;

-webkit-transform:translate3d(0,0,0);

-o-transform:translate3d(0,0,0);

-ms-transform:translate3d(0,0,0);

-mos-transform:translate3d(0,0,0);

transform:translate3d(0,0,0);

-webkit-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 ;

-ms-transition:all 0.6s ease-in-out ;

transition:all 0.6s ease-in-out ;

}

.st_panel{

overflow:hidden;

zoom:1;

}

#st_control_1:checked ~ .st_scroll{

-webkit-transform:translateY(0%);

-moz-transform:translateY(0%);

-o-transform:translateY(0%);

-ms-transform:translateY(0%);

transform:translateY(0%);

}

#st_control_2:checked ~ .st_scroll{

-webkit-transform:translateY(-100%);

-moz-transform:translateY(-100%);

-o-transform:translateY(-100%);

-ms-transform:translateY(-100%);

transform:translateY(-100%);

}

#st_control_3:checked ~ .st_scroll{

-webkit-transform:translateY(-200%);

-moz-transform:translateY(-200%);

-o-transform:translateY(-200%);

-ms-transform:translateY(-200%);

transform:translateY(-200%);

}

#st_control_4:checked ~ .st_scroll{

-webkit-transform:translateY(-300%);

-moz-transform:translateY(-300%);

-o-transform:translateY(-300%);

-ms-transform:translateY(-300%);

transform:translateY(-300%);

}

#st_control_5:checked ~ .st_scroll{

-webkit-transform:translateY(-400%);

-moz-transform:translateY(-400%);

-o-transform:translateY(-400%);

-ms-transform:translateY(-400%);

transform:translateY(-400%);

}

.st_desc{

width:200px; 

height:200px;

background-color:#F36;

position:absolute;

left:50%;

top:0px;

margin-left:-100px;

-webkit-transform:translateY(-50%) rotate(45deg) ;/*位置移动要放在旋转的后面，*/

-moz-transform:translateY(-50%) rotate(45deg) ;

-o-transform:translateY(-50%) rotate(45deg) ;

-ms-transform:translateY(-50%) rotate(45deg) ;

transform:translateY(-50%) rotate(45deg) ;

text-shadow:1px 1px 1px rgba(0,0,0,0.5);

}/*大三角区域*/

.st_color{ }

[data-icon]:after{

content:attr(data-icon);/*设置*/

width:200px;

height:200px;

position:absolute;

left:50%;

top:50%;

text-align:center;

line-height:200px;

font-size:90px;

color:#fff;

-webkit-transform:rotate(-45deg) translateY(-40%);

-moz-transform:rotate(-45deg) translateY(-40%);

-o-transform:rotate(-45deg) translateY(-40%);

-ms-transform:rotate(-45deg) translateY(-40%);

transform:rotate(-45deg) translateY(-40%);

font-family:"Raphaelicons";

}

.st_panel h2{

padding:10px 0; 

font-size:40px;

text-align:center;

color:#F36;

width:80%;

position:absolute;

left:10%;

top:30%;

font-size:54px;

font-weight:bold;

text-shadow:1px 1px 1px rgba(0,0,0,0.6);

}

#st_control_1:checked ~ .st_scroll #st_panel_1  h2,

#st_control_2:checked ~ .st_scroll #st_panel_2  h2,

#st_control_3:checked ~ .st_scroll #st_panel_3  h2,

#st_control_4:checked ~ .st_scroll #st_panel_4  h2,

#st_control_5:checked ~ .st_scroll #st_panel_5  h2{

-webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;/*backwords=停留在当前位置 */

-o-animation:moveDown 0.6s ease-in-out 0.2s backwards;

-moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;

-ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;

animation:moveDown 0.6s ease-in-out 0.2s backwards;

}

@-webkit-keyframes moveDown{

0%{ -webkit-transform:translateY(-40px);

opacity:0;}

100%{

-webkit-transform:translateY(0px);

opacity:1;}

}

@-moz-keyframes moveDown{

0%{ -moz-transform:translateY(-40px);

opacity:0;}

100%{

-moz-transform:translateY(0px);

opacity:1;}

}

@-o-keyframes moveDown{

0%{ -o-transform:translateY(-40px);

opacity:0;}

100%{

-o-transform:translateY(0px);

opacity:1;}

}

@-ms-keyframes moveDown{

0%{ -ms-transform:translateY(-40px);

opacity:0;}

100%{

-ms-transform:translateY(0px);

opacity:1;}

}

@keyframes moveDown{

0%{ transform:translateY(-40px);

opacity:0;}

100%{

transform:translateY(0px);

opacity:1;}

}

.st_panel p{ width:50%;

position:absolute;

left:25%;

top:45%;

text-align:center;

color:#666;

text-shadow:1px 1px 1px rgba(0,0,0,0.2)}

#st_control_1:checked ~ .st_scroll #st_panel_1  p,

#st_control_2:checked ~ .st_scroll #st_panel_2  p,

#st_control_3:checked ~ .st_scroll #st_panel_3  p,

#st_control_4:checked ~ .st_scroll #st_panel_4  p,

#st_control_5:checked ~ .st_scroll #st_panel_5  p{

-webkit-animation:moveUp 0.6s ease-in-out 0.2s backwards;/*backwords=停留在当前位置 */

-o-animation:moveUp 0.6s ease-in-out 0.2s backwards;

-moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;

-ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;

animation:moveUp 0.6s ease-in-out 0.2s backwards;

}

@-webkit-keyframes moveUp{

0%{-webkit-transform:translateY(40px);

opacity:0;}

100%{-webkit-transform:translateY(0);

opacity:1}

} 

@-moz-keyframes moveUp{

0%{-moz-transform:translateY(40px);

opacity:0;}

100%{-moz-transform:translateY(0);

opacity:1}

} 

@-o-keyframes moveUp{

0%{-o-transform:translateY(40px);

opacity:0;}

100%{-o-transform:translateY(0);

opacity:1}

} 

@-ms-keyframes moveUp{

0%{-ms-transform:translateY(40px);

opacity:0;}

100%{-ms-transform:translateY(0);

opacity:1}

} 

@keyframes moveUp{

0%{transform:translateY(40px);

opacity:0;}

100%{transform:translateY(0);

opacity:1}

}