森中灵 最后提交于11月前 整理V8.0.6

/**************************************************************************************/
/* 布局（全局、导航、脚注） */
/**************************************************************************************/

/* [全局定义] */
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;} /* 关注 */