/* 首页 */
.header{ position: absolute; top: 0; left: 0; width: 100%; z-index: 2;}
.header img{ display: block; padding: 16px 0;}


/* .colourful-bg{background: -webkit-gradient(linear,left top, right top,from(#12c2e9), to(#7728dd)); background: linear-gradient(to right,#12c2e9, #7728dd);} */
.colourful-title{ font-weight: 400; font-size: 36px; color: #2a9ee6; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 60px;}
.colourful-title span{ width: 30px; height: 30px; border-radius: 50%; margin-right: 15px; opacity: 0.5; background-color: #0195FF;}

.slide01{ background: url('../images/index/ximg01.png') no-repeat center; background-size: cover;}
.slide04{ background: url('../images/index/ximg06.png') no-repeat center; background-size: cover;}
.slide06{ background: url('../images/index/ximg08.png') no-repeat center; background-size: cover;}
.slide07{ background: url('../images/index/ximg09.png') no-repeat center; background-size: cover;}

.slide-content{ position: absolute; left: 0; top: 50%; color: #666; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);}
.slide-content .title{ color: #3E82F1; font-weight: 400; font-size: 48px;}
.slide-content .sub-title{ font-size: 24px; font-weight: 400; padding-bottom: 15px; margin: 10px 0 15px; position: relative;}
.slide-content .sub-title:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 122px; height: 1px; background-color: #898989;}
.slide-content .info{ font-size: 24px; line-height: 36px;}
.slide-content .info span{ margin-right: 5px;}
.slide-content .info span.star{ display: inline-block; vertical-align: middle; width: 18px; height: 18px; background: url('../images/index/ximg12.png') no-repeat center; background-size: 100%;}
.slide-content .btn{ font-size: 18px; display: block; width: 200px; line-height: 45px; color: #fff; text-align: center; margin-top: 60px; background-color: #3e82f1; border-radius: 5px;}
/* .slide-content .btn:hover{ background-color: #12c2e9; background-image: none;} */
/* .slide04 .slide-content .btn{ margin-top: 120px;} */
.slide-content .btn span{ display: inline-block; width: 18px; height: 18px; margin-left: 5px; background: url('../images/index/ximg11.png') no-repeat center; background-size: 100%; vertical-align: middle; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; position: relative;}
.slide-content .btn:hover span{ margin-left: 60px;}

.slide01 .slide-content{ width: 480px;}
.slide01 .hexagon{ position: absolute; top: 50%; left: 320px; width: 1046px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%)}

.product-list{height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex;}
.product-list li{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative;}
.product-list li:nth-child(2){ border-left: 1px solid #D5D5D5; border-right: 1px solid #D5D5D5;}
.product-list li .content{ position: absolute; bottom: 8%; left: 0; width: 100%; text-align: center;}
.product-list li .img{ position: absolute; top: 0; left: 0; width: 100%;}
.product-list li .num{ display: block; margin: 0 auto; width: 76px;}
.product-list li .name{ font-weight: 400; color: #3E82F1; font-size: 26px; margin: 40px 0 5px;}
.product-list li .info{ font-size: 16px; color: #666;}
.product-list li .btn{ display: block; width: 152px; line-height: 52px; color: #fff; font-size: 16px; margin: 70px auto 0; position: relative; background-color: #3e82f1; border-radius: 5px; z-index: 2; overflow: hidden;}
.product-list li .btn:after{content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #fff; z-index: -1; -webkit-transform: scale(0, 0) rotate(0); transform: scale(0, 0) rotate(0); opacity: 0; -webkit-transition: all .3s linear; transition: all .3s linear;}
.product-list li .btn:hover:after{ -webkit-transform: scale(1, 1) rotate(360deg); transform: scale(1, 1) rotate(360deg); opacity: .1;}

.brain{ width: 1708px; max-width: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.course{ position: absolute; top: 53%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.course .img{ display: block; width: 1506px; max-width: none;}

.slide06 .slide-content{ width: 540px;}
.slide06 .slide-content .info{ font-size: 18px; line-height: 1.8; text-align: justify;}

.cooperation{ width: 1280px; margin: 0 auto; overflow: hidden;}
.cooperation .title{ text-align: center; padding: 4% 0;}
.cooperation .title .cn{ color: #2C2E2F; font-size: 48px;}
.cooperation .title .en{ color: #7f8c8d; font-size: 24px;}
.coo-list{ margin: 0 -10px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.coo-list li{ width: 25%; padding: 0 10px; margin-bottom: 20px; }
.coo-list li img{ display: block; width: 100%; border: 1px solid #E3E3E3;}





.bottom-ask:before {
    background-color: rgba(0, 0, 0, .5);
}



.knowledge-box{ width: 1600px; height: 826px; margin: 0 auto; position: relative; background: url('../images/index/nao1.png') no-repeat center 160px;}

.knowledge{ position: absolute; font-size: 12px; color: #3E82F1; text-align: center; }
.knowledge .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff url('../images/index/nao2.png') no-repeat center; background-size: 100%; border-radius: 50%; overflow: hidden; animation: circle 3s linear infinite; -webkit-animation: circle 3s linear infinite; }
.knowledge:hover .bg{ -webkit-animation-play-state:paused; animation-play-state:paused;}
.knowledge .title{ position: absolute; top: 50%; left: 50%; width: 100%;  padding: 0 30px; font-weight: 700; line-height: 15px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); z-index: 99;}
.knowledge .info{ position: absolute; border: 1px solid #3E82F1; border-radius: 10px 0 10px 0; padding: 5px 10px; line-height: 15px; background-color: #fff; word-break: keep-all; z-index: 4;}
.knowledge .info:after{ content: ""; position: absolute; right: 0; bottom: 0; height: 1px; background-color: #3E82F1;}
.knowledge .info{ top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); opacity: 0; transition: all .3s linear; -webkit-transition: all .3s linear;}
.knowledge:hover .info{ opacity: 1; transform: translate(0, 0); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0);}
.knowledge1{ width: 120px; height: 120px; top: 134px; left: 134px;}
.knowledge1 .info:after{ width: 30px;}
.knowledge1:hover .info1{ top: -64px; left: -64px; }
.knowledge1 .info1:after{ transform: rotate(45deg) translate(24px, -10px); -webkit-transform: rotate(45deg) translate(24px, -10px); -moz-transform: rotate(45deg) translate(24px, -10px); -ms-transform: rotate(45deg) translate(24px, -10px); -o-transform: rotate(45deg) translate(24px, -10px);}
.knowledge1:hover .info2{ top: -84px; left: 26px; }
.knowledge1 .info2:after{ transform: rotate(110deg) translate(19px, 10px); -webkit-transform: rotate(110deg) translate(19px, 10px); -moz-transform: rotate(110deg) translate(19px, 10px); -ms-transform: rotate(110deg) translate(19px, 10px); -o-transform: rotate(110deg) translate(19px, 10px);}
.knowledge1:hover .info3{ top: -64px; left: 108px; }
.knowledge1 .info3:after{ transform: rotate(-45deg) translate(-46px, -30px); -webkit-transform: rotate(-45deg) translate(-46px, -30px); -moz-transform: rotate(-45deg) translate(-46px, -30px); -ms-transform: rotate(-45deg) translate(-46px, -30px); -o-transform: rotate(-45deg) translate(-46px, -30px);}
.knowledge1:hover .info4{ top: -3px; left: 145px; }
.knowledge1 .info4:after{ transform: rotate(-30deg) translate(-53px, -42px); -webkit-transform: rotate(-30deg) translate(-53px, -42px); -moz-transform: rotate(-30deg) translate(-53px, -42px); -ms-transform: rotate(-30deg) translate(-53px, -42px); -o-transform: rotate(-30deg) translate(-53px, -42px);}
.knowledge1:hover .info5{ top: 64px; left: 146px; }
.knowledge1 .info5:after{ transform: rotate(10deg) translate(-74px, -30px); -webkit-transform: rotate(10deg) translate(-74px, -30px); -moz-transform: rotate(10deg) translate(-74px, -30px); -ms-transform: rotate(10deg) translate(-74px, -30px); -o-transform: rotate(10deg) translate(-74px, -30px);}
.knowledge1:hover .info6{ top: 127px; left: 99px; }
.knowledge1 .info6:after{ transform: rotate(50deg) translate(-80px, -8px); -webkit-transform: rotate(50deg) translate(-80px, -8px); -moz-transform: rotate(50deg) translate(-80px, -8px); -ms-transform: rotate(50deg) translate(-80px, -8px); -o-transform: rotate(50deg) translate(-80px, -8px);}
.knowledge1:hover .info7{ top: 150px; left: 18px; }
.knowledge1 .info7:after{ transform: rotate(85deg) translate(-72px, 8px); -webkit-transform: rotate(85deg) translate(-72px, 8px); -moz-transform: rotate(85deg) translate(-72px, 8px); -ms-transform: rotate(85deg) translate(-72px, 8px); -o-transform: rotate(85deg) translate(-72px, 8px);}
.knowledge1:hover .info8{ top: 125px; left: -58px; }
.knowledge1 .info8:after{ transform: rotate(-45deg) translate(48px, -10px); -webkit-transform: rotate(-45deg) translate(48px, -10px); -moz-transform: rotate(-45deg) translate(48px, -10px); -ms-transform: rotate(-45deg) translate(48px, -10px); -o-transform: rotate(-45deg) translate(48px, -10px);}
.knowledge1:hover .info9{ top: 62px; left: -116px; }
.knowledge1 .info9:after{ transform: rotate(-5deg) translate(33px, -26px); -webkit-transform: rotate(-5deg) translate(33px, -26px); -moz-transform: rotate(-5deg) translate(33px, -26px); -ms-transform: rotate(-5deg) translate(33px, -26px); -o-transform: rotate(-5deg) translate(33px, -26px);}
.knowledge1:hover .info10{ top: -2px; left: -120px; }
.knowledge1 .info10:after{ transform: rotate(8deg) translate(28px, -14px); -webkit-transform: rotate(8deg) translate(28px, -14px); -moz-transform: rotate(8deg) translate(28px, -14px); -ms-transform: rotate(8deg) translate(28px, -14px); -o-transform: rotate(8deg) translate(28px, -14px);}

.knowledge2{ width: 120px; height: 120px; top: 108px; left: 560px;}
.knowledge2 .info:after{ width: 20px;}
.knowledge2:hover .info1{ top: -20px; left: -64px; }
.knowledge2 .info1:after{ transform: rotate(45deg) translate(15px, -8px); -webkit-transform: rotate(45deg) translate(15px, -8px); -moz-transform: rotate(45deg) translate(15px, -8px); -ms-transform: rotate(45deg) translate(15px, -8px); -o-transform: rotate(45deg) translate(15px, -8px);}
.knowledge2:hover .info2{ top: -47px; left: 27px; }
.knowledge2 .info2:after{ transform: rotate(90deg) translate(12px, 22px); -webkit-transform: rotate(90deg) translate(12px, 22px); -moz-transform: rotate(90deg) translate(12px, 22px); -ms-transform: rotate(90deg) translate(12px, 22px); -o-transform: rotate(90deg) translate(12px, 22px);}
.knowledge2:hover .info3{ top: -28px; left: 109px; }
.knowledge2 .info3:after{ transform: rotate(-45deg) translate(-60px, -49px); -webkit-transform: rotate(-45deg) translate(-60px, -49px); -moz-transform: rotate(-45deg) translate(-60px, -49px); -ms-transform: rotate(-45deg) translate(-60px, -49px); -o-transform: rotate(-45deg) translate(-60px, -49px);}
.knowledge2:hover .info4{ top: 38px; left: 140px; }
.knowledge2 .info4:after{ transform: rotate(0) translate(-70px, -12px); -webkit-transform: rotate(0) translate(-70px, -12px); -moz-transform: rotate(0) translate(-70px, -12px); -ms-transform: rotate(0) translate(-70px, -12px); -o-transform: rotate(0) translate(-70px, -12px);}
.knowledge2:hover .info5{ top: 95px; left: 123px; }
.knowledge2 .info5:after{ transform: rotate(45deg) translate(-75px, 12px); -webkit-transform: rotate(45deg) translate(-75px, 12px); -moz-transform: rotate(45deg) translate(-75px, 12px); -ms-transform: rotate(45deg) translate(-75px, 12px); -o-transform: rotate(45deg) translate(-75px, 12px);}
.knowledge2:hover .info6{ top: 140px; left: 30px; }
.knowledge2 .info6:after{ transform: rotate(90deg) translate(-51px, 16px); -webkit-transform: rotate(90deg) translate(-51px, 16px); -moz-transform: rotate(90deg) translate(-51px, 16px); -ms-transform: rotate(90deg) translate(-51px, 16px); -o-transform: rotate(90deg) translate(-51px, 16px);}
.knowledge2:hover .info7{ top: 100px; left: -53px; }
.knowledge2 .info7:after{ transform: rotate(-45deg) translate(46px, -21px); -webkit-transform: rotate(-45deg) translate(46px, -21px); -moz-transform: rotate(-45deg) translate(46px, -21px); -ms-transform: rotate(-45deg) translate(46px, -21px); -o-transform: rotate(-45deg) translate(46px, -21px);}
.knowledge2:hover .info8{ top: 38px; left: -89px; }
.knowledge2 .info8:after{ transform: rotate(5deg) translate(20px, -15px); -webkit-transform: rotate(5deg) translate(20px, -15px); -moz-transform: rotate(5deg) translate(20px, -15px); -ms-transform: rotate(5deg) translate(20px, -15px); -o-transform: rotate(5deg) translate(20px, -15px);}

.knowledge3{ width: 120px; height: 120px; top: 172px; right: 552px;}
.knowledge3 .info:after{ width: 20px;}
.knowledge3:hover .info1{ top: 15px; left: -85px; }
.knowledge3 .info1:after{ transform: rotate(15deg) translate(18px, -6px); -webkit-transform: rotate(15deg) translate(18px, -6px); -moz-transform: rotate(15deg) translate(18px, -6px); -ms-transform: rotate(15deg) translate(18px, -6px); -o-transform: rotate(15deg) translate(18px, -6px);}
.knowledge3:hover .info2{ top: -46px; left: 20px; }
.knowledge3 .info2:after{ transform: rotate(90deg) translate(11px, 24px); -webkit-transform: rotate(90deg) translate(11px, 24px); -moz-transform: rotate(90deg) translate(11px, 24px); -ms-transform: rotate(90deg) translate(11px, 24px); -o-transform: rotate(90deg) translate(11px, 24px);}
.knowledge3:hover .info3{ top: 18px; left: 138px; }
.knowledge3 .info3:after{ transform: rotate(-16deg) translate(-67px, -15px); -webkit-transform: rotate(-16deg) translate(-67px, -15px); -moz-transform: rotate(-16deg) translate(-67px, -15px); -ms-transform: rotate(-16deg) translate(-67px, -15px); -o-transform: rotate(-16deg) translate(-67px, -15px);}
.knowledge3:hover .info4{ top: 116px; left: 110px; }
.knowledge3 .info4:after{ transform: rotate(45deg) translate(-66px, 22px); -webkit-transform: rotate(45deg) translate(-66px, 22px); -moz-transform: rotate(45deg) translate(-66px, 22px); -ms-transform: rotate(45deg) translate(-66px, 22px); -o-transform: rotate(45deg) translate(-66px, 22px);}
.knowledge3:hover .info5{ top: 120px; left: -61px; }
.knowledge3 .info5:after{ transform: rotate(-45deg) translate(35px, -11px); -webkit-transform: rotate(-45deg) translate(35px, -11px); -moz-transform: rotate(-45deg) translate(35px, -11px); -ms-transform: rotate(-45deg) translate(35px, -11px); -o-transform: rotate(-45deg) translate(35px, -11px);}

.knowledge4{ width: 120px; height: 120px; top: 44px; right: 204px;}
.knowledge4 .info:after{ width: 20px;}
.knowledge4:hover .info1{ top: 32px; left: -88px; }
.knowledge4 .info1:after{ transform: rotate(0deg) translate(20px, -20px); -webkit-transform: rotate(0deg) translate(20px, -20px); -moz-transform: rotate(0deg) translate(20px, -20px); -ms-transform: rotate(0deg) translate(20px, -20px); -o-transform: rotate(0deg) translate(20px, -20px);}
.knowledge4:hover .info2{ top: 32px; left: 138px; }
.knowledge4 .info2:after{ transform: rotate(0deg) translate(-68px, -20px); -webkit-transform: rotate(0deg) translate(-68px, -20px); -moz-transform: rotate(0deg) translate(-68px, -20px); -ms-transform: rotate(0deg) translate(-68px, -20px); -o-transform: rotate(0deg) translate(-68px, -20px);}

.knowledge5{ width: 120px; height: 120px;top: 582px;right: 79px;}
.knowledge5 .info:after{ width: 20px;}
.knowledge5:hover .info1{ top: 122px; left: -59px; }
.knowledge5 .info1:after{ transform: rotate(-45deg) translate(46px, -20px); -webkit-transform: rotate(-45deg) translate(46px, -20px); -moz-transform: rotate(-45deg) translate(46px, -20px); -ms-transform: rotate(-45deg) translate(46px, -20px); -o-transform: rotate(-45deg) translate(46px, -20px);}
.knowledge5:hover .info2{ top: -66px; left: 72px; }
.knowledge5 .info2:after{ transform: rotate(-56deg) translate(-27px, -22px); -webkit-transform: rotate(-56deg) translate(-27px, -22px); -moz-transform: rotate(-56deg) translate(-27px, -22px); -ms-transform: rotate(-56deg) translate(-27px, -22px); -o-transform: rotate(-56deg) translate(-27px, -22px);}

.knowledge6{ width: 150px; height: 150px;top: 257px;right: 81px;}
.knowledge6 .info:after{ width: 20px;}
.knowledge6:hover .info1{ top: -63px; left: 32px; }
.knowledge6 .info1:after{ transform: rotate(-90deg) translate(-12px, -22px); -webkit-transform: rotate(-90deg) translate(-12px, -22px); -moz-transform: rotate(-90deg) translate(-12px, -22px); -ms-transform: rotate(-90deg) translate(-12px, -22px); -o-transform: rotate(-90deg) translate(-12px, -22px);}
.knowledge6:hover .info2{ top: -1px; left: 164px; }
.knowledge6 .info2:after{ transform: rotate(-27deg) translate(-69px, -40px); -webkit-transform: rotate(-27deg) translate(-69px, -40px); -moz-transform: rotate(-27deg) translate(-69px, -40px); -ms-transform: rotate(-27deg) translate(-69px, -40px); -o-transform: rotate(-27deg) translate(-69px, -40px);}
.knowledge6:hover .info3{ top: 97px; left: 159px; }
.knowledge6 .info3:after{ transform: rotate(12deg) translate(-72px, -10px); -webkit-transform: rotate(12deg) translate(-72px, -10px); -moz-transform: rotate(12deg) translate(-72px, -10px); -ms-transform: rotate(12deg) translate(-72px, -10px); -o-transform: rotate(12deg) translate(-72px, -10px);}
.knowledge6:hover .info4{ top: 171px; left: 37px; }
.knowledge6 .info4:after{ transform: rotate(90deg) translate(-66px, 29px); -webkit-transform: rotate(90deg) translate(-66px, 29px); -moz-transform: rotate(90deg) translate(-66px, 29px); -ms-transform: rotate(90deg) translate(-66px, 29px); -o-transform: rotate(90deg) translate(-66px, 29px);}
.knowledge6:hover .info5{ top: 99px; left: -81px; }
.knowledge6 .info5:after{ transform: rotate(164deg) translate(-27px, 22px); -webkit-transform: rotate(164deg) translate(-27px, 22px); -moz-transform: rotate(164deg) translate(-27px, 22px); -ms-transform: rotate(164deg) translate(-27px, 22px); -o-transform: rotate(164deg) translate(-27px, 22px);}
.knowledge6:hover .info6{ top: 7px; left: -95px; }
.knowledge6 .info6:after{ transform: rotate(198deg) translate(-18px, 8px); -webkit-transform: rotate(198deg) translate(-18px, 8px); -moz-transform: rotate(198deg) translate(-18px, 8px); -ms-transform: rotate(198deg) translate(-18px, 8px); -o-transform: rotate(198deg) translate(-18px, 8px);}

.knowledge7{ width: 150px; height: 150px;top: 503px;right: 358px;}
.knowledge7 .info:after{ width: 20px;}
.knowledge7:hover .info1{ top: 139px; left: -64px; }
.knowledge7 .info1:after{ transform: rotate(-41deg) translate(34px, -12px); -webkit-transform: rotate(-41deg) translate(34px, -12px); -moz-transform: rotate(-41deg) translate(34px, -12px); -ms-transform: rotate(-41deg) translate(34px, -12px); -o-transform: rotate(-41deg) translate(34px, -12px);}
.knowledge7:hover .info2{ top: -6px; left: -55px; }
.knowledge7 .info2:after{ transform: rotate(36deg) translate(16px, -10px); -webkit-transform: rotate(36deg) translate(16px, -10px); -moz-transform: rotate(36deg) translate(16px, -10px); -ms-transform: rotate(36deg) translate(16px, -10px); -o-transform: rotate(36deg) translate(16px, -10px);}
.knowledge7:hover .info3{ top: -10px; left: 148px; }
.knowledge7 .info3:after{ transform: rotate(144deg) translate(41px, 22px); -webkit-transform: rotate(144deg) translate(41px, 22px); -moz-transform: rotate(144deg) translate(41px, 22px); -ms-transform: rotate(144deg) translate(41px, 22px); -o-transform: rotate(144deg) translate(41px, 22px);}
.knowledge7:hover .info4{ top: 134px; left: 140px; }
.knowledge7 .info4:after{ transform: rotate(203deg) translate(58px, 5px); -webkit-transform: rotate(203deg) translate(58px, 5px); -moz-transform: rotate(203deg) translate(58px, 5px); -ms-transform: rotate(203deg) translate(58px, 5px); -o-transform: rotate(203deg) translate(58px, 5px);}

.knowledge8{ width: 120px; height: 120px;top: 395px;left: 310px;}
.knowledge8 .info:after{ width: 20px;}
.knowledge8:hover .info1{ top: 45px; left: -90px; }
.knowledge8 .info1:after{ transform: rotate(0deg) translate(21px, -14px); -webkit-transform: rotate(0deg) translate(21px, -14px); -moz-transform: rotate(0deg) translate(21px, -14px); -ms-transform: rotate(0deg) translate(21px, -14px); -o-transform: rotate(0deg) translate(21px, -14px);}
.knowledge8:hover .info2{ top: 140px; left: 42px; }
.knowledge8 .info2:after{ transform: rotate(90deg) translate(-36px, 10px); -webkit-transform: rotate(90deg) translate(-36px, 10px); -moz-transform: rotate(90deg) translate(-36px, 10px); -ms-transform: rotate(90deg) translate(-36px, 10px); -o-transform: rotate(90deg) translate(-36px, 10px);}
.knowledge8:hover .info3{ top: 39px; left: 140px; }
.knowledge8 .info3:after{ transform: rotate(0) translate(-69px, -10px); -webkit-transform: rotate(0) translate(-69px, -10px); -moz-transform: rotate(0) translate(-69px, -10px); -ms-transform: rotate(0) translate(-69px, -10px); -o-transform: rotate(0) translate(-69px, -10px);}
.knowledge8:hover .info4{ top: -48px; left: 40px; }
.knowledge8 .info4:after{ transform: rotate(-90deg) translate(-12px, -10px); -webkit-transform: rotate(-90deg) translate(-12px, -10px); -moz-transform: rotate(-90deg) translate(-12px, -10px); -ms-transform: rotate(-90deg) translate(-12px, -10px); -o-transform: rotate(-90deg) translate(-12px, -10px);}

.knowledge9{ width: 120px; height: 120px;top: 565px;left: 70px;}
.knowledge9 .info:after{ width: 20px;}
.knowledge9:hover .info1{ top: -50px; left: -8px; }
.knowledge9 .info1:after{ transform: rotate(66deg) translate(8px, 7px); -webkit-transform: rotate(66deg) translate(8px, 7px); -moz-transform: rotate(66deg) translate(8px, 7px); -ms-transform: rotate(66deg) translate(8px, 7px); -o-transform: rotate(66deg) translate(8px, 7px);}
.knowledge9:hover .info2{ top: 117px; left: 107px; }
.knowledge9 .info2:after{ transform: rotate(226deg) translate(58px, 7px); -webkit-transform: rotate(226deg) translate(58px, 7px); -moz-transform: rotate(226deg) translate(58px, 7px); -ms-transform: rotate(226deg) translate(58px, 7px); -o-transform: rotate(226deg) translate(58px, 7px);}


@keyframes flicker01{
    0% { transform: translate(-50%, -50%)}
    100% { transform: translate(-50%, -50%) scale(1.15, 1.15)}
}
@-webkit-keyframes flicker01{
    0% { transform: translate(-50%, -50%)}
    100% { transform: translate(-50%, -50%) scale(1.15, 1.15)}
}
@-moz-keyframes flicker01{
    0% { transform: translate(-50%, -50%)}
    100% { transform: translate(-50%, -50%) scale(1.15, 1.15)}
}
@-o-keyframes flicker01{
    0% { transform: translate(-50%, -50%)}
    100% { transform: translate(-50%, -50%) scale(1.15, 1.15)}
}
@keyframes flicker02{
    0% { transform: translate(-50%, -50%) scale(1, 1)}
    100% { transform: translate(-50%, -50%) scale(1.3, 1.3)}
}
@-webkit-keyframes flicker02{
    0% { transform: translate(-50%, -50%) scale(1, 1)}
    100% { transform: translate(-50%, -50%) scale(1.3, 1.3)}
}
@-moz-keyframes flicker02{
    0% { transform: translate(-50%, -50%) scale(1, 1)}
    100% { transform: translate(-50%, -50%) scale(1.3, 1.3)}
}
@-o-keyframes flicker02{
    0% { transform: translate(-50%, -50%) scale(1, 1)}
    100% { transform: translate(-50%, -50%) scale(1.3, 1.3)}
}
@keyframes elastic{
    0% { transform: translate(0, -20px)}
    25% { transform: translate(0, -10px)}
    50% { transform: translate(0, 0)}
    75% { transform: translate(0, 10px)}
    100% { transform: translate(0, 20px)}
}
@-webkit-keyframes elastic{
    0% { transform: translate(0, -20px)}
    25% { transform: translate(0, -10px)}
    50% { transform: translate(0, 0)}
    75% { transform: translate(0, 10px)}
    100% { transform: translate(0, 20px)}
}
@-moz-keyframes elastic{
    0% { transform: translate(0, -20px)}
    25% { transform: translate(0, -10px)}
    50% { transform: translate(0, 0)}
    75% { transform: translate(0, 10px)}
    100% { transform: translate(0, 20px)}
}
@-o-keyframes elastic{
    0% { transform: translate(0, -20px)}
    25% { transform: translate(0, -10px)}
    50% { transform: translate(0, 0)}
    75% { transform: translate(0, 10px)}
    100% { transform: translate(0, 20px)}
}

@keyframes circle{
    0% { transform: rotate(0)}
    100% { transform: rotate(360deg)}
}
@-webkit-keyframes circle{
    0% { transform: rotate(0)}
    100% { transform: rotate(360deg)}
}
@-moz-keyframes circle{
    0% { transform: rotate(0)}
    100% { transform: rotate(360deg)}
}
@-o-keyframes circle{
    0% { transform: rotate(0)}
    100% { transform: rotate(360deg)}
}