/* reset */
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, 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%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
blockquote, q {quotes: none;}
table {border-collapse: collapse;border-spacing: 0;width: 100%;}
ol, ul {list-style: none;}
ul,li{list-style-type:none;}
:focus{ -moz-outline-style: none; }
strong{font-weight: bold;}
html,body{width:100%;height:auto;overflow-x: hidden;}
strong{font-weight: bold;}
input,textarea{font-family:"Microsoft Yahei","arial";}
body{font-family: "Microsoft Yahei","arial";font-size:14px;}
a{color:#000;text-decoration: none;cursor: crosshair;}
a:hover{text-decoration: underline;-webkit-transition:all .4s linear;transition:all .4s linear;-moz-transition:all .4s linear;}
::selection {background: #57b947;color: #FFF;}
::-moz-selection {background: #57b947;color: #FFF;}
::-webkit-selection {background: #57b947;color: #FFF;}
::-webkit-scrollbar {width: 4px;height: 4px;}
::-webkit-scrollbar-thumb {border-radius:50%;background: #57b947;}
::-webkit-scrollbar-track {background: #ccc;}
.clearfix:after {content:"\200B";display:block;height:0;clear:both;} 
.clearfix{*zoom:1;}
.green{color: #99cc33;}
.blue{color: #0099cc;}
.yellow{color: #FC0;}
.container{width:1000px;margin:0 auto;height: auto;overflow: hidden;}
.fr{float: left;}
.fl{float: right;}
.tl{text-align: left;}
.tr{text-align: right;}
.tc{text-align: center;}
.mp0{margin: 0;padding: 0;}

.widget{padding:4% 0;width:100%;}
.bg1{background:url(../images/bg1.jpg) no-repeat center top;box-shadow:0 0 10px #ddd inset}
.bg2{background:url(../images/bg2.jpg) no-repeat center top;box-shadow:0 0 10px #ddd inset;}
.bg3{background:#f2f2e6;box-shadow:0 0 10px #ddd inset;}

.banner{position:relative;overflow:hidden;}
.banner .bg{width:130%;height:130%;min-width:1100px;position:absolute;top:-10%;left:-10%;}
.banner .container{position:relative;height:100%;overflow:hidden;}
.banner .container img{display:block;position:absolute;}
.banner .text{right:0;top:180px;}
.banner .people{bottom:0;left:10%;height:90%;max-height:818px}
.banner .msg1{top:-900px;left:10%;}
.banner .msg2{top:-900px;left:0;}
.banner .msg3{top:-900px;left:65%;}

#loading{position:absolute;top:50%;left:50%;z-index:1;width:160px;height:60px;position:fixed;top:expression((offsetParent.scrollTop)+0); z-index:2;}
#loading #inset{width:160px;height:60px;left:-100px;top:-50px;position: relative;vertical-align: middle;text-align:center;color:#666;font-size:12px;background: #FFF;padding: 20px;border: 2px solid #ccc;}
.fixed{position:fixed;top:0;left:0}
.navbar{background: #FFF;box-shadow:0px 5px 5px 0px rgba(0, 0, 0, 0.07);width:100%;z-index:999;}
.navbar .container{position:relative;}
.navbar .navbar_left{width:113px;position:absolute;left:0;top:10px}
.navbar .navbar_right{float:right;width:55%}
.navbar ul li{float:right;border-right:1px solid #ededed;height:60px;line-height:60px;width:16%;text-align:center;max-width:80px}
.navbar ul li.first{border-left:1px solid #ededed;}
.navbar ul li a{color: #666;display:block;}
.navbar ul li a:hover{background-color: #57b947;color: #FFF;text-decoration: none;}

.title{border-bottom:1px solid #e5e5e5;width:800px;padding-bottom:20px;text-align:center;margin:0 auto}
.title h2{color:#484848;font-size:30px;margin-bottom:10px}
.title p{color:#858585;display:block;}

.tabbtn {width:100%;margin:15px 0;text-align:center;}
.tabbtn li {display:inline-block;position:relative;line-height:30px;margin:2px;}
.tabbtn li a {display:block;text-align:center;cursor:pointer;font-size:12px;border:1px solid #cacaca;border-radius:50px;color:#666;padding:0 10px}
.tabbtn li a:hover{text-decoration: none;background:#57b947;color:#FFF}
.tabbtn li.current a {color:#FFF;text-decoration: none;background:#57b947;color:#FFF;border:1px solid #57b947;}
.tabcon {position:relative;overflow:hidden;margin-top:70px}

.skill_left{float:left;width:70%;color:#444;line-height:1.7em}
.skill_left h4{color:#57b947;font-weight:bold;display:block;margin:5px 0;}
.skill_right{float:right;width:25%;}

.progress_item{background: no-repeat top left;line-height: 1em;height: 45px;margin-bottom:30px;position:relative;padding-left:55px}
.progress_item h5{font-weight: bold;color: #666;margin-bottom:10px;}

.progress_item .thumb{width:45px;height:45px;position:absolute;left:0;top:0}
.progress_item .thumb img{border-radius:100%}
.progress_item .con{width:100%}

.progress{height:20px;border-right:1px solid transparent;border-left:1px solid transparent;border-radius:5px;background:#ebebeb;margin-bottom: 10px;}
.progress>span{position:relative;float:left;margin:0 -1px;height:18px;min-width:30px;border:1px solid;border-color:#bfbfbf #b3b3b3 #9e9e9e;border-radius:5px;background:#ccc;background-image:-webkit-linear-gradient(top,#f0f0f0 0,#dbdbdb 70%,#ccc 100%);background-image:-moz-linear-gradient(top,#f0f0f0 0,#dbdbdb 70%,#ccc 100%);background-image:-o-linear-gradient(top,#f0f0f0 0,#dbdbdb 70%,#ccc 100%);background-image:linear-gradient(to bottom,#f0f0f0 0,#dbdbdb 70%,#ccc 100%);-webkit-box-shadow:inset 0 1px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.2);box-shadow:inset 0 1px rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.2);text-align:right;line-height:16px}
.progress>span>span{padding:0 8px;color:#404040;color:rgba(0,0,0,.7);text-shadow:0 1px rgba(255,255,255,.4);font-weight:700;font-size:11px}
.progress>span:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;height:18px;border-radius:5px;background:url(../images/progress.png) 0 0 repeat-x;content:''}
.progress .green{border-color:#78b337 #6ba031 #568128;background:#85c440;background-image:-webkit-linear-gradient(top,#b7dc8e 0,#99ce5f 70%,#85c440 100%);background-image:-moz-linear-gradient(top,#b7dc8e 0,#99ce5f 70%,#85c440 100%);background-image:-o-linear-gradient(top,#b7dc8e 0,#99ce5f 70%,#85c440 100%);background-image:linear-gradient(to bottom,#b7dc8e 0,#99ce5f 70%,#85c440 100%)}
.progress .red{border-color:#c73321 #b12d1e #8e2418;background:#db3a27;background-image:-webkit-linear-gradient(top,#ea8a7e 0,#e15a4a 70%,#db3a27 100%);background-image:-moz-linear-gradient(top,#ea8a7e 0,#e15a4a 70%,#db3a27 100%);background-image:-o-linear-gradient(top,#ea8a7e 0,#e15a4a 70%,#db3a27 100%);background-image:linear-gradient(to bottom,#ea8a7e 0,#e15a4a 70%,#db3a27 100%)}
.progress .orange{border-color:#f0ad24 #eba310 #c5880d;background:#f2b63c;background-image:-webkit-linear-gradient(top,#f8da9c 0,#f5c462 70%,#f2b63c 100%);background-image:-moz-linear-gradient(top,#f8da9c 0,#f5c462 70%,#f2b63c 100%);background-image:-o-linear-gradient(top,#f8da9c 0,#f5c462 70%,#f2b63c 100%);background-image:linear-gradient(to bottom,#f8da9c 0,#f5c462 70%,#f2b63c 100%)}
.progress .blue{border-color:#459fd6 #3094d2 #277db2;background:#5aaadb;background-image:-webkit-linear-gradient(top,#aed5ed 0,#7bbbe2 70%,#5aaadb 100%);background-image:-moz-linear-gradient(top,#aed5ed 0,#7bbbe2 70%,#5aaadb 100%);background-image:-o-linear-gradient(top,#aed5ed 0,#7bbbe2 70%,#5aaadb 100%);background-image:linear-gradient(to bottom,#aed5ed 0,#7bbbe2 70%,#5aaadb 100%)}

.case_ul li{float:left;width:30%;margin:1%;border:1px solid #eaeaea;background:#FFF}
.case_ul li img{width:100%;height:auto;}
.case_ul li h2{display:block;line-height:40px;height:40px;padding-left:10px}
.case_ul li {-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;}
.case_ul li:hover, .case_ul li:focus, .case_ul li:active {box-shadow:0 0 10px rgba(0, 0, 0, 0.2);}
.case_more{width:60%;height:50px;line-height:50px;text-align:center;border:1px solid #777;color:#777;border-radius:5px;display:block;margin:20px auto 0 auto;}

.works_dl{border-radius:5px;margin-bottom:30px;border:1px solid #ddd}
.works_dl dt{line-height:40px;padding-left:10px;background:#f5f5f5;border-bottom:1px solid #ddd;color:#444;}
.works_dl dd{padding:10px;color:#444;line-height:1.5em}
.works_dl dd h4{display:block;margin:10px 0;font-weight:bold;color:#40a630;font-size:16px}
.works_dl dd h5{font-weight:bold;color:#666}
.works_dl dd h4 a{background:url(../images/ico_link.gif) no-repeat right center;padding-right:15px;color:#40a630}
.works_dl dd p{text-indent: 2em;display:block;margin-bottom:10px}

.list_ol{margin-left:2em}
.list_ol li{background:url(../images/ico_list.gif) no-repeat left 6px;padding-left:15px;color:#000;}

.timeline{width:100%;display:block;margin:50px 0}

.works_left{width:52%;float:left;}
.works_right{width:45%;float:right;}
.works_full{width:auto;float:none;clear:both;}

.works_dl.light{border:1px solid #40a630}
.works_dl.light dt{background:#57b947;border-bottom:1px solid #40a630;color:#FFF;}

.resume_ul{text-align:center;margin-top:50px;}
.resume_ul li{display:inline-block;max-width:200px;min-width:90px;max-height:200px;width:12%;height:200px;vertical-align: top;margin:0 2%;font-size:12px;}
.resume_ul li img{width:80%;display:block;margin:0 auto 10px auto}
.resume_ul .r_mobile_a,.resume_ul .r_mail{display:none}
.resume_info p{text-indent: 2em;display:block;margin-bottom:10px;font-size:14px;line-height:1.5em;color:#444}

.footer{text-align:center;color:#666;padding: 20px 0;font-size:12px}
.footer .fview_mob{display:none}
.footer .fview_pc{display:block}
.footer .cnzz{width:0;height:0;overflow:hidden;}
#killie6{width:100%;height: 90px; border: 1px solid #ff0000;overflow: hidden;background-color: #FEAFAF; font-size: 12px; color: #000;position:fixed; left:0; bottom:0; _position:absolute; top:expression((offsetParent.scrollTop)+0); z-index:2;text-align: center;font-size: 16px;}
#killie6 .exit{position: absolute; right: 3px; top: 3px;color: #FFF;font-size: 30px;line-height: 30px;font-weight: bold;text-decoration: none;background: #f00;border: 1px solid #fff;width: 30px;height: 30px;font-family: arial;}
#killie6 h2{display: block;font-size: 24px;font-weight: bold;margin: 10px;}

.opensource h2{color:#57b947;text-align:center;font-size:18px;font-weight:bold;margin-bottom:20px;}
.opensource p{line-height:2em;color:#666}
.opensource .btn{background:#57b947;color:#FFF;height:40px;line-height:40px;width:120px;text-align:center;display:inline-block;border-radius:10px;margin:20px 5px 0 5px;}
.opensource img:hover{box-shadow:0 0 10px rgba(0, 0, 0, 0.2);}

.simui .thumb{height: 350px;margin-top:20px;}
.simui .video{height: 350px;margin-top:20px;width:620px}
.limikafka .thumb{width: 350px;margin-top:20px;}

.radar{margin:20px auto 0 auto;width:40%;display: block}


@media(max-width: 999px){
    .container{width:auto!important;padding:0 10px}
    .title{width:100%}
    .navbar .navbar_left{left:10px}
    .banner .bg{width:150%;height:150%;top:-25%;left:-25%;}
    .banner .text{position:absolute;left:5%;top:5%;width:50%}
    .banner .people{left:2%;height:75%}
    .banner .msg1{display:none!important}
    .banner .msg2{top:-900px;left:auto;right:1%;width:40%;}
    .banner .msg3{top:-900px;left:1%;width:40%}
    .footer .fview_mob{display:block}
    .footer .fview_pc{display:none}
    .opensource .btn{width:110px;}
    .radar{width: 70%}

}

@media(max-width: 655px){
    .navbar{width:100%;z-index:999;padding:0}
    .navbar .container{padding:0}
    .navbar .navbar_right{width:80%}
    .works_dl{margin-top:20px}
    .works_dl dd{font-size:12px}
    .works_left{width:100%;float:none;}
    .works_right{width:100%;float:none}
    .tabcon{margin-top:20px}
    .progress_item{float:left;width:30%;margin:2%}
    .skill_left{float:none;width:100%;}
    .skill_right{float:none;width:100%;margin-top:20px}
    .resume_ul li{font-size:12px;}
    .resume_info p{font-size:12px;}
    .resume_ul .r_mobile_a,.resume_ul .r_mail{display:inline-block}
    .resume_ul .r_mobile,.resume_ul .r_mail_a{display:none}
    .bg1{box-shadow:none;background:#f5f5f5;border-top:1px solid #eee;border-bottom:1px solid #eee}
    .bg2{box-shadow:none;background:#f5f5f5;border-top:1px solid #eee;border-bottom:1px solid #eee}
    .pcview{display:block;}
}
@media(max-width: 540px){
    .navbar .navbar_right{width:65%}
    .simui .thumb{width:100%;height:auto;}
    .simui .video{width:100%;height:300px;}
    .limikafka .thumb{width:100%;height:auto;}
}
@media(max-width: 360px){
    body{font-size:12px;}
    .navbar .navbar_left{width:30%}
    .navbar .navbar_right{width:65%}
    .progress_item{width:29%;margin:2%}
    .progress_item h5{font-size:12px}
}
@media(max-width: 320px){
    .navbar .navbar_left{width:24%;top:5px}
    .navbar ul li{height:40px;line-height:40px;}
    .progress_item{width:27%;margin:2%}
    .case_ul li{width:47%;margin:1%;}
}