p,ul{padding:0;margin:0}body,p,ul{margin:0}*{box-sizing:border-box}body,html{height:100%}ul{list-style:none}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.s-1,.slide-end{display:-webkit-box;display:-ms-flexbox;-webkit-box-pack:center}.btn{position:absolute;top:20px;left:20px}.gal{position:relative;-webkit-perspective:800px;perspective:800px;-webkit-transform:translate(-37.5px,-37.5px);transform:translate(-37.5px,-37.5px)}.introduce-wrap,.items,.list-wrap,.list-wrap>li{position:absolute}.list-wrap{-webkit-transition:1s;transition:1s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:1000;perspective:1000;-webkit-transform:rotateX(180deg) translateY(-80px);transform:rotateX(180deg) translateY(-80px)}.list-wrap>li{-webkit-transform-origin:75px 75px 0;transform-origin:75px 75px 0}.list-wrap .items:nth-of-type(odd){-webkit-transform-origin:bottom;transform-origin:bottom;margin-top:-150px}.list-wrap .items:nth-of-type(even){-webkit-transform-origin:top;transform-origin:top}.l-slide{-webkit-transform:translateX(53px) rotateZ(45deg);transform:translateX(53px) rotateZ(45deg)}.r-slide{-webkit-transform:translateX(-53px) rotateZ(-45deg);transform:translateX(-53px) rotateZ(-45deg)}.items{width:150px;height:150px}.s-1{background:#F3F3F3;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateX(53px) rotateZ(45deg) rotateX(-179.9deg);transform:translateX(53px) rotateZ(45deg) rotateX(-179.9deg)}.introduce-wrap{width:200px;height:160px;z-index:2;text-align:center;font-size:12px;-webkit-backface-visibility:hidden;backface-visibility:hidden}.introduce{width:100%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);height:100%;white-space:pre}.s-3{position:relative;-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(179.9deg);transform:translateX(-53px) rotateZ(-45deg) rotateX(179.9deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.s-3 .slide-end{background:#5ABDD5}.imweb{background:url(../src/img/imweb.png)}.slide-end,.slide-front{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.slide-front{z-index:2;-webkit-perspective:800px;perspective:800px;cursor:pointer}.slide-end{position:relative;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.s-4-list>li,.slide-end .close-btn{display:-webkit-box;display:-ms-flexbox;-webkit-box-pack:center}.slide-end .close-btn{position:absolute;top:0;right:0;width:40px;height:40px;cursor:pointer;background:rgba(0,0,0,.3);display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.slide-end .close-btn i{-webkit-transition:1s;transition:1s;display:block;width:60%;height:60%;-webkit-transform:rotate(135deg);transform:rotate(135deg);fill:#fff;background:url(../src/svg/close.svg)}.slide-end .close-btn:hover i{-webkit-transform:rotate(495deg);transform:rotate(495deg)}.title{-webkit-transform:rotate(45deg);transform:rotate(45deg);color:#fff;font:200 18px/30px 'Microsoft YaHei',arial}.corner{position:absolute;width:40px;height:80px;box-shadow:inset 0 0 0 2px #000}.l-corner{top:2px;left:2px;clip:rect(0,38px,78px,0)}.r-corner{bottom:2px;right:2px;clip:rect(2px,40px,80px,2px)}.s-4{background:-webkit-radial-gradient(circle,#F2F2F2 1%,#000);background:radial-gradient(circle,#F2F2F2 1%,#000);-webkit-backface-visibility:hidden;backface-visibility:hidden}.s-4-list{width:100%;height:100%;position:relative}.s-4-list>li{-webkit-transition:.6s;transition:.6s;position:absolute;width:65px;height:65px;background:rgba(0,0,0,.5);display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.s-4-list>li div{-webkit-transition:.6s;transition:.6s;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}.s-4-list>li div i{display:block;width:80%;height:80%;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-repeat:no-repeat}.s-4-list-active div,.s-4-list>li:hover div{background:#26EDE6}.s-4-list>li:hover{-webkit-transform:scale(1.5,1.5);transform:scale(1.5,1.5);z-index:5;border-color:transparent!important}.s-4-list-active{-webkit-transform:scale(1.5,1.5);transform:scale(1.5,1.5);z-index:10;border-color:transparent!important}.s-4-list li:nth-of-type(1){top:0;left:0;border-width:0 1px 1px 0;border-color:#fff;border-style:solid;-webkit-transform-origin:top left;transform-origin:top left}.s-4-list li:nth-of-type(1) div i{background-position:-1px 1px;background-image:url(../src/svg/h5.svg)}.s-4-list li:nth-of-type(2){top:0;right:0;border-width:0 0 1px 1px;border-color:#fff;border-style:solid;-webkit-transform-origin:top right;transform-origin:top right}.s-4-list li:nth-of-type(2) div i{background-position:0 -4px;background-image:url(../src/svg/java.svg)}.s-4-list li:nth-of-type(3){bottom:0;left:0;border-width:1px 1px 0 0;border-color:#fff;border-style:solid;-webkit-transform-origin:bottom left;transform-origin:bottom left}.s-4-list li:nth-of-type(3) div i{background-position:-1px 3px;background-image:url(../src/svg/ps.svg)}.s-4-list li:nth-of-type(4){bottom:0;right:0;border-width:1px 0 0 1px;border-color:#fff;border-style:solid;-webkit-transform-origin:bottom right;transform-origin:bottom right}.s-4-list li:nth-of-type(4) div i{background-position:2px 2px;background-image:url(../src/svg/c++.svg)}.step1{-webkit-animation:step1 .5s ease-in-out forwards;animation:step1 .5s ease-in-out forwards;z-index:5}@-webkit-keyframes step1{0%{-webkit-transform:translateX(53px) rotateZ(45deg) rotateX(0);transform:translateX(53px) rotateZ(45deg) rotateX(0)}100%{-webkit-transform:translateX(53px) rotateZ(45deg) rotateX(-179.9deg);transform:translateX(53px) rotateZ(45deg) rotateX(-179.9deg)}}@keyframes step1{0%{-webkit-transform:translateX(53px) rotateZ(45deg) rotateX(0);transform:translateX(53px) rotateZ(45deg) rotateX(0)}100%{-webkit-transform:translateX(53px) rotateZ(45deg) rotateX(-179.9deg);transform:translateX(53px) rotateZ(45deg) rotateX(-179.9deg)}}.step2{-webkit-animation:step2 .5s ease-in-out forwards;animation:step2 .5s ease-in-out forwards}@-webkit-keyframes step2{0%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(0);transform:translateX(-53px) rotateZ(-45deg) rotateX(0)}100%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(179.9deg);transform:translateX(-53px) rotateZ(-45deg) rotateX(179.9deg)}}@keyframes step2{0%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(0);transform:translateX(-53px) rotateZ(-45deg) rotateX(0)}100%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(179.9deg);transform:translateX(-53px) rotateZ(-45deg) rotateX(179.9deg)}}.step3{-webkit-animation:step3 .5s ease-in-out forwards;animation:step3 .5s ease-in-out forwards}@-webkit-keyframes step3{0%{-webkit-transform:rotateX(0) translateY(0);transform:rotateX(0) translateY(0)}100%{-webkit-transform:rotateX(180deg) translateY(-80px);transform:rotateX(180deg) translateY(-80px)}}@keyframes step3{0%{-webkit-transform:rotateX(0) translateY(0);transform:rotateX(0) translateY(0)}100%{-webkit-transform:rotateX(180deg) translateY(-80px);transform:rotateX(180deg) translateY(-80px)}}.step4{-webkit-animation:step4 .5s ease forwards;animation:step4 .5s ease forwards}@-webkit-keyframes step4{0%{-webkit-transform:rotateX(180deg) translateY(-80px);transform:rotateX(180deg) translateY(-80px)}100%{-webkit-transform:rotateX(0) translateY(0);transform:rotateX(0) translateY(0)}}@keyframes step4{0%{-webkit-transform:rotateX(180deg) translateY(-80px);transform:rotateX(180deg) translateY(-80px)}100%{-webkit-transform:rotateX(0) translateY(0);transform:rotateX(0) translateY(0)}}.step5{-webkit-animation:step5 .5s ease forwards;animation:step5 .5s ease forwards}@-webkit-keyframes step5{0%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(179.9deg);transform:translateX(-53px) rotateZ(-45deg) rotateX(179.9deg)}100%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(0);transform:translateX(-53px) rotateZ(-45deg) rotateX(0)}}@keyframes step5{0%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(179.9deg);transform:translateX(-53px) rotateZ(-45deg) rotateX(179.9deg)}100%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(0);transform:translateX(-53px) rotateZ(-45deg) rotateX(0)}}.step5-2{-webkit-animation:step5-2 .5s ease-in-out forwards;animation:step5-2 .5s ease-in-out forwards}@-webkit-keyframes step5-2{0%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(0);transform:translateX(-53px) rotateZ(-45deg) rotateX(0)}100%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(0) rotateY(180deg);transform:translateX(-53px) rotateZ(-45deg) rotateX(0) rotateY(180deg)}}@keyframes step5-2{0%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(0);transform:translateX(-53px) rotateZ(-45deg) rotateX(0)}100%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(0) rotateY(180deg);transform:translateX(-53px) rotateZ(-45deg) rotateX(0) rotateY(180deg)}}.step5-3{-webkit-animation:step5-3 .5s ease-in-out forwards;animation:step5-3 .5s ease-in-out forwards}@-webkit-keyframes step5-3{0%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(0) rotateY(180deg);transform:translateX(-53px) rotateZ(-45deg) rotateX(0) rotateY(180deg)}100%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(0);transform:translateX(-53px) rotateZ(-45deg) rotateX(0)}}@keyframes step5-3{0%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(0) rotateY(180deg);transform:translateX(-53px) rotateZ(-45deg) rotateX(0) rotateY(180deg)}100%{-webkit-transform:translateX(-53px) rotateZ(-45deg) rotateX(0);transform:translateX(-53px) rotateZ(-45deg) rotateX(0)}}.step6{-webkit-animation:step6 .5s ease forwards;animation:step6 .5s ease forwards}@-webkit-keyframes step6{0%{-webkit-transform:translateX(53px) rotateZ(45deg) rotateX(-179.9deg);transform:translateX(53px) rotateZ(45deg) rotateX(-179.9deg)}100%{-webkit-transform:translateX(53px) rotateZ(45deg) rotateX(0);transform:translateX(53px) rotateZ(45deg) rotateX(0)}}@keyframes step6{0%{-webkit-transform:translateX(53px) rotateZ(45deg) rotateX(-179.9deg);transform:translateX(53px) rotateZ(45deg) rotateX(-179.9deg)}100%{-webkit-transform:translateX(53px) rotateZ(45deg) rotateX(0);transform:translateX(53px) rotateZ(45deg) rotateX(0)}}