body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,caption,cite,code,dfn,th,var,em{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
li{list-style-type:none}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img,a img{border:none;}
table,td,tr,th{font-size:12px;}
select{border:1px solid #bbb;margin-right:5px;padding:3px;}
.alR{text-align:right;}
.alL{text-align:left;}
.alC{text-align:center;}
body{font:12px Arial,Helvetica,sans-serif,Simsun;color:#555;width:100%;overflow-x:hidden;background:#717fbd url(bg3.png);background-attachment:fixed;background-size:contain;}
a{color:#555;text-decoration:none;outline:none;}
a:hover{text-decoration:none;}
.red,a.red{color:#c40000;}
.gray,a.gray{color:#999;}
.white,a.white{color:#fff;}
.c5,a.c5{color:#555;}
.c3,a.c3{color:#333;}
.c7,a.c7{color:#777;}
.fB{font-weight:bold;}
.fI{font-style:italic;}
.fN{font-weight:normal;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f24{font-size:24px;}
.lh16{line-height:16px;}
.lh18{line-height:18px;}
.lh20{line-height:20px;}
.lh25{line-height:25px;}
.lh30{line-height:30px;}
.lh35{line-height:35px;}
.plr20{padding:0 20px;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
.hid{display:none;}
.OverH{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ov{overflow:hidden;position:relative;}
.over{overflow:hidden;}
.unLine,.unLine a{text-decoration:none}
.U,.U a{text-decoration:underline;}
.hand{cursor:pointer;}
.WB{word-wrap:break-word;}
.wn{white-space:nowrap;}
.vline{padding:0 5px;color:#cacaca;}
.xline{text-decoration:line-through;}
.yahei{font-family:"Microsoft Yahei";}
.rel{position:relative;}
.w{min-width:640px;max-width:990px;margin:0 auto;}
input[type=submit]{-webkit-appearance:none;border-radius:0;}
.nav{height:80px;width:100%;position:fixed;bottom:0;left:0;right:0;z-index:10;}
.fnav{width:540px;height:70px;padding-top:10px;margin:0 auto;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#4FFFFFFF,endcolorstr=#4FFFFFFF);background:rgba(255,255,255,0.4);}
.fnav ul{width:100%;}
.fnav li{width:90px;float:left;display:block;text-align:center;}
.fnav li a{width:70px;height:70px;display:block;position:relative;margin:0 auto;}
.fnav li a p{position:absolute;top:-36px;left:-5px;line-height:24px;height:30px;filter:alpha(opacity=60);opacity:0.6;background:url(bdot.png) 50% bottom no-repeat;display:none;}
.fnav li a p em{background-color:#000;color:#fff;width:80px;border-radius:8px;display:block;}
.fnav li.on a p{display:block;}
.fnav li.on img{opacity:0.8;}
.tlogo{margin:2px 10px 0 20px;}
.tnav{height:24px;line-height:24px;width:100%;overflow:hidden;position:fixed;top:0;left:0;right:0;z-index:10;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#4FFFFFFF,endcolorstr=#4FFFFFFF);background:rgba(255,255,255,0.4);}
.tnav li{float:left;margin:0 10px;}
.tnav li a{color:#333;}
.tnav a:hover{color:#fff;}
.page{width:100%;position:relative;z-index:2;display:none;padding-top:10%;}
.home{position:fixed;height:216px;overflow:hidden;left:0;top:40%;margin-top:-108px;width:100%;}
#portfolio{padding-top:0;}
#pomain{padding-top:10%;}
#zp{padding-top:60px;}
#skill{padding-top:0;position:absolute;top:20%;overflow:hidden;}
#bg{position:fixed;z-index:0;left:);top:0;width:100%;height:100%;}
.bg{background-attachment:fixed;background-size:cover;width:100%;height:100%;position:fixed;left:0;top:0;z-index:0;display:none;}
.bg1{background-image:url(http://s.qw.cc/images/cdn/bg01.jpg);}
.bg2{background-image:url(http://s.qw.cc/images/cdn/bg2.jpg);}
.bg3{background:url(http://s.qw.cc/images/cdn/bg3.png) 0 0 repeat;background-size:contain;}
.bg4{background-image:url(http://s.qw.cc/images/cdn/bg4.jpg);}
.bg5{background-image:url(http://s.qw.cc/images/cdn/bg5.jpg);}
.bg6{background-image:url(http://s.qw.cc/images/cdn/bg6.jpg);}
.vts{font-size:30px; line-height:35px;height:35px; overflow:hidden;color:#fff; font-weight:normal;font-family:"Microsoft Yahei";}
.an{webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
/*about*/
.azone{width:830px;height:440px;margin:0 auto;overflow:hidden;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#5F000000,endcolorstr=#5F000000);background:rgba(0,0,0,0.5);}
.abl{width:660px;line-height:22px;}
.abr{width:170px;height:415px;padding-top:25px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#9A000000,endcolorstr=#9A000000);background:rgba(0,0,0,0.5);}
.c50{color:#505b64;}
.rad100{border-radius:100%;}
.ptb10{padding:10px 0;}
.azdes{color:#bbb;padding:32px;text-align:justify;}
.azdes img{margin:13px;border:2px solid #bbb;cursor:pointer;}
.azdes img:hover{border-color:#fff;}
.abr ul{margin-top:15px;}
.abr li{margin-left:38px;width:100px;line-height:30px;display:block;}
.abr li a{color:#505b64;font-size:14px;width:100%;display:block;}
.abr li.on a,.abr li a:hover{color:#fff;}
#abbox{width:100%;height:100%;text-align:center;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#5F000000,endcolorstr=#5F000000);background:rgba(0,0,0,0.7);position:fixed;z-index:11;top:0;left:0;cursor:url(http://www.vganchou.com/css/out.cur),auto;}
#abimg{width:100%;height:100%;position:absolute;left:0;top:0;display:inline-block;vertical-align:middle;z-index:1;}
.mb10{margin-bottom:10px;}
#abimg img{vertical-align:middle;max-height:700px;background:url(bload.gif) 50% 50% no-repeat;}
.hebk{display:inline-block;height:100%;vertical-align:middle;}
.xx{width:20px;height:20px;display:block;position:absolute;right:-10px;top:-10px;background:#000 url(close.png) 50% 50% no-repeat;border-radius:10px;}
.apage{color:#ccc; background-color:#666;width:20px; height:20px; line-height:20px; text-align:center; display:inline-block; margin:5px 0;}
/*skill*/
.sk_box{width:990px;margin:0 auto;}
.sk_box li{width:100%;height:120px;overflow:hidden;display:block;}
.sk_box a{width:20%;height:90px;padding:15px 0;color:#fff;line-height:20px;display:block;float:left;text-align:center;}
.sk_on a{opacity:0.2;}
.sk_box li.on{margin-bottom:100px;}
.sk_box a.on{opacity:1;background:url(tdot.png) 50% bottom no-repeat;color:#000;}
.sk_des{width:100%;padding:20px 10px 0 10px;height:80px;color:#fff;line-height:20px;background-color:#000;color:#999;position:fixed;left:0;top:20%;margin-top:0;z-index:12;display:none;background-color:#000;filter:alpha(opacity=70);background:rgba(0,0,0,0.7);}
.skb{width:860px;margin:0 auto;display:none;}
.fen{color:#fff;background-color:#222;display:inline-block;padding:0 5px;}
.sk_box a:hover{color:#000;}
.scd{display:block;}
/*port*/
.port{width:990px;margin:0 auto;}
.port .px{background-color:#0092bf;width:180px;height:140px;padding-top:50px;position:relative;z-index:2;cursor:pointer;}
.port a{width:180px;height:190px;text-align:center;float:left;margin:0 9px;color:#fff;position:relative;}
.port a h2{font-size:20px;font-weight:normal;padding-bottom:15px;}
.port a h3{font-size:18px;font-weight:normal;width:170px;margin:0 auto;opacity:0.5;border-top:1px solid #fff; padding:15px 0;font-family:"Microsoft Yahei";}
.port a p{opacity:0.5;}
.port a em{width:180px;height:190px;display:block;background-color:#0092bf;position:absolute;right:-5px;top:-5px;z-index:0;filter:alpha(opacity=50);opacity:0.5;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.port .p2{background-color:#7b9f00;}
.port .p3{background-color:#e39600;}
.port .p4{background-color:#49a60d;}
.port .p5{background-color:#2cb798;}
.port a:hover{opacity:0.6;}
.port a:hover em{right:-10px;top:-10px;}
.zpu{width:580px;margin:0 auto 30px auto;line-height:30px;overflow:hidden; text-align:center;}
.zpu a{display:block;float:left;padding:0 10px;margin:0 5px;color:#333;font-size:14px;}
.zpu a.on{border-bottom:2px solid #333;}
.zpu a:hover{color:#fff;}
.pbox{width:100%;margin:0 auto;}
.pzone{width:100%;position:relative;display:none;}
.pbox a{width:230px;background-color:#fff;padding:5px;display:block;line-height:20px;color:#999;text-align:center;overflow:hidden;position:absolute;left:45%;top:45%;cursor:url(http://www.vganchou.com/css/in.cur),auto;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.pbox a img{background:#fff url(blogo.png) 50% 45% no-repeat;}
.pbox a:hover{color:#333;}
.pbox a:hover img{opacity:0.6;}
.pxbox{width:100%;height:100%;overflow:hidden;position:fixed;z-index:12;left:0;top:0;cursor:url(http://www.vganchou.com/css/out.cur),auto;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#9FFFFFFF,endcolorstr=#9FFFFFFF);background:rgba(255,255,255,0.9);}
.pxxs{width:102%;height:100%;overflow-x:hidden;overflow-y:auto;}
.pxbox img{position:relative;padding-top:40px;}
/*blog*/
.bla{width:90%;margin:0 auto;overflow:hidden;}
.bla .itm{width:16%;margin:30px 2%;float:left;overflow:hidden;}
.bla a{width:300px;margin:0 auto;display:block;height:300px;overflow:hidden;position:relative;left:50%;margin-left:-150px;}
.bla a p{background-color:#000;text-align:center;width:100%;line-height:20px; height:20px;color:#fff;position:absolute;left:0;bottom:0;filter:alpha(opacity=50);opacity:0.5;}
.bla a p.i{width:100%;height:300px;font-size:60px;color:#fff;line-height:280px;display:none;}
.bla a img{background:#fff url(blogo.png) 50% 120px no-repeat;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.bla a:hover img{width:320px;height:459px;}
.bla a:hover p.i{display:block;}
.bone{width:102%;height:100%;overflow-x:hidden;overflow-y:auto;line-height:25px;}
.bone img{max-width:990px;min-width:540px;vertical-align:top;padding-top:0;}
.bload{background:url(bload.gif) 50% 50% no-repeat;}
/*contact*/
#cform{width:382px;margin:0 auto;}
.cftext{width:380px;height:36px;text-indent:10px; float:left;line-height:36px;background-color:#e8e6e9;border:1px solid #fff;filter:alpha(opacity=30);opacity:0.3;color:#000;position:relative;z-index:2;}
.preh{width:382px;margin-top:20px;line-height:36px;}
#cform textarea{height:90px;width:376px;}
.preh label{position:absolute;left:10px;top:0;color:#eee;z-index:1;}
.error{border-color:#c00000;}
.csubmit{width:110px;height:35px;line-height:35px;background:none;border:1px solid #fff; text-align:center; display:block; margin:20px auto;color:#fff;font-size:18px;border-radius:10px;opacity:0.6;background:rgba(255,255,255,0);}
.csubmit:hover{color:#333;background-color:#fff;background:rgba(255,255,255,1);}
.e0{color:#efecee;}
.pcurrent,.current{display:block;}
#pbbox{width:300px;height:140px;padding:20px;background-color:#fff;border-radius:8px;line-height:40px; position:fixed;top:30%;left:50%;margin-left:-160px;z-index:12;box-shadow: 0 0 4px #aaa;}
.ipass{width:240px;border:1px solid #ddd;height:35px;line-height:35px;}
.isubmit{width:80px;height:35px;line-height:35px;display:block;margin:0 auto;border:1px solid #ddd;border-radius:8px;text-align:center;color:#333;font-size:16px;}
.isubmit:hover{background-color:#333;color:#fff;}
/*css3*/
@-webkit-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}
@-moz-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}
@-o-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}
@keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}
@-webkit-keyframes scaleDown{0%{opacity:0;-webkit-transform:scale(0);}100%{opacity:1;-webkit-transform:scale(1);}}
@-moz-keyframes scaleDown{0%{opacity:0;-moz-transform:scale(0);}100%{opacity:1;-moz-transform:scale(1);}}
@-o-keyframes scaleDown{0%{opacity:0;-o-transform:scale(0);}100%{opacity:1;-o-transform:scale(1);}}
@keyframes scaleDown{0%{opacity:0;transform: scale(0);}100%{opacity:1;transform:scale(1);}}
@-webkit-keyframes scaleUp{0%{opacity:0;-webkit-transform:scale(2);}100%{opacity:1;-webkit-transform:scale(1);}}
@-moz-keyframes scaleUp{0%{opacity:0;-moz-transform:scale(2);}100%{opacity:1;-moz-transform:scale(1);}}
@-o-keyframes scaleUp{0%{opacity:0;-o-transform:scale(2);}100%{opacity:1;-o-transform:scale(1);}}
@keyframes scaleUp{0%{opacity:0;transform: scale(2);}100%{opacity:1;transform:scale(1);}}
@-webkit-keyframes moveFromTop{0%{opacity:0;-webkit-transform: translateY(-100%);}100%{opacity:1;-webkit-transform: translateY(0);}}
@-moz-keyframes moveFromTop{0%{opacity:0;-moz-transform: translateY(-100%);}100%{opacity:1;-moz-transform: translateY(0);}}
@-o-keyframes moveFromTop{0%{opacity:0;-o-transform: translateY(-100%);}100%{opacity:1;-o-transform: translateY(0);}}
@keyframes moveFromTop{0%{opacity:0;transform:translateY(-100%);}100%{opacity:1;transform: translateY(0);}}
.scd{-webkit-animation:fadeIn 0.5s ease both;-moz-animation:fadeIn 0.5s ease both;-o-animation:fadeIn 0.5s ease both;animation:fadeIn 0.5s ease both;display:block;}
.mf_t{-webkit-animation:fadeIn 0.5s ease both;-moz-animation:fadeIn 0.5s ease both;-o-animation:fadeIn 0.5s ease both;animation:fadeIn 0.5s ease both;display:block;}
.pcurrent .sk_box{-webkit-animation:scaleUp 0.5s ease both;-moz-animation:scaleUp 0.5s ease both;-o-animation:scaleUp 0.5s ease both;animation:scaleUp 0.5s ease both;}
.pcurrent .port a{-webkit-animation:moveFromTop 0.5s ease both;-moz-animation:moveFromTop 0.5s ease both;-o-animation:moveFromTop 0.5s ease both;animation:moveFromTop 0.5s ease both;}
.pcurrent .port a.dly0{-webkit-animation-delay:0.2s;-moz-animation-delay:0.2s;-o-animation-delay:0.2s; animation-delay:0.2s;}
.pcurrent .port a.dly1{-webkit-animation-delay:0.4s;-moz-animation-delay:0.4s;-o-animation-delay:0.4s; animation-delay:0.4s;}
.pcurrent .port a.dly2{-webkit-animation-delay:0.6s;-moz-animation-delay:0.6s;-o-animation-delay:0.6s; animation-delay:0.6s;}
.pcurrent .port a.dly3{-webkit-animation-delay:0.8s;-moz-animation-delay:0.8s;-o-animation-delay:0.8s; animation-delay:0.8s;}
.pcurrent .itm{-webkit-animation:scaleDown 0.5s ease both;-moz-animation:scaleDown 0.5s ease both;-o-animation:scaleDown 0.5s ease both;animation:scaleDown 0.5s ease both;}
.pcurrent .azone{-webkit-animation:fadeIn 0.5s ease both;-moz-animation:fadeIn 0.5s ease both;-o-animation:fadeIn 0.5s ease both;animation:fadeIn 0.5s ease both;}
.mf_ts{-webkit-animation:moveFromTop 0.5s ease both;-moz-animation:moveFromTop 0.5s ease both;-o-animation:moveFromTop 0.5s ease both;animation:moveFromTop 0.5s ease both;display:block;}