/**************************************************************************************/ /* 布局(全局、导航、脚注) */ /**************************************************************************************/ /* [全局定义] */ html{overflow-x:hidden;} body,table,td,div{font-size:14px;line-height:120%;} a,a:visited{color:#333;text-decoration:none;cursor:pointer;} a:active,a:hover{color:#008bd2;text-decoration:none;} a.blue,a.blue:visited{color:#0066cc;text-decoration:none;cursor:pointer;} a.blue:active,a.blue:hover{color:#0066cc;text-decoration:underline;} /* [顶导航] */ .topnav {position:fixed;top:0;left:0;width:100%;min-width:1250px;color: #fff;background-color:#00a2eb;height:55px;z-index:99;} .topnav .logo {float:left;width:60px;height:55px;line-height:55px;background-color:#008bd2;} .topnav .logoname {float:left;font-size:28px;width:240px;height:55px;line-height:52px;background-color:#00a2eb;color:#fff;padding-left:10px;border-right:1px solid #008bd2;} .topnav .topnavleft {float:left;height:55px;line-height:55px;} .topnav .topnavleft .nav {float:left;width:96px;height:55px;line-height:55px;font-size:16px;margin-right:5px;text-align:center;letter-spacing:2px;cursor:pointer;} .topnav .topnavleft .nav:hover{color:#fff;background-color:#008bd2;border-left:1px solid #0583cc;border-right:1px solid #0583cc;} .topnav .topnavleft .nav.active{color:#fff;background-color:#008bd2;border-left:1px solid #0583cc;border-right:1px solid #0583cc;} .topnav .topnavright {float:right;height:55px;} .topnav .topnavright .nav {float:left;height:55px;line-height:55px;font-size:14px;border-left:1px solid #008bd2;} .topnav .topnavright .nav:hover {background-color:#01a7f2; color:#fff;} .topnav .topnavright .query{float:left;width:300px;margin-right:15px;height:55px;line-height:50px;text-align:center;} .topnav .topnavright .query input{width:85%;color:#ffffff;border-bottom:1px solid #f5f5f5;border-top:0px;border-left:0px;border-right:0px; -webkit-box-shadow:none;-moz-box-shadow:none; box-shadow:none;background-color:transparent;} @media screen and (max-width:1430px){.topnav .topnavleft .nav {width:93px;}.topnav .topnavright .query{width:250px;}} @media screen and (max-width:1360px){.topnav .topnavleft .nav {width:88px;}.topnav .topnavright .query{width:200px;}} .topnav .topnavright .navcray {float:left;height:55px;line-height:55px;font-size:14px;border-left:1px solid #008bd2;background-color:#08c2c0;} .topnav .topnavright .navcray:hover {background-color:#1fcdcb; color:#fff;} /* [顶导航固定55px] */ .topnav-margin{position:relative;width:100%;height:55px;} /* [顶导航通知] */ .noticenum{position:absolute;top:0;right:8px;padding:0 2px;border-radius:50px;box-shadow:0 0 0 2px #ffffff;min-width:20px;line-height:20px;font-style:normal;background-color:#ff0000;color:#fff;font-size:12px;} /**************************************************************************************/ /* 首页分屏 */ /**************************************************************************************/ .sectiontitle{font-size:30px;margin-bottom:10px;font-weight:bold;} /* 区域 */ .section{position:relative;width:100%;height:600px;background-color:#f8f8f8;} .section .first, .section .second, .section .third, .section .fourth, .section .fifth, .section .sixth{position:absolute;margin:auto;top:0;left:0;bottom:0;right:0;width:100%;max-width:1250px;} /* 首屏 */ .section .first{height:550px;width:100%} .section .first .title{position:relative;margin:20px auto 0 auto;width:706px;height:84px;text-align:center;} .section .first .intro{padding:0 50px; display: -webkit-flex; /* Safari */ display: flex; flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;margin:80px auto 0 auto;color:#fff;} .section .first .intro button{border:1px solid #fff;background-color:transparent;border-radius:4px;color:#fff;font-size:16px;} .section .first .count{margin-top:50px;padding-right:40px;text-align:right;font-size:24px;color:#fff;} /* 第二屏 */ .section .second{height:550px;} .section .second .brief{margin-top:90px;padding-left:20px;} .section .second .brief a{color:#1e7eec;} /* 第三屏 */ .section .third{height:460px;} .section .third .producttitle{font-size:40px;margin-bottom:10px;font-weight:bold;} .section .third .productfont{font-size:18px;color:#555;} .section .third .productfont ul{margin-top:15px;} .section .third .productfont li{color:#555;line-height:38px;list-style:none;list-style-image: url(images/disc.png);list-style-position: inside;} .fadeInDown .z-float-left{ display : block !important; animation:fadeInDown 1s; /* Firefox: */ -moz-animation:fadeInDown 1s; /* Safari and Chrome: */ -webkit-animation:fadeInDown 1s; /* Opera: */ -o-animation:fadeInDown 1s;} @keyframes fadeInDown { 0% {opacity: 0;-webkit-transform: translate3d(0,-600px,0);transform: translate3d(0,-600px,0);} 100% {opacity: 1;-webkit-transform: none;transform: none;} } @-moz-keyframes fadeInDown /* Firefox */ { 0% {opacity: 0;-webkit-transform: translate3d(0,-600px,0);transform: translate3d(0,-600px,0);} 100% {opacity: 1;-webkit-transform: none;transform: none;} } @-webkit-keyframes fadeInDown /* Safari and Chrome */ { 0% {opacity: 0;-webkit-transform: translate3d(0,-600px,0);transform: translate3d(0,-600px,0);} 100% {opacity: 1;-webkit-transform: none;transform: none;} } @-o-keyframes fadeInDown /* Opera */ { 0% {opacity: 0;-webkit-transform: translate3d(0,-600px,0);transform: translate3d(0,-600px,0);} 100% {opacity: 1;-webkit-transform: none;transform: none;} } /* 第四屏 */ .section .fourth{height:460px;} .section .fourth .brief{margin-top:90px;padding-left:20px;} .section .fourth .brief a{color:#1e7eec;} .section .fourth .brief .corporate{font-size:30px;margin-bottom:10px;font-weight:bold;} /* 第五屏 */ .section .fifth{height:460px;} .section .fifth .brief{margin-top:110px;} .section .fifth .brief a{color:#1e7eec;} /* 第六屏 */ .section .sixth{height:460px;} .section .sixth .brief{margin-top:90px;} .section .sixth .brief a{color:#1e7eec;} /**************************************************************************************/ /* 容器内容 */ /**************************************************************************************/ /** [容器定义] */ .container {display: flex;width:100%;min-width:1250px;height:100%;min-height:1000px;overflow:hidden;background-color:#fff;} /* [左导航] */ .sidebar-top{position:relative;float:left;width:60px;height:100%;overflow:hidden; background-color:#333;z-index:20;padding-bottom: 9999px;margin-bottom: -9999px;} .sidebar-top li{position:relative;float:left;width:60px;height:70px;display:inline-block;text-align:center;color:#fff;padding:13px 0;line-height:22px;} .sidebar-top li:hover{background-color:#414750;cursor:pointer;} .sidebar-top li.active{background-color:#5c5c5c;} .sidebar-top li i{font-size:22px;} .sidebar-top .avatar{text-align:center;padding:16px 5px;cursor:pointer;} .sidebar-child{position:relative;margin-left:60px;width:240px;height:100%;overflow:hidden; background-color:#f2f2f2;border-right:1px solid #d8dce5;z-index:20;padding-bottom: 9999px;margin-bottom: -9999px;} .sidebar-child p{position:relative;float:left;width:240px; height:40px;line-height:40px;color:#333; padding-left:25px; background-color:#f2f2f2;cursor:pointer;} .sidebar-child p a{color:#333;} .sidebar-child p .f-arrow>span{border-color:#eff6fc transparent transparent;} .sidebar-child p:hover{background-color:#f2f1ed;color:#008bd2;} .sidebar-child p.active{background-color:#e4e3df;color:#008bd2;} .sidebar-child p:hover>.f-arrow>span{border-color:#333 transparent transparent;} .sidebar-child p.active>.f-arrow>span{border-color:#333 transparent transparent;} .sidebar-child ul{position:relative;width:240px;height:auto;overflow:hidden;} .sidebar-child ul li{float:left;width:240px;height:40px;color:#666;line-height:40px;padding-left:40px;cursor:pointer;} .sidebar-child ul li a{color:#666;} .sidebar-child ul li:hover{background-color:#f2f1ed; color:#008bd2;} .sidebar-child ul li.active{background-color:#e4e3df; color:#008bd2;} .sidebar-child .info{position:relative;width:100%;padding:25px;} .sidebar-child .coursenav{position:relative;width:100%;padding:20px;} .sidebar-child .coursenav a{width:95px;line-height:30px;display:inline-block;} .sidebar-child .coursenav a.active{color:#008bd2;display:inline-block;} .ueseroperate{position:relative;width:100%;overflow:hidden;padding-top:15px;min-height:200px; padding-left:25px;border-top:1px solid #e5e5e5;} .ueseroperate .operatemenu{position:relative;cursor: pointer;color: #999;height:40px;line-height:40px;} .ueseroperate .operatemenu:hover{color:#333;} /* 边导航用户信息 */ .sidebar-child .userinfo{position:relative;width:100%;padding:5px 20px 5px 20px;} .sidebar-child .recommend{position:relative;width:100%;padding:20px 20px 20px 20px;margin-top:20px;} /* [主体部分] */ .mainbody{position:relative;width:100%;} .mainbody .content{position:relative;float:left;width:100%;padding:25px;} .mainbody.componentBody{margin-left:60px;} /* 当前位置 */ .breadcrumb{position:relative;float:left;width:100%;padding-left:25px;} .scrolltotop{position:fixed;right:20px;bottom:20px;display:none;z-index:99999;border:1px solid #d3d3d3;padding:10px;cursor:pointer;} .scrolltotop:hover{background-color:#333;} /* 产品 */ .productwarp{position:relative;width:100%;padding-bottom:20px;border-bottom:1px dashed #ccc;margin-bottom:30px;overflow: hidden;} .productwarp .twoellipsis{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;} .productlist{position:relative;width:100%;padding:20px;margin-bottom:20px;border:1px solid #d8dce5;background-color:#fff;overflow: hidden;box-shadow:0px 0px 2px 2px #ebebeb;} .productlist:hover{box-shadow:0px 0px 3px 3px #ebebeb;} .projectlist-right{width:100%;padding-left:240px;margin-left:-200px;text-align:left;} /* 产品优势 */ .advantagelist{float:left;width:50%;padding:15px 10px;margin-bottom:20px;height:150px;} .advantagelist:nth-child(odd){padding-right:50px;} .advantagelist:nth-child(even){padding-left:50px;} .advantagelist .advantagelist-right{width:100%;padding-left:140px;margin-left:-140px;margin-top:25px;} .advantage{font-size:18px;color:#555;margin-top:40px;} .advantage li{color:#555;line-height:45px;list-style:none;list-style-image: url(images/disc.png);list-style-position: inside;} .dktitle{font-size:30px;margin-bottom:20px;} .dkadvantage{font-size:18px;color:#555;margin-top:40px;} .dkadvantage ul{margin-top:15px;} .dkadvantage li{color:#555;line-height:38px;list-style:none;list-style-image: url(images/disc.png);list-style-position: inside;} .twoellipsis{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;} /* [脚注] */ .footer {position:relative;width:100%;min-width:1250px;z-index:0;display:block;border-top:1px solid #e6e6e6;overflow:hidden;} .footer-wrap {margin:10px auto;height:160px;width:1250px;text-align:center;color:#333;font-size:14px;} .footer li {float:left;height:130px;margin:10px 20px 10px 0;text-align:left;line-height:30px;color:#888;} .footer li a {margin:10px;color:#888;} .footer li a:hover {color:#1e7eec;} .footer li.fproduct{width:180px;margin-left:30px;} .footer li.fhelp{width:222px;} .footer li.fabout{width:190px;} .footer li.abountus {width:300px;} .footer li.fproduct,.footer li.fhelp,.footer li.fabout{border-right:1px dashed #ccc;} @media screen and (max-width: 1071px) { .footer li.fproduct{width:140px;} .footer li.fhelp{width:180px;} .footer li.fabout{width:150px;} .footer li.abountus {width:280px;} } .footer-cp {position:relative;width:100%;min-width:1250px;height:85px;line-height:85px;background-color:#eee;overflow:hidden;} .footer-cp-wrap{position:relative;margin:0 auto;width:1250px;height:85px;z-index:0;display:block;overflow:hidden;} .footer-cp .footer-text{width:1250px;height:85px;line-height:85px;text-align:center;} @media screen and (max-width: 1071px) { .footer-cp-wrap{width:1000px;} .footer-cp .footer-text{width:1000px;margin-left:-100px;} } /* 指南标题 */ .tutorial.title {position:relative;float:left;font-size:20px;font-weight:bold;color:#555;width:100%;height:45px;margin-top:30px;margin-bottom:30px;line-height:45px;border-bottom:1px solid #e7e7e7;} .tutorial.title .right{float:right;} /* 指南内部标题 */ .tutorial.ctitle {position:relative;float:left;font-size:18px !important; color:#444;width:100%;height:25px;line-height:40px;} .tutorial.ctitle .right{float:right;} /* 指南内部内容 */ .tutorial.csamp{display:table-cell; background-color:#f8f8f8; font-size:13px !important; padding:6px !important; line-height:1.42857143 !important;} .tutorial.ccontent{position:relative;font-size:18px !important; color:#555;width:100%;line-height:25px; margin-top:40px;} /* 功能列表 */ .tutorial header {font-size:28px;font-weight:700;line-height:200%;} .tutorial li {list-style-type:disc;line-height:180%;margin-left:25px;margin-bottom:10px;} .tutorial.decimal li {list-style-type:decimal;} /* 功能链接 */ .tutorial.feature {font-size:16px;} .tutorial.feature a{color:#08c;text-decoration:none;} .tutorial.feature a:hover{text-decoration:underline;} /* 右边浮动图标 */ .fixedright{position:fixed;top:120px;right:25px;width:60px;background-color:#fff;border:1px solid #d5d5d5;border-bottom:0;} .fixedright li{background-color:#fff;text-align:center;padding:10px 0;border-bottom:1px solid #d5d5d5;cursor:pointer;color:#999;} .fixedright li:hover{background-color:#f8f8f8;color:#00a2eb;} /** 定义右边浮动图标 */ .fixedicon{display:inline-block;width:24px;height:24px;vertical-align: middle;background-image:url(/zinc/www/images/fixicon.png);background-repeat: no-repeat;} .collection{background-position:0 0;} /* 收藏 */ .consultant{background-position:0 -24px;} /* 客服咨询 */ .wechat{background-position:0 -48px;} /* 微信 */ .microblog{background-position:0 -72px;} /* 微博 */ .qq{background-position:0 -96px;} /* qq */ .praise{background-position:0 -120px;} /* 点赞 */ .copy{background-position:0 -144px;} /* 复制 */ .follow{background-position:0 -168px;} /* 关注 */ li:hover .collection{background-position:-24px 0;} /* 收藏 */ li:hover .consultant{background-position:-24px -24px;} /* 客服咨询 */ li:hover .wechat{background-position:-24px -48px;} /* 微信 */ li:hover .microblog{background-position:-24px -72px;} /* 微博 */ li:hover .qq{background-position:-24px -96px;} /* qq */ li:hover .praise{background-position:-24px -120px;} /* 点赞 */ li:hover .copy{background-position:-24px -144px;} /* 复制 */ li:hover .follow{background-position:-24px -168px;} /* 关注 */