@charset "utf-8";

/* frame */
body .wrap{
    margin: 0 auto;
    overflow: hidden;
}
a { transition:all 0.5s;}
body{min-width: 1400px;font-weight:400;background: #f8f8f8;}
.clear{clear: both;}
#content{zoom: 1;width: 100%;}
.row{width: 1400px; margin: auto; position: relative;}
.row:after{ content:""; height: 0; line-height: 0; font-size: 0; clear:both; display:block; overflow:hidden;}

.rowTi {text-align:left; margin-bottom: 20px;padding:10px; line-height: 40px; height: auto;}
.rowTi h2 {position: relative; z-index: 1; display: inline-block; font-size:40px; line-height: 1.6; padding-bottom: 10px; font-weight:bold; color:#2C306E; opacity:0; transform:translateY(100px); transition:all 1s; }
@keyframes expand {
    0% {
        width: 0;
        left: 50%;
    }
    100% {
        width: 100%;
        left: 0;
    }
}
.rowTi h2::after {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 0;
    content: "";
    width: 0;
    height: 5px;
    background: linear-gradient(to right, transparent, #2765F6, transparent);
}
.rowTi h2.animated::after{
    animation: expand 1s ease forwards;
    animation-delay: 0.6s; 
}
#header { display: none;}
#header-banner {
    position: relative;
    width: 100%;
    height: 632px;
    background: #f8f8f8 url(../img/banner.jpg) no-repeat center bottom;
    background-size: cover;
}
#header-banner .row{
    height: 100%;
}
#header-banner .logo {
    display: block;
    width: 238px;
    height: 50px;
    float: left;
    overflow: visible;
    margin: 41px 0 100px;
}
#header-banner .logo img {
    height: 100%;
    width: auto;
}
#header-banner .links {
    height: 36px;
    position: absolute;
    top: 49px;
    right: 0;
}
#header-banner .links a {
    height: 36px;
    border-radius: 18px;
    line-height: 36px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    float: left;
    padding: 0 1.5em;
    margin-left: 10px;
    border: 1px solid white;
}
#header-banner .links a:hover {
    color: #2C306E;
    background: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#EEFCFF));
    background: -moz-linear-gradient(#ffffff, #EEFCFF);
    background: -ms-linear-gradient(#ffffff, #EEFCFF);
    background: -o-linear-gradient(#ffffff, #EEFCFF);
    background: linear-gradient(#ffffff, #EEFCFF);
}

/* banner-文字位置 */
#header-banner .banner-txt{
    position: absolute;
    z-index: 0;
    left: 0;
    top: 220px;
}
#header-banner .title{
    margin-top: -50px;
    margin-bottom: 15px;
    font-size: 70px;
    line-height: 92px;
    font-weight: bold;
    color: white;
}
#header-banner .tip{
    text-align: center;
    font-size: 18px;
    color: #BED7FF;
}
/* banner-图片位置 */
#header-banner .banner-pic{
    width: 633px;
    height: 426px;
    position: absolute;
    right: 0;
    top: 164px;
}
#header-banner .bg{
    position: absolute;
    z-index: 1;
    float: left;
    overflow: hidden;
    background-position: center top;
    background-repeat: no-repeat;
}
#header-banner .bg-table{
    width: 633px;
    height: 91px;
    bottom: 0;
    right: 0;
    background-image:  url(../img/banner-1.png);
}
#header-banner .bg-keyboard{
    width: 310px;
    height: 54px;
    right: 161px;
    bottom: 16px;
    background-image:  url(../img/banner-2.png);
}
#header-banner .bg-pc{
    right: 144px;
    bottom: 74px;
    width: 351px;
    height: 250px;
    background-image:  url(../img/banner-3.png);
}
#header-banner .icon{
    position: absolute;
    z-index: 2;
    float: left;
    overflow: hidden;
    background-position: center top;
    background-repeat: no-repeat;
}
#header-banner .icon-letter{
    top: 35px;
    right: 470px;
    width: 92px;
    height: 52px;
    background-image: url(../img/banner-icon-1.png);
}
.icon-code{
    top: 132px;
    right: 432px;
    width: 128px;
    height: 60px;
    background-image: url(../img/banner-icon-2.png);
}
.icon-notes-yellow{
    bottom: 122px;
    right: 438px;
    width: 59px;
    height: 55px;
    background-image: url(../img/banner-icon-3.png);
}
.icon-notes-blue{
    bottom: 155px;
    right: 104px;
    width: 57px;
    height: 53px;
    background-image: url(../img/banner-icon-6.png);
}
.icon-notes-green{
    bottom: 103px;
    right: 145px;
    width: 57px;
    height: 53px;
    background-image: url(../img/banner-icon-7.png);
}
.icon-video{
    top: 0;
    right: 145px;
    width: 97px;
    height: 72px;
    background-image: url(../img/banner-icon-4.png);
}
.icon-note{
    top: 78px;
    right: 20px;
    width: 106px;
    height: 104px;
    background-image: url(../img/banner-icon-5.png);
}

/* 背景图片 */
.bg-one{
    background: #fff url(../img/bg-1.jpg) center bottom no-repeat;
    background-size: cover;
}

/* 通用框 */
.row-info{
    display: flex;
    align-items: center;
}
.row-info .row-bg{
    display: flex;
    justify-content: center;
    align-items: center;
}
.row-info .row-con{
    flex: 1;
}

/* 模板引擎 */
#box-engine{
    padding: 120px 0;
}
#box-engine .row-bg{
    width: calc(100% - 844px);
}
.icon-engine{
    width: 377px;
    height: 350px;
    background:  url(../img/icon-engine.png) center center no-repeat;
}
/* 模板管理与模板编辑 */
#box-edit{
    padding-bottom: 60px;
}

/* 模板历史记录 */
#box-history{
    padding: 100px 0 90px;
    background-color: #fff;
}
.icon-history{
    margin: 0 186px 0 124px;
    width: 487px;
    height: 409px;
    background:  url(../img/icon-history.png) center top no-repeat;
}


/* 模板方案管理 */
#box-scheme{
    padding: 90px 0;
    background-color: #F8F9FA;
}
#box-scheme .row-bg{
    order: 2;
}
.icon-scheme{
    margin: 0 98px 0 100px;
    width: 415px;
    height: 397px;
    background:  url(../img/icon-scheme.png) center top no-repeat;
}


/* 信息列表 */
.info-box{
    font-size: 16px;
    line-height: 32px;
    text-align: justify;
}
.info-box p{
    margin: 9px 0;
    text-indent: 2em;
}
.info-box .more{
    padding: 0 20px;
    margin-top: 20px;
    width: auto;
    height: 40px;
    line-height: 40px;
    float: left;
    font-size: 16px;
    color: white;
    background: -webkit-gradient(linear,0 0,0 100%,from(#3775FF),to(#5862ff));
    background: -moz-linear-gradient(#3775FF, #5862ff);
    background: -ms-linear-gradient(#3775FF, #5862ff);
    background: -o-linear-gradient(#3775FF, #5862ff);
    background: linear-gradient(#3775FF, #5862ff);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    box-shadow: 0 4px 10px rgba(55, 117, 255, 0.5);
}
.info-list>li{
    position: relative;
    z-index: 1;
    margin:9px 0;
    padding-left: 18px;
    font-size: 16px;
    line-height: 32px;
}
.info-list>li::before{
    position: absolute;
    z-index: 1;
    left: 0;
    top: 14px;
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    vertical-align: middle;
    background-color: #3775FF;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.info-list .info-tip{
    margin-top: 5px;
    margin-left: -18px;
    padding: 2px 15px;
    font-size: 14px;
    line-height: 24px;
    color: #666;
    border: 1px solid rgba(255,255,255,0.8);
    background-color: rgba(255,255,255,0.3);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 0 10px 10px rgba(55, 117, 255, 0.1);
}
.info-list .info-tip p{
    margin: 8px 0;
    text-indent: 2em;
}



/* 相关技术支撑功能模块 */
#technicalSupport {padding:50px 0 30px;overflow: hidden; background-color: #fff;}
#technicalSupport .rowTi{text-align: center;}
.techSupportList { padding-top:10px;}
.techSupportList:after { content:"";display:block; clear:both;}
.techSupportList ul {margin: 0 -2%;}
.techSupportList li { float:left;width:21%;margin:0 2%;line-height:55px;margin-bottom:30px;}
.techSupportList li a { background:#F8F9FA; display:block; border-radius:10px; text-align:center; font-size:18px;}
.techSupportList li a:hover { background:#3775FF; color:#fff;}

/* 底部-咨询 & 试用申请 按钮 */
.lxss {
    padding: 50px 0;
    text-align: center;
    clear: both;
    background: #fff;
}
.lxss a {
    background-color: #3775FF;
}
.lxss a:hover {
    text-decoration: none;
    background-color: #1049c5;
}