|
@@ -0,0 +1,446 @@
|
|
|
+.w1200{position:relative;}
|
|
|
+.w1024{width: 1024px;margin:0px auto;position:relative;}
|
|
|
+.btn{background-image: linear-gradient(to right,#2990e5, #3cd2f8);width:222px;height:56px;color:#fff;line-height:56px;text-align:center;display:block;font-size:24px;border-radius:4px;transition: all .3s;
|
|
|
+ -webkit-transition: all .3s;
|
|
|
+ -moz-transition: all .3s;
|
|
|
+ -ms-transition: all .3s;}
|
|
|
+.btn:hover{transform: translateY(-10px);
|
|
|
+ -webkit-transform: translateY(-10px);
|
|
|
+ -moz-transform: translateY(-10px);
|
|
|
+ -ms-transform: translateY(-10px);}
|
|
|
+
|
|
|
+.head{background:url(../img/bg1.png) center center no-repeat;background-size:100% 100%;height:581px;}
|
|
|
+.head .logolay{float:left;width:100%;margin-top:20px;}
|
|
|
+.head .logolay img{float:left;margin-right:20px;}
|
|
|
+.head .logolay span{float:left;height:40px;line-height:40px;font-size:26px;color:#fff;}
|
|
|
+.head .logolay ul{float:right;width:auto;height:40px;}
|
|
|
+.head .logolay ul li{float:left;margin-right:40px;height:40px;line-height:40px;font-size: 20px;color:#000;}
|
|
|
+.head .leftword{position:absolute;top:114px;width:500px;left:0px;}
|
|
|
+.head .leftword h1{float:left;color:#fff;font-size:44px;position:relative;}
|
|
|
+.head .leftword .word1{font-size:20px;float:left;color:#fff;width:100%;line-height:40px}
|
|
|
+.head .leftword .btn1{float:left;margin-top:30px;transition: all .3s;
|
|
|
+ -webkit-transition: all .3s;
|
|
|
+ -moz-transition: all .3s;
|
|
|
+ -ms-transition: all .3s;font-size:34px;border-radius:43px;width:364px;height:86px;text-align:center;line-height:86px;background-color:#fff;color:#347aeb;}
|
|
|
+.head .leftword .btn1:hover{transform: translateY(-10px);
|
|
|
+ -webkit-transform: translateY(-10px);
|
|
|
+ -moz-transform: translateY(-10px);
|
|
|
+ -ms-transform: translateY(-10px);}
|
|
|
+.head .leftword .word2{float:left;width:100%;font-size:14px;color:#eee;margin-top:10px;}
|
|
|
+.head .rightgif{position:absolute;top:114px;right:-24px;cursor:pointer;width:500px;}
|
|
|
+
|
|
|
+
|
|
|
+.btnactive{position:relative;overflow:hidden;}
|
|
|
+.btnactive:before{content:"";position:absolute;width:200%;height:525%;left:0%;top:0%;margin-left:-50%;margin-top:-50%;border-radius:50%; background: rgba(0, 0, 0, .1); animation: spread 1.5s infinite both;
|
|
|
+ -webkit-animation: spread 1.5s infinite both;
|
|
|
+ -moz-animation: spread 1.5s infinite both;
|
|
|
+ -o-animation: spread 1.5s infinite both;}
|
|
|
+
|
|
|
+ @keyframes spread {
|
|
|
+ 0% {
|
|
|
+ transform: scale(0);
|
|
|
+ -webkit-transform: scale(0);
|
|
|
+ -moz-transform: scale(0);
|
|
|
+ transform: scale(0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ -webkit-transform: scale(1);
|
|
|
+ -moz-transform: scale(1);
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes spread {
|
|
|
+ 0% {
|
|
|
+ transform: scale(0);
|
|
|
+ -webkit-transform: scale(0);
|
|
|
+ -moz-transform: scale(0);
|
|
|
+ transform: scale(0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ -webkit-transform: scale(1);
|
|
|
+ -moz-transform: scale(1);
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-moz-keyframes spread {
|
|
|
+ 0% {
|
|
|
+ transform: scale(0);
|
|
|
+ -webkit-transform: scale(0);
|
|
|
+ -moz-transform: scale(0);
|
|
|
+ transform: scale(0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ -webkit-transform: scale(1);
|
|
|
+ -moz-transform: scale(1);
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-o-keyframes spread {
|
|
|
+ 0% {
|
|
|
+ transform: scale(0);
|
|
|
+ -webkit-transform: scale(0);
|
|
|
+ -moz-transform: scale(0);
|
|
|
+ transform: scale(0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ -webkit-transform: scale(1);
|
|
|
+ -moz-transform: scale(1);
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+.nav{display: none;}
|
|
|
+.w1024{ width: 1200px; }
|
|
|
+body .nav{ display: block; top: 5px; }
|
|
|
+.nav .nav-link li{padding: 12px 0;}
|
|
|
+.head .logolay span{font-size: 28px;font-weight: 400;line-height: 38px;height: 38px;}
|
|
|
+.head .logolay img{ width: 38px;height: 38px; }
|
|
|
+.head .logolay {margin-top: 0;line-height:1;padding-top: 25px;}
|
|
|
+.head .rightgif{ width: 50%; right: 0;}
|
|
|
+.head .leftword h1{font-size: 46px;font-weight: 600; color: white; margin-bottom: 17px;}
|
|
|
+.head .leftword{ width: 45.5%; }
|
|
|
+.head .leftword .word1{font-size: 21px; font-weight: 400; color: white; line-height: 48px; margin-bottom: 40px;}
|
|
|
+.head .leftword>span{font-size: 24px !important;white-space: nowrap;top: 309px !important;left: 355px !important;}
|
|
|
+.head .leftword .btn1{ width: 330px; }
|
|
|
+.head .leftword>span em{color: #fff600 !important;}
|
|
|
+.head{height: 643px;}
|
|
|
+
|
|
|
+@media screen and (max-width:1201px) {
|
|
|
+ body{ min-width: 100%; }
|
|
|
+ .w1024,.icos .ico{ width: 1024px; }
|
|
|
+ .wordbg3 .pian{margin-bottom: 0;}
|
|
|
+}
|
|
|
+
|
|
|
+.nav {
|
|
|
+ position:absolute;right:0px;top:9px;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-link li {
|
|
|
+ padding: 5px 0;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-link li+li {
|
|
|
+ margin-left: 70px;position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-link li a {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 48px;
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-link li a:hover {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-link li a:hover::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 50%;
|
|
|
+ left: 25%;
|
|
|
+ height: 4px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-link li+li::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: -32px;
|
|
|
+ height: 20px;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -10px;
|
|
|
+ border-left: 1px solid #EDEDED;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/**** ***/
|
|
|
+.contit {
|
|
|
+ font-size: 2.5rem;
|
|
|
+ margin: 0 0 3rem;
|
|
|
+ line-height: 3rem;
|
|
|
+ font-weight: 400;
|
|
|
+ letter-spacing: 0.1em;
|
|
|
+ position: relative
|
|
|
+}
|
|
|
+
|
|
|
+.contit:before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 100px;
|
|
|
+ height: 4px;
|
|
|
+ background: #007fff;
|
|
|
+ left: 50%;
|
|
|
+ bottom: -2rem;
|
|
|
+ -webkit-transform: translate(-50%, 0);
|
|
|
+ -moz-transform: translate(-50%, 0);
|
|
|
+ -ms-transform: translate(-50%, 0);
|
|
|
+ -o-transform: translate(-50%, 0);
|
|
|
+ transform: translate(-50%, 0)
|
|
|
+}
|
|
|
+.conbox {
|
|
|
+ padding: 4rem 0;
|
|
|
+ text-align: center
|
|
|
+}
|
|
|
+
|
|
|
+#index-skill .skill-box {
|
|
|
+ padding: 2rem 0;
|
|
|
+ flex-wrap: wrap
|
|
|
+}
|
|
|
+
|
|
|
+#index-skill dl {
|
|
|
+ width: calc(25% - 12px);
|
|
|
+ padding: 2.5rem 0;
|
|
|
+ margin: 6px;
|
|
|
+ background: #3892fc;
|
|
|
+ box-shadow: 0 3px 6px rgba(0, 64, 128, 0.08);
|
|
|
+ cursor: pointer
|
|
|
+}
|
|
|
+
|
|
|
+#index-skill dl:hover, #index-skill dl:focus {
|
|
|
+ transform: scale(1.05);
|
|
|
+ box-shadow: 0 0px 24px rgba(0, 64, 128, 0.16)
|
|
|
+}
|
|
|
+
|
|
|
+#index-skill dl dd {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 1.25rem;
|
|
|
+ padding: 0.5rem 0
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/****/
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.titleh2css {
|
|
|
+ height: 46px;
|
|
|
+ font-size: 36px;
|
|
|
+ font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1F2227;
|
|
|
+ line-height: 42px;
|
|
|
+ margin-top: 80px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* whyChoiceUs */
|
|
|
+
|
|
|
+.whyChoiceUs {
|
|
|
+ height: 658px;
|
|
|
+ background: #F7F8FA;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.whylist {
|
|
|
+ width: 1200px;
|
|
|
+ height: auto;
|
|
|
+ margin: 70px auto 0 auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.whyitems {
|
|
|
+ width: 344px;
|
|
|
+ height: 372px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 8px 30px 0px rgba(12, 51, 152, 0.08);
|
|
|
+ border-radius: 16px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.whyitems>img {
|
|
|
+ display: block;
|
|
|
+ width: 344px;
|
|
|
+ height: 230px;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.whyitems>h3 {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #1F2227;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-top: 24px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.whyitems>p {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #717F94;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-top: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/** **/
|
|
|
+
|
|
|
+
|
|
|
+.eboox {
|
|
|
+ height: 818px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.eboox>.titleh2css {
|
|
|
+ height: 46px;
|
|
|
+ font-size: 36px;
|
|
|
+ font-family: Microsoft YaHei UI-Bold, Microsoft YaHei UI;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1F2227;
|
|
|
+ line-height: 42px;
|
|
|
+ margin: 90px auto 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.eboox>h3 {
|
|
|
+ height: 29px;
|
|
|
+ font-size: 22px;
|
|
|
+ font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #78818E;
|
|
|
+ line-height: 26px;
|
|
|
+ margin-top: 20px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.ebooxbanner {
|
|
|
+ display: flex;
|
|
|
+ width: 1200px;
|
|
|
+ height: auto;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin: 115px auto 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.ebooxleft {
|
|
|
+ position: relative;
|
|
|
+ top: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.ebooxitem {
|
|
|
+ height: 120px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 43px;
|
|
|
+ border-left: none;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-left: 2px dashed rgba(22, 31, 45, 0);
|
|
|
+}
|
|
|
+
|
|
|
+.ebooxitem>i {
|
|
|
+ display: block;
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ position: absolute;
|
|
|
+ left: -21px;
|
|
|
+ right: auto;
|
|
|
+ top: -20px;
|
|
|
+ bottom: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.ebooxitem>.emsg {
|
|
|
+ width: 454px;
|
|
|
+ height: 120px;
|
|
|
+ border-radius: 16px 16px 16px 16px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 30px 0 24px;
|
|
|
+ top: -50px;
|
|
|
+}
|
|
|
+
|
|
|
+.ebooxitem:hover>.emsg , .ebooxitem.active>.emsg{
|
|
|
+ background: linear-gradient(138deg, #3593FF 0%, #267DFF 100%);
|
|
|
+ box-shadow: 0px 2px 14px 0px rgba(11, 89, 195, 0.36);
|
|
|
+ border-radius: 16px 16px 16px 16px;
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.ebooxitem>.emsg>h2 {
|
|
|
+ height: 29px;
|
|
|
+ font-size: 22px;
|
|
|
+ font-family: Microsoft YaHei-Bold, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3F4753;
|
|
|
+ line-height: 26px;
|
|
|
+}
|
|
|
+
|
|
|
+.ebooxitem:hover>.emsg>h2 ,.ebooxitem.active>.emsg>h2{
|
|
|
+ height: 29px;
|
|
|
+ font-size: 22px;
|
|
|
+ font-family: Microsoft YaHei-Bold, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 26px;
|
|
|
+}
|
|
|
+
|
|
|
+.ebooxitem>.emsg>p {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #585F67;
|
|
|
+ line-height: 19px;
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.ebooxitem:hover>.emsg>p,.ebooxitem.active>.emsg>p {
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+
|
|
|
+.zhinanrightimgshowbox {
|
|
|
+ width: 674px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.zhinanrightimgshowbox>img {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.zhinanrightimgshowbox>.img1.active {
|
|
|
+ display: block;
|
|
|
+ width: 590px;
|
|
|
+ height: 412px;
|
|
|
+ box-shadow: 2px 2px 6px #eee, -2px -2px 6px #eee;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.ebook-down-btn{
|
|
|
+ width: 230px !important;
|
|
|
+ height: 60px !important;
|
|
|
+ border-radius: 10px !important;
|
|
|
+ font-size: 24px !important;
|
|
|
+ line-height: 60px !important;
|
|
|
+}
|
|
|
+.ebook-down-btn span{
|
|
|
+ line-height: 60px !important;
|
|
|
+}
|