@font-face {
    font-family: "number"; /* Project id 3859608 */
    src: url('../fonts/D-DINCondensed-Bold.woff2') format('woff2'),
         url('../fonts/D-DINCondensed-Bold.woff') format('woff'),
         url('../fonts/D-DINCondensed-Bold.ttf') format('truetype');
  }
.bg-black-45{ background: rgba(0,0,0,.27);}
.maximg{max-width: 100%;}
.text-2d2d2d{ color: #2d2d2d;}
.text-2a2a2a{ color: #2a2a2a;}
.text-353434{ color: #353434;}
.text-2a71b9{color: #2a71b9;}
.spaceBetween{ justify-content: space-between;}
.justifyCenter{ justify-content:center;}
.alignItems{ align-items: center;}
.alignStart{ align-items: flex-start;}
.w-50{ width: 50%;}
.mr-1 {margin-right: 10px;}
.font8{ line-height: 100%;}
.pt-1 {padding-top: 95px;}
.pt-3{padding-top: 35px;}

.brandList .item{ width: 33.333333%;}
.brandList .item b{ font-size: 100px; font-family: 'number'; }

.aboutContentBox{ position: relative; overflow: hidden; background: url(https://open-media-file.oss-cn-shanghai.aliyuncs.com/guanwang/static/images/about/aboutImg2.jpg) no-repeat center center; background-size: cover;}
.aboutContentBox::before{ position: absolute; content: ""; background: rgba(255,255,255,.8); width: 50%; left: 50%; margin-left: 700px; height: 100%; z-index: 0;}

.aboutMain .content{  background: rgba(255,255,255,0.8); margin-left: 40%;  padding: 100px; color: #333333; line-height: 250%; text-align: justify; padding-right: 0;}
.aboutMain .content p{ text-indent: 2em;}

.visionbox{ position: relative;}
.visionmain{ position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; height: 100%; color: #fff; }
.visionmain p{ margin-bottom: 0;}
.visionmain h1{ padding-left: 170px; line-height: 150%;}


.service{ position: relative; overflow: hidden;}
.service::after{ content: ""; height: 5px; left: 0%; margin-left: -700px; background: #128367; width: 50%; bottom: 0; position: absolute;}
.service::before{ content: ""; height: 5px; left: 50%; margin-left: 700px; background: #d36725; width: 50%; bottom: 0; position: absolute;}
.servierlist .item{ width: 25%; border-bottom: 5px solid #128367; padding-bottom: 50px;}
.servierlist .item .iconfont{ margin-right: 5px;}
.servierlist .memo {  line-height: 150%;}
.servierlist .item:nth-child(1){ color: #128367; }
.servierlist .item:nth-child(2){ color: #2a71b9;border-color: #2a71b9;}
.servierlist .item:nth-child(3){ color: #3655af;border-color: #3655af;}
.servierlist .item:nth-child(4){ color: #d36725;border-color: #d36725;}



.course{position: relative; overflow: hidden; background: url(https://open-media-file.oss-cn-shanghai.aliyuncs.com/guanwang/static/images/about/aboutImg5.jpg) no-repeat center center; background-size: cover;}
.course .title{ color: #2a71b9;}
.courseMian{  background: rgba(255,255,255,.7); overflow: hidden;height: 650px;}

.courseContent{ height: 100%; margin:50px 100px 10px 100px;overflow: auto;}

.courseContent::-webkit-scrollbar {
    width: 8px;
}

.courseContent::-webkit-scrollbar-track {
    background-color: #f0f0f0;
}

.courseContent::-webkit-scrollbar-thumb {
   background-color: #2a71b9;
}

.courseContent { position: relative;}

.courseContent dl , .courseContent dl dd , .courseContent dl dt{ margin: 0;}
.courseContent dl{ display: flex; position: relative; z-index: 1;}
.courseContent dl::before{ content: ""; position:absolute; width: 2px; height: calc(100% - 0px); background: #277bd1; left: 154px; top: 30px; z-index: 0;}
.courseContent dl dt{ font-size: 70px; font-family: "number"; color: #2a71b9;position: relative;}
.courseContent dl dt p{ margin: 0; position: relative; width: 170px; padding-right: 70px; }
.courseContent dl dt p::before{position: absolute; content: "";width: 30px;
	height: 30px;
	background-color: #ffffff;
	border: solid 1px #277bd1; border-radius: 100%; right: 0; top: 30%;transform: translate(0,-30%);}
    .courseContent dl dt p::after{
        content: "";
        position: absolute;
        width: 11px;
        height: 11px;
        background-color: #277bd1;
        border-radius: 100%;
        right: 10px;
        top: 40%;transform: translate(0,-40%);
    }
.courseContent dl dd{ margin-top: 50px;	color: #2a71b9; font-size: 20px; line-height: 180%;}
.courseContent dl dd p{ margin: 0; position: relative; }
.courseContent dl dd p::before{
    content: "";
    width: 13px;
	height: 13px;
    border-radius: 100%;
    position: absolute;
    left: -22px;
    top: 50%;
    transform: translate(0,-50%);
	background-color: #4cb5f6;
}
.courseContent dl dd p::after{
    content: "";
    width: 4px;
	height: 4px;
	background-color: #ffffff;
    border-radius: 100%;
    position: absolute;
    left: -16.5px;
    top: 50%;
    transform: translate(0,-50%);
    z-index: 1;
}
@media only screen and (max-width: 1576px) {
.aboutContentBox::before{  margin-left: 45%;}
.service::after{  margin-left: -45%; }
.service::before{ margin-left: 45%; }
}
@media only screen and (max-width: 1400px) {
    .sasslist .item{ padding:70px 10px 70px 40px;  width:calc( 50% - 5px); margin-bottom: 15px;}  
    .sasslist .item:nth-child(3){margin-bottom: 0;}
    .sasslist .item:last-child{margin-bottom: 0;}
    .sasslist .item .price b{font-size: 62px;}
    .sasslist .item .content{height: 60px;}
    .sasslist .item .price{ padding-top:50px;}
    .aboutMain .content{   padding: 50px 40px;  margin-left: 30%; padding-right: 0; }
    .aboutMain .content .font11{ font-size: 40px;}
}
@media only screen and (max-width: 1200px) {
    .courseContent dl dd{ font-size: 18px;}
}
@media only screen and (max-width: 1054px) {
    .mb-1 { margin-bottom: 45px;}
    .font2{ font-size: 34px;}
    .font4{ font-size: 16px;}
    .pt-1 {padding-top: 40px;}
    .pt-3 {padding-top: 15px;}

    .aboutMain .content{  margin-left: 0%;  padding: 50px 40px; padding-right: 0; }
    .aboutMain .content .font11{ font-size: 30px;}

    
.courseContent { margin-left: 25px; margin-right: 25px; max-height: 400px;}
}


@media only screen and (max-width: 767px) {

    .mb-1 { margin-bottom: 25px;}
    .font1 {font-size: 20px;}
    .font2 {font-size: 18px;}
    .font3 {font-size: 16px;}
    .font4 {font-size: 14px;}
    .font6 {font-size: 18px;}
    .font7 {font-size: 14px;}
  
    .mt-1 {margin-top: 30px;}
    .mt-2 {margin-top: 15px;}
    .mt-3 {margin-top: 10px;}
    .mt-4 {margin-top: 15px;}
    .mt-5 {margin-top: 20px;}
    .mt-10 {margin-top: 20px;}
    .mt-9 {
        margin-top: 5px;
    }

    .pt-1 {padding-top: 30px;}
    
.brandList .item b{ font-size: 44px; }
.brandList .item .font8{ font-size: 10px;}


.aboutMain .content{  padding: 50px 20px; margin: 20px auto;}
.aboutMain .content .font11{ font-size: 12px;}
.aboutContentBox::before{  display: none;}

.visionmain h1{ padding-left: 20px; line-height: 150%; margin-top: 10px;}
.servierlist .item{ width: 50%; margin-bottom: 20px; padding-bottom: 10px;}
.servierlist .item .iconfont{ margin-right: 5px;}
.servierlist .memo { padding-left: 23px; line-height: 150%;}
.service::after , .service::before{  display: none; }


.courseContent { margin-left: 15px; margin-right: 15px; height: 100%;overflow: auto;}
.courseContent dl dt{ font-size: 24px;}
.courseContent dl dt p{ padding-right: 40px; width: 76px;}
.courseContent dl dt p::before{ width: 16px; height: 16px;}
.courseContent dl dt p::after{ width: 6px; height: 6px; right: 6px;}
.courseContent dl dd{ font-size: 12px;margin-top:30px;}
.courseContent dl::before{ top: 16px;left: 66px;}
.courseContent dl dd p::before{ width: 10px; height: 10px;left: -14px;}
.courseContent dl dd p::after{ width: 2px; height: 2px;left: -10px;}
}