html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;}
b,h1,h2,h3,h4,h5,h6{font:inherit;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
i{ font-style: normal; }

/* basic */
html,body,.container{ margin:0; padding:0; width:100%; height:100%; overflow:hidden; position:relative; }
body,a{ color:#fff; font-size:12px; font-family:'Arial','微软雅黑';-webkit-tap-highlight-color:rgba(0,0,0,0); }
.fl{ float:left; }
.fr{ float:right; }
.clear{ clear:both; }

.wrap{ width:14.35rem; margin:0 auto; }
body{
	-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;overflow-scrolling:touch
 }

.menu{ position:absolute; right:.8rem; top:.8rem; z-index:98; 
	-webkit-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition:all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
 }

.menu i{ display:block; width:1.575rem; height:1.6rem; background:url('open.png') no-repeat 100% 50%; background-size:.575rem 1.6rem; opacity:1; visibility:visible; position:absolute; top:0; right:0;
	-webkit-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition:all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
.close,
.menu ul,
.menu li{ display:inline-block; }

.close,
.menu ul{
	-webkit-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition:all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
	opacity:0; visibility:hidden; vertical-align:middle;
}

.close{ width:.7rem; height:.7rem; background:url('close.png') no-repeat 0 0; background-size:.7rem .7rem; margin-left:.975rem;  }

.open .close,
.menu.open  ul{ opacity:1; visibility:visible; }

.menu li a{ display:block; width:.625rem; height:.625rem; padding:0 .675rem; border-right:1px solid #4b565e; }
.menu li a img{ display:block; width:100%; }

.open i{ opacity:0; visibility:hidden; } 

.mask{ position:absolute; top:0; left:0; width:100%; height:100%; position:fixed; background:#fff; opacity:0; z-index:99; visibility:hidden;
	-webkit-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
	-moz-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
	transition:all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
.container{ overflow-x:hidden; overflow-y:scroll;  background:url('bg.png'); background-size:63px 63px; } 

.loading .mask{ opacity:1; visibility:visible; }

.logo{ position:absolute; margin:auto; left:0; right:0; top:25%; bottom:auto; width:4.25rem; height:5.1rem;}
.logo2{ position:absolute; top: 50%; left:50%; width:2.85rem; height:3.45rem; margin-left:-1.425rem; margin-top:-1.725rem; }
.logo img{ display:block; width:100%; }

.header{ position:relative; }
.header img{ display:block; width:100%; }
.list,
.cases,
.content{ position:relative; top:-1.35rem; margin-bottom:-1.35rem; }
.list li a,
.list li a img{ display:block; width:100%; }

.list-description{ position:relative; height:2.55rem; width:100%; }
.list-description i{ position:absolute; width:3.05rem; height:1px; background:rgba(255,255,255,.4); position:absolute; right:0; top:.85rem; display:block; }
.list-description h4{ display:block; position:absolute; right:3.3rem; top:0.575rem; font-size:.6rem; }
.list-description h5{ display:block; position:absolute; right:3.3rem; top:1.45rem; font-size:.45rem; }

.case{ position:absolute; top:-1.4rem; bottom:0; right:2.625rem; background:rgba(255,255,255,.4); width:1px; }
.case i{ display:block; width:1rem; height:1rem; background:url('case.png') no-repeat 0% 0%; background-size:1rem 1rem; left:50%; margin-left:-.5rem; }
.index{ position:relative; }
.index img{ display:block; width:100%; }

.cases{ padding-bottom:1rem; }
.cases ul{ display:block; }
.cases li:nth-child(odd){ margin-right:2%; }
.cases li{ display:block; width:48.5%; height:48.5%; float:left; margin-bottom:2%; }
.cases li a{ display:block; }
.cases li img{ display:block; width:100%; }

.content{ background:#fff; color:#2a2a2a; font-size:.65rem; line-height:1.25rem; padding-bottom:1rem; }
.content img{ display:block; width:100%; margin-bottom:.925rem; }

.back{ position:fixed; top:.95rem; left:1.125rem; z-index:98; }
.back a{ display:block; width:1.675rem; height:1.675rem; background:#e6e6e6 url('back.png') no-repeat 50% 50%; background-size:.6rem .925rem; }

.title h3{ font-size:.9rem; display:block; margin-bottom:.4rem; }
.title h4{ font-size:.5rem; display:block; margin-bottom:.5rem; }