#viewport.left-open:after,#viewport.right-open:after,#cate_m:after{content:'';display:block;clear:both}#viewport{overflow:hidden;min-height:100%}
#viewport #main_view{position:relative;z-index:1000;width:100%;min-height:100%;-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms}
#viewport #left_side{position:fixed;top:0;bottom:0;left:0;z-index:2000;-webkit-transition:300ms;
-moz-transition:300ms;-o-transition:300ms;transition:300ms;-webkit-transform:translate(-270px,0);-ms-transform:translate(-270px,0);-moz-transform:translate(-270px,0);
-o-transform:translate(-270px,0);transform:translate(-270px,0)}#viewport #right_side{position:fixed;top:0;right:0;bottom:0;z-index:2000;-webkit-transition:300ms;
-moz-transition:300ms;-o-transition:300ms;transition:300ms;-webkit-transform:translate(270px,0);-ms-transform:translate(270px,0);-moz-transform:translate(270px,0);
-o-transform:translate(270px,0);transform:translate(270px,0)}
#viewport #close_side{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1900;text-align:left;text-indent:-9999px}
#viewport.left-open #main_view{position:fixed;top:0;-webkit-transform:translate(270px,0);-ms-transform:translate(270px,0);-moz-transform:translate(270px,0);
-o-transform:translate(270px,0);transform:translate(270px,0)}
#viewport.left-open #main_view:after{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:9998;background:rgba(0,0,0,0.6)}
#viewport.left-open #left_side{position:relative;float:left;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-moz-transform:translate(0,0);
-o-transform:translate(0,0);transform:translate(0,0)}

#viewport.left-open #close_side{display:block}
#viewport.right-open #main_view{position:fixed;top:0;-webkit-transform:translate(-270px,0);-ms-transform:translate(-270px,0);
-moz-transform:translate(-270px,0);-o-transform:translate(-270px,0);transform:translate(-270px,0)}
#viewport.right-open #main_view:after{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:9998;background:rgba(0,0,0,0.6)}
#viewport.right-open #right_side{position:relative;float:right;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-moz-transform:translate(0,0);
-o-transform:translate(0,0);transform:translate(0,0)
}#viewport.right-open #close_side{display:block}
#main_view{display:block}#main_view #header{position:fixed;top:0;right:0;left:0;z-index:300;height:50px}
#main_view #footer{position:relative;z-index:200;padding-bottom:100px}
#main_view #container{position:relative;z-index:100;padding-top:50px}
#main_view #fbtn{position:fixed;z-index:400;bottom:0;right:0;left:0}
#left_side{display:block;overflow:hidden;width:270px}
#cate_m{width:1080px;-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms}
#cate_m>div{float:left;width:25%}[data-scene=s1]{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-moz-transform:translate(0,0);
-o-transform:translate(0,0);transform:translate(0,0)}[data-scene=s2]{-webkit-transform:translate(-270px,0);-ms-transform:translate(-270px,0);
-moz-transform:translate(-270px,0);-o-transform:translate(-270px,0);
transform:translate(-270px,0)}[data-scene=s3]{-webkit-transform:translate(-540px,0);-ms-transform:translate(-540px,0);-moz-transform:translate(-540px,0);
-o-transform:translate(-540px,0);transform:translate(-540px,0)}[data-scene=s4]{-webkit-transform:translate(-810px,0);-ms-transform:translate(-810px,0);
-moz-transform:translate(-810px,0);-o-transform:translate(-810px,0);transform:translate(-810px,0)}

#right_side{display:block;overflow:hidden;width:270px}
#btn_top{visibility:hidden;opacity:0;-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms}#btn_top.on{visibility:visible;opacity:.8}