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%;font-weight:normal;}
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:url(rbg.png) 0 0 no-repeat;background-size:cover;}
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;}
.pr10{padding-right:10px;}
.pl5{padding-left:5px;}
.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:620px;max-width:990px;margin:0 auto;}
input[type=submit]{-webkit-appearance:none;border-radius:0;}
@font-face{font-family:"vgan";src: url('f.eot');src:url('f.eot?#iefix') format('embedded-opentype'),url('f.woff') format('woff'),url('f.ttf') format('truetype'),url('f.svg#iconfont') format('svg');}
.ft{font-family:"vgan" !important;color:#fff;-webkit-font-smoothing:antialiased;/*-webkit-text-stroke-width:0.2px;*/-moz-osx-font-smoothing:grayscale;}
.nav{height:80px;width:100%;position:fixed;bottom:0;left:0;z-index:10;min-width:620px;}
.nav ul{width:540px;margin:0 auto;}
.nav li{width:90px;float:left;display:block;text-align:center;}
.nav li a{width:60px;height:60px;display:block;text-align:center;line-height:60px;font-size:24px;background-color:#ff1e5d;border-radius:35px;color:#fff;margin:0 auto; position:relative;}
.nav li a p{font-family:"vgan";}
.nav li a em{font-size:12px;display:none;position:absolute;top:-40px;left:-5px;color:#fff;width:70px; text-shadow:1px 1px 0px #333;}
.nav li a:hover{font-size:34px;opacity:0.8;}
.nav li a:hover em{display:block;}
.nav li a.c1{background-color:#ff502b;}
.nav li a.c2{background-color:#fea501;}
.nav li a.c3{background-color:#00cf77;}
.nav li a.c4{background-color:#3ab9f0;}
.nav li a.c5{background-color:#70d4d4;}
.hnv{width:200px;top:50%;left:50%;height:270px;margin-top:-180px;margin-left:-220px;-webkit-transition:all 0.6s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.hnv ul{width:200px;}
.hnv li a{margin-bottom:35px;}
.tlogo{margin:0 10px 0 10px;color:#fff;font-size:16px;}
.tnav{height:30px;line-height:30px;width:100%;min-width:620px;position:fixed;top:0;left:0;right:0;z-index:10;text-shadow:0px 1px 0px #333;}
.tnav li{float:left;margin:0 10px;position:relative;color:#fff;font-size:10px;}
.tnav a{color:#fff;filter:alpha(opacity=70);opacity:0.7;}
.tnav a:hover{opacity:1;}
.tnav li .sub{display:none;width:130px;position:absolute;left:0;top:24px;line-height:25px;}
.sub a{display:block;}
.tnav li.on .sub{display:block;}
.sub a:hover{border-bottom:1px solid #fff;height:24px;}
.page{width:100%;position:relative;z-index:2;display:none;}
.home{position:fixed;height:340px;overflow:hidden;left:50%;top:50%;margin-top:-190px;width:160px;margin-left:-110px;text-align:center;background:url(unkl.png) left 10px no-repeat;padding-left:50px;}
.home h2{font-size:120px;width:150px;line-height:140px;font-weight:normal;}
.hline{width:1px;height:260px;background-color:#fff;background:rgba(255,255,255,0.6);margin-top:10px;}
#portfolio{z-index:11;}
#pomain{position:fixed;top:50%;margin-top:-220px;width:100%;text-align:center;}
#blog{position:fixed;top:50%;margin-top:-220px;}
#bg{position:fixed;z-index:0;left:0;top:0;width:100%;height:100%;}
#contact{margin-top:-120px;top:50%;position:fixed;}
.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.dddua.com/images/cdn/v1.jpg);}
.bg2{background-image:url(http://s.dddua.com/images/cdn/bg2.jpg);}
.bg3{background-image:url(http://s.dddua.com/images/cdn/v3.jpg);}
.bg4{background-image:url(http://s.dddua.com/images/cdn/v4.jpg);}
.bg5{background-image:url(http://s.dddua.com/images/cdn/v5.jpg);}
.bg6{background-image:url(http://s.dddua.com/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.6s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
/*about*/
#about{padding-top:0;}
.aline{width:1px;height:200px; background-color:#000; overflow:hidden;margin:0 auto;}
.rad100{border-radius:100%;}
.uava{width:90px;height:90px;margin:0 auto;position:relative;}
.uava em{display:inline-block;width:590px;height:158px;display:none;position:absolute;left:-284px;top:-38px;}
.ahv em{display:block;opacity:0.5;}
.ahv em g{stroke-dasharray:1500;stroke-dashoffset:1500;-webkit-animation:dash 5s ease both;animation:dash 5s ease both;}
.ahv em text{-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;}
.bhv em{display:block;opacity:0.5;}
.bhv em g{stroke-dasharray:0;stroke-dashoffset:0;-webkit-animation:oash 5s ease both;animation:oash 5s ease both;}
.bhv ellipse{display:none;}
@-webkit-keyframes dash{to{stroke-dashoffset:0;}}
@keyframes dash{to{stroke-dashoffset:0;}}
@-webkit-keyframes oash{to{stroke-dashoffset:3500;stroke-dasharray:3500;}}
@keyframes oash{to{stroke-dashoffset:3500;;stroke-dasharray:3500;}}
.abu{min-width:620px;max-width:990px;margin:20px auto 0 auto;}
.abu li{line-height:30px; text-align:center;}
.abu li a{color:#333;padding:5px 10px;text-align:center;}
.abu li.on a{border:1px solid #000;border-radius:15px;color:#000;}
.abu li a:hover{color:#000;}
.abu li.abli{display:none;border-top:1px solid #000;border-bottom:1px solid #000;color:#333;text-align:justify;padding:10px 0;line-height:20px;margin:10px 0;}
.abli p{margin-bottom:10px;}
.abli img{background:#fff url(blogo.png) 50% 50% no-repeat;margin:5px;border-radius:44px;cursor:url(http://www.vganchou.com/css/in.cur),auto;}
.abli img:hover{filter:alpha(opacity=60);opacity:0.6;}
#aimg{text-align:center;}
#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;}
/*skill*/
.sk_box{top:50%;margin-top:-220px;left:0;position:fixed;width:100%;}
.sk_box li{width:100%;display:inline-block;padding-bottom:20px;}
.sk_box li:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}
.sk_box li p.left{width:15%;}
.sk_box a{width:14%;color:#fff;height:110px;line-height:30px;display:block;float:left;overflow:hidden;text-align:center;}
.sk_box a p{margin:0 auto;font-size:30px;width:80px; height:80px;border:1px solid #fff;border-radius:40px;line-height:80px;font-family:"vgan";webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.sk_on a{opacity:0.3;}
.sk_box a:hover p,.sk_box a.on p{background-color:#fff;color:#7a2e0d;filter:alpha(opacity=70);opacity:0.7;}
.sk_box a.on{opacity:1;background:url(tot.png) 50% bottom no-repeat;}
.scd{display:block;}
.skd{clear:both;width:100%;padding:15px 0;display:none;line-height:24px;margin-bottom:15px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7FFFFFFF,endcolorstr=#7FFFFFFF);background:rgba(255,255,255,0.7);/*box-shadow: 0px -2px 2px #a2603e inset;*/}
.skd p{display:none;color:#333;width:62%;margin:0 auto;text-align:justify;}
.highs .sk_box li{padding-bottom:30px;}
@media screen and (max-width: 620px){.sk_box li p.left{display:none;}.sk_box a{width:20%;}}
/*port*/
.port{max-width:990px;min-width:620px;margin:0 auto;}
.port .px{color:#465960;border:1px solid #fff;width:140px;height:140px;left:10px;top:10px;position:absolute;z-index:2;cursor:pointer;border-radius:80px;background:rgba(255,255,255,0.2);-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 a{width:164px;height:164px;text-align:center;display:inline-block;margin:0 12px 20px 12px;position:relative;}
.port a i{color:#707a7a;}
.port a h2{font-size:16px;padding-top:30px;}
.port a h3{opacity:0.7;font-family:"Microsoft Yahei";}
.port a p{opacity:0.7;margin:15px; 0}
.port a em{width:150px;height:150px;display:block;position:absolute;left:5px;top:5px;z-index:0;border-radius:90px;border:1px solid #fff;-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 a:hover .px{background:rgba(255,255,255,0.8);-webkit-transform:scale(1.2);-moz--transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);}
.port a:hover em{-webkit-transform:scale(1.2);-moz--transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);}
.zp{padding-top:80px;}
.zpu{width:100%;min-width:620px;line-height:54px;border-bottom:1px solid #ddd;background-color:#fff;background:rgba(255,255,255,0.8);position:fixed;right:0;top:0;z-index:2;height:54px;}
.zback{margin:0 10px 0 10px;font-size:16px;color:#666; background:url(ct.png) 10px -163px no-repeat; padding-left:40px;}
.zpul{border:1px solid #666;border-radius:6px; line-height:35px;height:35px;width:554px;margin:8px auto 0 auto; overflow:hidden;}
.zpul a{color:#666;line-height:35px;width:110px;border-right:1px solid #666;text-align:center;overflow:hidden;float:left;}
.zpul a:last-child{border:none;}
.zpul a.on{background-color:#666;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;min-width:620px;}
.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{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);}
.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;min-height:300px; background:#fff url(blogo.png) 50% 50% no-repeat;vertical-align:top;padding-top:0;cursor:default;}
.bload{background:url(bload.gif) 50% 50% no-repeat;}
/*contact*/
.contact{width:350px;margin:0 auto;line-height:36px;color:#fff;}
.text{width:320px;height:30px;line-height:30px;margin-top:30px;background:none;border:none;border-bottom:1px solid #fff;color:#fff;opacity:0.7;background:url(ct.png) 0 6px no-repeat;padding-left:30px;}
input{outline:none;}
.bline{height:1px; overflow:hidden;background-color:#fff;filter:alpha(opacity=70);opacity:0.7;}
.imsg{width:280px;padding-right:40px;background-position:0 -47px;}
.csub{width:34px;height:34px;display:block;position:absolute;right:0;top:120px;background:url(ct.png) 0 -110px no-repeat;filter:alpha(opacity=70);opacity:0.7;}
.csub:hover{filter:alpha(opacity=100);opacity:1;}
::-webkit-input-placeholder{color:#fff;}
:-moz-placeholder{color:#fff; }
::-moz-placeholder{color:#fff;}
:-ms-input-placeholder{color:#fff;}
.error{border-color:#b10000;color:#b10000;}
.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);}
.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:inline-block;margin:0 10px;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;}
.pcurrent .abtp{-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;}