@charset "utf-8";
/*九宫格*/
.box{ width:100%; height:100%; position:relative; }
.sudoku{ width:110%; height:100%;}
.sudoku li{ width:99px; height:99px; border-bottom:1px dashed #222; border-right:1px dashed #222; float:left; }
.flash .one{ width:30px; height:27px; background:url(../images/star-flash-1.png) no-repeat; position:absolute; }
.flash .two{ width:40px; height:40px; background:url(../images/star-flash-2.png) no-repeat; position:absolute; }
/*all*/
.all h3{ display:none; }
.all{ position:absolute; left:100px; top:0; width:100%; height:100%; }
/*名片*/
.card{ position:absolute; left:200px; top:500px; width:100px; height:100px; }
.card .card_on{ width:100px; height:100px; background:#E2A24E; border-radius:6px; position:absolute; z-index:3; left:0px; top:0px; cursor:pointer; }
.card .card_on h3{ width:60px; height:60px; text-align:center; line-height:60px; font-size:50px; font-weight:normal; }
.card .card_on b{ width:17px; height:14px; background:url(../images/ico.png) 0 -700px no-repeat; position:absolute; right:10px; top:10px; }
.card .card_on div.card-title{ padding-left:10px; height:40px; line-height:40px; font-size:16px; color:#fff; position:absolute; left:0; top:60px; }
.card .card_on .card-bg{ width:100px; height:100px; background:url(../images/close.png) center no-repeat #E2A24E; position:absolute; left:0; top:0; border-radius:6px; display:none; }
.card .card-show{ width:400px; height:185px; background:url(../images/ico.png) no-repeat 0 -200px; margin-top:100px; position:relative; border:1px solid #000; display:none; }
.card .card-show div{ margin-top:35px; padding-left:15px;  }
.card .card-show{ line-height:24px; font-size:14px; }
.card .card-show li{ color:#01C0E2; text-indent:2em;  }
.card .card-show li strong{ color:#000; font-weight:bold;}
.card .card-show .card-bottom{ width:400px; height:10px; background:url(../images/ico.png) no-repeat 0 -490px; position:absolute; left:0; bottom:-10px; }
/*技能*/
.skill{ position:absolute; left:500px; top:500px; width:100px; height:100px; }
.skill .skill_on{ width:100px; height:100px; background:#D77075; border-radius:6px; position:absolute; z-index:3; left:0px; top:0px; cursor:pointer; }
.skill .skill_on h3{ width:60px; height:60px; text-align:center; line-height:60px; font-size:50px; font-weight:normal; }
.skill .skill_on b{ width:14px; height:14px; background:url(../images/ico.png) 0 -600px no-repeat; position:absolute; right:10px; top:10px; }
.skill .skill_on div.skill-title{ padding-left:10px; height:40px; line-height:40px; font-size:16px; color:#fff; position:absolute; left:0; top:60px; }
.skill .skill_on .skill-bg{ width:100px; height:100px; background:url(../images/close.png) center no-repeat #D77075; position:absolute; left:0; top:0; border-radius:6px; display:none; }
.skill .skill-show{ cursor:pointer; opacity:0; }
.skill .skill-show .skill-js{ width:100px; height:100px; background:url(../images/skill.jpg) -525px -525px no-repeat ; position:absolute; left:-100px; top:-100px; border-radius:6px; }
.skill .skill-show .skill-css3{ width:100px; height:100px; background:url(../images/skill.jpg) -45px -365px no-repeat #fff; position:absolute; left:-100px; top:100px; border-radius:6px; }
.skill .skill-show .skill-jq{ width:100px; height:100px; background:url(../images/jq.jpg) no-repeat #FCC; position:absolute; right:-100px; top:-100px; border-radius:6px; }
.skill .skill-show .skill-ajax{ width:100px; height:100px; background:url(../images/skill.jpg) -45px -45px no-repeat #CCC; position:absolute; left:0px; top:-100px; border-radius:6px; }
.skill .skill-show .skill-html5{ width:100px; height:100px; background:url(../images/skill.jpg) -365px -525px no-repeat #CCC; position:absolute; left:-100px; top:0px; border-radius:6px; }
.skill .skill-show .skill-css{ width:100px; height:100px; background:url(../images/skill.jpg) -205px -45px no-repeat #CCC; position:absolute; right:-100px; top:0px; border-radius:6px; }
.skill .skill-show .skill-dw{ width:100px; height:100px; background:url(../images/skill.jpg) -205px -365px no-repeat #CCC; position:absolute; right:-100px; top:100px; border-radius:6px; }
.skill .skill-show .skill-ps{ width:100px; height:100px; background:url(../images/skill.jpg) -45px -205px no-repeat #CCC; position:absolute; right:0px; top:100px; border-radius:6px; }
/*案例*/
.case a{ color:#000; }
.case{ position:absolute; left:800px; top:600px; width:100px; height:100px; }
.case .case_on{ width:100px; height:100px; background:#92C469; border-radius:6px; position:absolute; z-index:3; left:0px; top:0px; cursor:pointer; }
.case .case_on2{ background:#CF0;}
.case .case_on h3{ width:60px; height:60px; text-align:center; line-height:60px; font-size:50px; font-weight:normal; }
.case .case_on b{ width:14px; height:14px; background:url(../images/ico.png) 0 -650px no-repeat; position:absolute; right:10px; top:10px; }
.case .case_on div.case-title{ padding-left:10px; height:40px; line-height:40px; font-size:16px; color:#fff; position:absolute; left:0; top:60px; }
.case .case_on .case-bg{ width:100px; height:100px; background:url(../images/close.png) center no-repeat #D77075; position:absolute; left:0; top:0; border-radius:6px; display:none; }
.case .case-show{ cursor:pointer; display:none; }