@font-face {
    font-family: alir;
    src: url(../font/AlibabaPuHuiTi-2-55-Regular.ttf);
}

html {
    scroll-padding-top: 200px;
}

body {
    min-width: 1200px;
    max-width: 1920px;
    margin: 0 auto !important;
    font-size: 10px !important;
    font-family: alir !important;
    color: #2b2b2b;
}

.box {
    width: 1200px;
    margin: 0 auto;
}

/* header */

header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    z-index: 999;
    background: #fff;
}

header .box {
    height: 120px;
}

header .logo p {
    font-size: 1.6em;
    line-height: 18px;
    color: rgb(41,166,194);
    margin-left: 19px;
    text-align-last: justify;
}

nav {
    width: 620px;
}

nav a {
    font-size: 18px;
    color: #333333;
}

nav .active,
nav a:hover {
    color: rgb(41,166,194);
}

nav .active::after,
nav a:hover::after {
    content: '';
    width: 28px;
    height: 4px;
    background: rgb(41,166,194);
    border-radius: 2px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -10px;
}

header .phone {
    width: auto;
    height: 40px;
    background: rgb(41,166,194);
    border: 1px solid rgb(41,166,194);
    border-radius: 6px;
    font-size: 1.6em;
    color: #fff;
    padding: 0 16px;
}

header .phone span {
    margin: 0 4px 0 5px;
}

/* header end */

/* 悬浮框 */
.xuan {
    position: fixed;
    right: 141px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 90px;
    height: 420px;
    z-index: 99;
    font-size: 16px;
}

.xuan label {
    width: 88px;
    height: 280px;
    background: #fff;
    border-radius: 44px;
    box-shadow: 0px 3px 10px 0px rgba(107, 109, 116, 0.23);
    padding: 0 15px;
}

.xuan li:nth-child(2) {
    border-top: 2px solid #ededed;
    border-bottom: 2px solid #ededed;
}

.xuan li {
    height: 90px;
    cursor: pointer;
}

.xuan>li:last-child {
    width: 87px;
    height: 87px;
    border-radius: 50%;
    margin-top: 53px;
    background: #fff;
    border: none;
    box-shadow: 0px 3px 10px 0px rgba(107, 109, 116, 0.23);
}

.xuan li img {
    display: block;
}

.xuan li:hover .kuang {
    display: flex;
}

.xuan li .kuang {
    display: none;
    background-color: rgb(255, 255, 255);
    box-shadow: 1.5px 2.598px 11.18px 1.82px rgb(28 28 28 / 13%);
    width: 164px;
    height: 164px;
    right: 90px;
    border-radius: 15px;
    font-size: 20px;
}

.xuan li:nth-child(2) .kuang {
    width: 244px;
    height: 71px;
}

.xuan .kuang .jiao {
    top: 0;
    bottom: 0;
    margin: auto;
    right: -20px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    filter: drop-shadow(1.5px 2.598px 11.18px rgb(28 28 28 / 13%));
}

/* 悬浮框 end */
/* footer */


footer {
    color: rgb(255, 255, 255, .5);
    font-size: 18px;
    background: linear-gradient(#2c4f70 460px, #12202e 460px);
    padding-top: 120px;
}

footer a,
footer a:hover {
    color: rgb(255, 255, 255, .5);
}

footer .line {
    width: 1px;
    height: 236px;
    background: rgb(255, 255, 255, .2);
}

footer .line::before {
    content: '';
    width: 3px;
    height: 22px;
    background: #63a5c0;
    position: absolute;
    top: 0;
    left: -1px;
}

footer .con {
    margin-top: 50px;
}

footer li:nth-child(2) {
    width: 270px;
}

footer li:nth-child(2) .con p {
    margin-top: 11px;
}

footer li:nth-child(4) {
    width: 220px;
    color: rgb(255, 255, 255, .5);
}

footer .tit {
    font-size: 24px;
    color: #fff;
}

footer .con a {
    display: block;
}

footer .con a:nth-child(n+2) {
    margin-top: 40px;
}

footer .con p>img {
    margin-right: 10px;
}

footer li:last-child .con>div:nth-child(2) {
    margin-left: 18px;
}

footer li:last-child .con p {
    font-size: 15px;
    margin-top: 12px;
}

.f_bottom {
    height: 60px;
    margin-top: 104px;
    font-size: 16px;
}


/* footer end */

/* 列表分页 */
.pagination {
    font-size: 18px;
    color: #363636;
    text-align: center;
    margin-top: 70px;
}

.pagination li {
    width: 44px;
    line-height: 44px;
    display: inline-block;
    margin: 0 15px;
    background: #f6f6f6;
}

.pagination li a {
    display: block;
    color: #363636;
}

.pagination li.active,
.pagination li a:hover {
    color: #fff;
    background: rgb(41,166,194);
}

.sxy {
    padding-top: 30px;
    border-top: 1px solid #cccccc;
    font-size: 18px;
    color: #111111;
    margin-top: 70px;
}

.sxy>div {
    max-width: 45%;
}

/* 列表分页 end */


/* index */

.swiper0 .swiper-pagination.swiper-pagination-bullets {
    bottom: 60px;
}

.swiper0 .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: #fff;
    margin: 0 7px !important;
    position: relative;
}

.swiper0 .swiper-pagination-bullet-active::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid rgb(255, 255, 255, .3);
    border-radius: 50%;
    position: absolute;
    left: -7px;
    top: -7px;
}

.index1 {
    background: url(../images/index1.jpg) no-repeat center;
    padding: 150px 0 146px;
    background-size: cover;
}

.title .aa {
    font: 26px/1 Arial;
    color: #999999;
    text-transform: uppercase;
}

.title .bb {
    font-size: 38px;
    line-height: 1;
    color: rgb(41,166,194);
    margin: 20px 0 30px;
}

.title .cc {
    font-size: 28px;
    line-height: 1;
    color: #666666;
}

.index1 ul {
    margin-top: 80px;
}

.index1 .img {
    background: rgb(225, 161, 137, .2);
    border-radius: 50%;
    padding: 36px;
}

.index1 .img>div {
    width: 244px;
    height: 246px;
    background: #e1a189;
    border-radius: 50%;
}

.index1 .img p {
    font-size: 24px;
    color: #fff;
    margin-top: 9px;
}

.index1 li:nth-child(2) .img {
    background-color: rgb(117, 207, 150, .2);
}

.index1 li:nth-child(2) .img>div {
    background: #75cf96;
}

.index1 li:nth-child(3) .img {
    background-color: rgb(116, 182, 252, .2);
}

.index1 li:nth-child(3) .img>div {
    background: #74b6fc;
}

.index2 {
    background: url(../images/index2.jpg) no-repeat center;
    background-size: cover;
    padding: 129px 0 130px;
}

.titlea {
    filter: brightness(100);
}

.title .bb span {
    width: 400px;
    height: 1px;
    background: rgb(99, 165, 192);
}

.index2 .title .bb span {
    width: 300px;
}

.index2 ul {
    margin-top: 58px;
}

.index2 .kuang {
    background: #fff;
    border-radius: 10px;
    font-size: 18px;
    color: #333333;
}

.index2 li:nth-child(1) .kuang {
    width: 280px;
    height: 140px;
}

.index2 li:nth-child(2n) .kuang {
    width: 80px;
    height: 440px;
    font-size: 24px;
}

.index2 li:nth-child(2n) .kuang::after {
    content: '';
    width: 105px;
    height: 428px;
    background: url(../images/index2_01.png) no-repeat center;
    position: absolute;
    left: 80px;
    bottom: 0;
    z-index: -1;
}

.index2 li:nth-child(3) .kuang {
    width: 280px;
    height: 100px;
    color: #666666;
}

.index2 li:last-child .kuang {
    width: 380px;
    height: 440px;
    padding: 20px 20px 0 13px;
}

.index2 .tit p {
    width: 100px;
    height: 40px;
    background: #1da6c1;
    border-radius: 20px;
    font-size: 18px;
    color: #fff;
}

.index2 .tit2 {
    margin-top: 20px;
}

.index2 .con {
    font-size: 16px;
    line-height: 24px;
    color: #666666;
    margin-top: 14px;
}

.index3 {
    padding: 151px 0 148px;
}

.index3 .list {
    margin-top: 70px;
}

.index3 .list .img {
    width: 580px;
    height: 320px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 40px;
}

.index3 .text {
    background: url(../images/course.jpg) no-repeat center;
    height: 120px;
    padding: 35px 0 0 49px;
    border-radius: 10px;
}

.index3 .text .tt {
    font-size: 28px;
    color: #2a56f3;
}

.index3 .text .cn {
    width: 747px;
    font-size: 18px;
    color: #2a56f3;
    margin-left: 38px;
}


















.index4 {
    background: url(../images/index4.jpg) no-repeat center;
    background-size: cover;
    padding: 145px 0 177px;
}

.index4 ul {
    margin-top: 38px;
}

.index4 li {
    width: 280px;
    height: 120px;
    background: #fff;
    border-radius: 10px;
    font-size: 18px;
    color: #333333;
    margin-top: 30px;
}

.index4 li img {
    border: 2px solid rgb(41,166,194);
    border-radius: 50%;
    margin-right: 20px;
}

.index4 .active {
    background: url(../images/index4_09.jpg) no-repeat center;
    box-shadow: 0px 1px 40px 0px rgba(71, 138, 171, 0.45);
    border-radius: 10px;
    color: #fff;
}

.index4 .active img {
    background: url(../images/index4_10.png) no-repeat center;
    border-color: #fff;
}

.index5 {
    background: url(../images/index5.jpg) no-repeat center;
    overflow: hidden;
    padding: 139px 0 178px;
}

.index5 .aa {
    font-size: 26px;
    color: #666666;
}

.index5 .bb {
    font-size: 38px;
    color: rgb(41,166,194);
    margin: -6px 0 18px;
}

.index5 .cc {
    font-size: 24px;
    line-height: 36px;
    color: #666666;
}

.index5 ul {
    margin-top: 108px;
}

.index5 ul::before {
    content: '';
    border-radius: 30px;
    background-image: linear-gradient(to right, rgb(97, 164, 190, .2) 57%, transparent 100%);
    width: 607px;
    height: 400px;
    position: absolute;
    left: -37px;
    top: -57px;
    z-index: -1;
}

.index5 li {
    font-size: 16px;
    line-height: 36px;
    color: #333333;
}

.index5 li img {
    margin-right: 19px;
}

.index5 img.p_a {
    left: 487px;
    top: -140px;
    z-index: -1;
}

.index5 .text {
    font-size: 24px;
    color: #fff;
    margin-right: 171px;
}

.index5 .text b {
    font-size: 38px;
    margin-right: 21px;
}

.index6 {
    padding: 119px 0 151px;
    overflow: hidden;
}

#swiper6 {
    overflow: initial;
    padding-bottom: 78px;
}

#swiper6 p {
    font-size: 24px;
    color: #fff;
}

#swiper6 .img {
    width: 380px;
    height: 220px;
    margin: 17px auto 0;
    overflow: hidden;
}

#swiper6 .active::after {
    content: '';
    width: 405px;
    height: 300px;
    background: rgb(41,166,194);
    position: absolute;
    left: -12px;
    bottom: -10px;
    z-index: -1;
}

#swiper6>.swiper-scrollbar {
    height: 3px;
    background: linear-gradient(#fff 1px, #e9e7ee 3px, #fff 1px);
}

#swiper6 .swiper-scrollbar-drag {
    background: rgb(41,166,194);
}

.index7 {
    padding-bottom: 147px;
}

.index7 .swiper {
    margin-top: 68px;
}

.index7 .swiper-slide {
    height: 420px;
    background: #f1f1f4;
    overflow: hidden;
    border: 2px solid #f1f1f4;
}

.index7 .p_a {
    width: 100%;
    height: 120px;
    background: #dcdce0;
    bottom: 0;
    left: 0;
}

.index7 .tt {
    font-size: 18px;
    color: #333333;
}

.index7 .tt b {
    font-size: 24px;
}

.index7 .cn {
    font-size: 18px;
    color: #666666;
    margin-top: 11px;
}

.index7 .swiper-slide:hover {
    background: #fff;
    border-color: rgb(41, 166, 194);
}

.index7 .swiper-slide:hover .p_a {
    background: rgb(41, 166, 194);
}

.index7 .swiper-slide:hover .tt,
.index7 .swiper-slide:hover .cn {
    color: #fff;
}

.index8 {
    background: url(../images/index8.jpg) no-repeat center;
    background-size: cover;
    height: 800px;
    padding-top: 173px;
}

.index9 {
    padding: 150px 0;
}

.index9 .mySwiper {
    width: 936px;
    margin: 47px auto 68px;
}

.index9 .mySwiper .swiper-slide {
    height: 50px;
    border: 1px solid #999999;
    border-radius: 25px;
    font-size: 18px;
    color: #999999;
}

.index9 .mySwiper .swiper-slide-thumb-active {
    background: #63a5c0;
    color: #fff;
    border-color: #63a5c0;
}

.index9 .mySwiper2 .swiper9 .swiper-slide {
    height: 240px;
    overflow: hidden;
}

.index10 {
    height: 900px;
    background: url(../images/index10.jpg) no-repeat center;
    background-size: cover;
    padding: 103px 0;
}

.index10 .tab {
    display: inline-flex;
    padding: 6px;
    border: 1px solid #fff;
    border-radius: 25px;
}

.index10 .tab a {
    height: 39px;
    border-radius: 20px;
    font-size: 18px;
    color: #fff;
    padding: 0 28px;
}

.index10 .tab a:not(:first-child):not(:last-child) {
    margin: 0 13px;
}

.index10 .tab a:hover,
.index10 .tab .active {
    background: #fff;
    color: rgb(41,166,194);
}

.index10 .list {
    margin-top: 30px;
}

.index10 .list li {
    width: 380px;
    background: #f9f9f9;
    padding: 10px 10px 32px;
    margin: 40px 30px 0 0;
}

.index10 .list li:nth-child(3n) {
    margin-right: 0;
}

.index10 .img {
    height: 200px;
    overflow: hidden;
}

.index10 .text {
    padding: 0 30px;
}

.index10 .tit {
    font-size: 18px;
    color: #999999;
    margin: 23px 0 22px;
}

.index10 .con {
    font-size: 18px;
    color: #666666;
    -webkit-line-clamp: 3;
}

.index10 .line {
    height: 1px;
    background: #999999;
    margin: 25px 0 19px;
}

.index10 .time {
    font: 18px Arial;
    color: #999999;
}

.index10 .time b {
    font-size: 38px;
    color: #333333;
}

.index10 .time img {
    display: block;
    margin-left: auto;
}

/* index end */

.banner {
    height: 500px;
    margin-top: 120px;
    font-size: 18px;
    color: rgb(41,166,194);
}

.banner span {
    font-size: 38px;
}


/* 关于我们 */

.about1 {
    background: url(../images/about1.png) no-repeat;
    padding: 149px 0 140px;
}

.about1 .tit {
    width: 407px;
    font-size: 38px;
    line-height: 64px;
    color: rgb(41,166,194);
}

.about1 .con {
    width: 692px;
    font-size: 18px;
    line-height: 32px;
    color: #666666;
}

.about .index7 {
    padding: 151px 0;
}

.about4 img {
    margin: 68px 0 151px;
}

/* 关于我们 end */

/* 课程 */

.course {
    padding: 149px 0;
}

/* 课程 end */


/* 技术 */

.skill {
    padding: 149px 0;
}

.skill .title .bb span {
    width: 360px;
}

.skill .kuang {
    background: rgb(80, 186, 244);
    border-radius: 10px;
    font-size: 24px;
    color: #fff;
}

.skill .kuang2,
.skill .kuang3,
.skill .kuang4,
.skill .kuang5 {
    height: 398px;
}

.skill .kuang2 p {
    width: 500px;
    height: 80px;
}

.skill .kuang3 p {
    width: 180px;
    height: 80px;
}

.skill .kuang4 p {
    width: 180px;
    height: 70px;
}

.skill .kuang5 p {
    width: 600px;
    height: 70px;
    font-size: 18px;
    line-height: 24px;
    padding: 0 24px;
}

.skill main>div {
    margin-top: 70px;
}

.skill .title2 {
    margin-top: 146px;
}

.skill .title2 .bb span {
    width: 300px;
}

.skill .index2 {
    background: none;
    padding: 0;
}

.skill .index2 .kuang {
    font-size: 18px;
    color: #fff;
}

.skill .index2 li:nth-child(3) .kuang {
    color: #fff;
}

.skill .index2 .con {
    color: #fff;
}

.skill .index2 .tit p {
    background: rgb(0, 135, 234);
}

/* 技术 end */


/* 新闻资讯 */

.news {
    padding: 144px 0 150px;
    height: auto;
    background: none;
}

.news .tab {
    border-color: #999999;
}

.news .tab a {
    color: #666666;
}

.news .tab a:hover,
.news .tab .active {
    background: rgb(41,166,194);
    color: #fff;
}

/* 新闻资讯 end */

.arc .back {
    font-size: 20px;
}

.arc .content {
    font: 18px/36px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
    padding: 80px 0;
}

.arc .tit {
    font-size: 32px;
}

.arc .time {
    font-size: 16px;
    margin: 10px 0 50px;
}

.arc img {
    max-width: 100%;
}

/* contactUs */

.contact {
    padding: 150px 0;
}

.contact .map {
    height: 500px;
}

.contact ul {
    margin-top: 43px;
}

.contact li {
    width: 290px;
    height: 320px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 2px 7px 0px rgba(8, 6, 12, 0.13);
    font-size: 18px;
    color: #666666;
}

.contact li p:nth-child(2) {
    margin: 26px 0 12px;
}

.contact li:last-child p {
    margin: 16px 0 0;
}

.contact li:last-child b {
    color: rgb(41,166,194);
}

.contact li b {
    font-size: 24px;
    color: #363636;
}

.contact .tit {
    font-size: 38px;
    color: #363636;
    margin-top: 151px;
}

.contact .tt {
    font-size: 24px;
    color: #322d2c;
}

.contact .tt span {
    color: #e6212a;
}

.contact form>div {
    width: 380px;
    margin-top: 33px;
}

.contact form>div:nth-child(4) {
    width: 100%;
}

.contact .text {
    width: 100%;
    height: 61px;
    border: 1px solid #909090;
    border-radius: 5px;
    font-size: 18px;
    color: #cfcfcf;
    text-indent: 19px;
    margin-top: 12px;
}

.contact .text::placeholder {
    color: #cfcfcf;
}

.contact textarea.text {
    height: 130px;
    padding-top: 20px;
}

.contact button {
    width: 100%;
    height: 59px;
    background: rgb(41,166,194);
    border-radius: 6px;
    font-size: 24px;
    color: #fff;
    margin-top: 60px;
}

/* contactUs end */