@charset "utf-8";
/* CSS Document */
body,a,p,div,input,h3,h2,ul,li,select,span,textarea,table,tr,td,dl,dt,dd{
    margin:0;padding:0;font-size:14px;color:#666;
    box-sizing: border-box;
    font-family:Source Han Sans,Verdana, Geneva, sans-serif, Arial,Microsoft YaHei;line-height:22px;}

a{text-decoration:none;}
/* a:hover{color:#333;} */
li{list-style:none;}
img{border:none;margin:0;padding:0;}
input{border:none;background:none;outline:none;}
textarea{border:none;background:none;outline:none;}
h3,h2{font-weight:normal;}
body{overflow-x:hidden;}
button{outline:none;border:none;background:none;}

.marginT{
    margin-top:58px;
}
.navBox{
    width:100%;
    height:106px;
    background-color: rgba(0, 0, 0, 0.6);
    position:fixed;
    top:0;
    z-index: 999999;
}
.nav{
    width:1200px;
    height:106px;
    margin:0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav image{
    width:394px;
    height:auto;
}
.navList{
    display: flex;
    align-items: center;
}
.navList li{
    margin-left:52px;
    color:#fff;
    font-size:18px;
    font-weight: bold;
    position: relative;
    cursor: pointer;
}
.navList li.navCurrent::after{
    content: '';
    width:100%;
    height:2px;
    background:#fff;
    position:absolute;
    bottom:-14px;
    left:0;
}
.navList li:hover::after{
    content: '';
    width:100%;
    height:2px;
    background:#fff;
    position:absolute;
    bottom:-14px;
    left:0;
}

.phone{
    width:1200px;
    height:82px;
    margin:0 auto;
    position:relative;
    z-index: 999;
}
.phone img{
    width:403px;
    height:82px;
    margin-top:-36px;
    float:right;
}

.abtBox{
    width:1200px;
    margin:0 auto;
    margin-top:80px;
    display: flex;
    justify-content: space-between;
}
.abtBox img{
    width:408px;
    height:450px;
}
.abtBox div{
    width:690px;
    padding-top:38px;
}
.abtBox div h3{
    font-size:32px;
    font-weight: bold;
    color:#000;
    position:relative;
    z-index:1;
}
.abtBox div h3::after{
    content: '';
    width: 127px;
    height:3px;
    background:#008dd7;
    position:absolute;
    bottom:-5px;
    left:0;
    z-index:-1;
}
.abtBox div p{
    width:100%;
    height:144px;
    line-height:24px;
    margin-top:80px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:6;
    overflow:hidden;
}
.abtBox div button{
    width:124px;
    height:36px;
    background:url('../images/jt_12.png') 84px center no-repeat;
    background-size:18px auto;
    border:1px solid #e0e0e0;
    color:#008dd7;
    padding-right:18px;
    cursor: pointer;
    margin-top:42px;
}
.abtBox div button:hover{
    background:url('../images/jt_13.png') 84px center no-repeat #008dd7;
    color:#fff;
    border-color: #008dd7;
}


.courseBox{
    width:100%;
    background-color:#f7fafd;
    padding:44px 0 58px;
}
.courseB{
    width:1200px;
    margin:0 auto;
}
.courseTtl{
    text-align: center;
    font-size:32px;
    font-weight: bold;
    color:#000;
    position:relative;
    z-index:1;
}
.courseTtl::after{
    content: '';
    width: 127px;
    height:3px;
    background:#008dd7;
    position:absolute;
    bottom:-5px;
    left:50%;
    transform: translate(-50%, -50%);
    z-index:-1;
}
.coureLc{
    position:relative;
    margin-top:40px;
}
.coureLcYear{
    display: flex;
    justify-content: space-around;
    position: relative;
    z-index: 2;
}
.coureLcYearFlex{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.coureCircl{
    width:144px;
    height:144px;
    border:1px solid #7cd2ff;
    padding:10px;
    border-radius: 50%;
    background-color: #f7fafd;
    transition:all 0.2s;
}
.coureCircl p{
    width:100%;
    height:100%;
    border-radius:50%;
    background-color:#008dd7;
    border:1px solid #fff;
    box-shadow:-5px 5px 10px #0776b0 inset, -2px 2px 5px #cdd4db;
    color:#fff;
    font-size:20px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
}
.coureCircl:hover{
    padding:0;
    cursor: pointer;
}
.coureLcTtl{
    font-size:20px;
    color:#333;
    font-weight: bold;
    margin-top:34px;
}
.coureLcSmttl{
    margin-top:56px;
    width:356px;
    height:64px;
    background-color:#fff;
    border:1px solid #008dd7;
    text-align: center;
    line-height:64px;
    color:#008dd7;
    font-size:16px;
    transition:all 0.2s;
    cursor: pointer;
}
.coureLcSmttl:hover{
    background-color:#008dd7;
    color:#fff;
}
.line{
    width:100%;
    height:2px;
    background-color:#7cd2ff;
    position:absolute;
    top:71px;
    z-index:0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.line::before{
    content:'';
    width:12px;
    height:12px;
    border-radius:50%;
    background-color:#7cd2ff;
    border:1px solid #fff;
}
.line::after{
    content:'';
    width:12px;
    height:12px;
    border-radius:50%;
    background-color:#7cd2ff;
    border:1px solid #fff;
}

.kernelBox{
    width:1200px;
    height:auto;
    margin:0 auto;
    margin-top:52px;
}

.kernelCtt{
    width:100%;
    margin-top:58px;
    display: flex;
    justify-content: space-between;
}
.kernelCtt div{
    width:370px;
    height:300px;
    border-radius:16px;
    background-color:#fff;
    box-shadow: 0 0 20px #ededed;
    padding:24px 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kernelCtt div img{
    width:94px;
    height:94px;
}
.kernelCtt div h3{
    font-weight: bold;
    font-size: 16px;
    color:#000;
    margin-top:10px;
}
.kernelCtt div p{
    margin-top:30px;
    font-size:12px;
}

.caseBox{
    width:100%;
    display: flex;
    justify-content: space-between;
    margin-top:50px;
}
.case{
    width:286px;
    height:286px;
    overflow:hidden;
    position:relative;
    cursor: pointer;
}
.case img{
    width:286px;
    height:286px;
}
.case div{
    width:286px;
    height:286px;
    background-color: rgba(0, 0, 0, 0.5);
    position:absolute;
    top:232px;
    transition:all 0.3s;
}
.case div h3{
    width:286px;
    height:54px;
    color:#fff;
    font-size:18px;
    font-weight: bold;
    line-height:54px;
    text-align: center;
    padding:0 10px;
    overflow:hidden;
}
.case div p{
    color:#fff;
    padding:0 26px;
    height:176px;
    margin-top:15px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:8;
    overflow:hidden;
    text-indent: 2em;
}
.case:hover div{
    top:0;
    padding-top:14px;
}
.moreCase{
    width:100%;
    height:64px;
    background:#eef2f5;
    text-align: center;
    color:#008dd7;
    font-size:22px;
    margin-top:36px;
    cursor: pointer;
}
.moreCase:hover{
    background-color:#008dd7;
    color:#fff;
}

.bottomBgd{
    width:100%;
    padding:36px 0;
    background-color:#545556;
    margin-top:30px;
}
.bottom{
    width:1200px;
    margin:0 auto;
}
.bottomCt{
    display: flex;
    width:100%;
    border-bottom:1px solid #5f5f5f;
    padding-bottom:30px;
}
.bottomCt div{
    width:50%;
}
.bottomCt div h3{
    font-size:20px;
    color:#fff;
}
.bottomCt div p{
    font-size:16px;
    color:#e0e0e0;
    margin-top:18px;
}
.bottomNav{
    margin-top:36px;
    display: flex;
}
.bottomNav li{
    padding:0 26px;
    border-right:1px solid #7c7c7c;
    font-size:18px;
    color:#fff;
    cursor: pointer;
}
.bottomNav li:first-child{
    padding-left:0;
}
.bottomNav li:last-child{
    border-right:none;
}


.bottomBa{
    margin-top:50px;
}
.bottomBa a{
    color: #f1f1f1;
}
.bottomBa a:hover{
    color: #fff;
}