@import url("./base.less");

img{
    width: 100%;
}
.title{
    font-size: 18px;
    margin-bottom: 5px;
}
.line{
    background: #E9E9E9;
    width: 70px;
    height: 1px;
    position: relative;
    margin: auto;
    margin-bottom: 30px;
    &::before{
        content: '';
        width: 17px;
        height: 3px;
        background: @baseColor;
        display: inline-block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -1.5px;
    }
}

// banner
.swiper-container-banner {
  position: relative;
  .swiper-slide {
    cursor: pointer;
    height: auto;
    img {
      width: 100%;
      display: block;
    }
    --swiper-preloader-color: #fc2313;
  }
  .swiper-pagination-banner {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    // display: inline-block !important;
    border-radius: 15px;
    width: auto;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    z-index: 2;
    display: flex;
    .swiper-pagination-bullet {
      background: unset;
      margin: 0 8px;
      width: 18px;
      height: 18px;
      
      border-radius: 50%;
      display: block;
      position: relative;
      opacity: unset;
      &::before{
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          background: #FFF;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
      }

    }
    .swiper-pagination-bullet-active {
    //   background-color: #fff;
        border: 1px solid #224AF4;
        &::before{
            background: #224AF4;
        }
    }
  }
}

//about us
.about_us{
    background: #F9FAFF;
    padding: 73px 0;
    .about_box{
        ul{
            display: flex;
            justify-content: space-around;
            li{
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                p{
                    margin: 0;
                }
                p:nth-child(1){
                    font-size: 40px;
                    line-height: 47px;
                    font-weight: bold;
                    font-family: DINAlternate-Bold;
                }
                p:nth-child(2){
                    width: 40px;
                    height: 4px;
                    background: #224AF4;
                    // display: inline-block;
                    margin: 5px 0 10px 0;
                }
                p:nth-child(3){
                    font-size: 14px;
                    line-height: 20px;
                }
            }
        }
        .about-content-box{
            display: flex;
            margin-top: 100px;
            .about-content{
                margin-right: 60px;
                .content{
                    font-size: 16px;
                    line-height: 26px;
                    color: #111111;
                    text-align: left;
                    margin-top: 27px;
                }
            }
            .about-img{
                align-self: end;
                // height: 351px;
                img{
                    width: 523px;
                }
            }
        }
    }
}

//hot course
.hot-course{
    padding: 80px 0 100px 0;
    .course-ul{
        display: flex;
        margin-top: 60px;
        .course-li{
            position: relative;
            height: 339px;
            width: 240px;
            // padding-left: 4px;
            transition: 0.3s;
            border-right: 4px solid #FFF;
            flex: 1;
            // border: 1px solid red;
            box-sizing: border-box;
            overflow: hidden;
            text-align: center;
            background: url('../images/course01.jpg') no-repeat center center;
            background-clip: content-box;
            &:first-child{
                padding: 0
            }
            &:nth-child(2){
                background: url('../images/course02.jpg') no-repeat center center;
            }
            &:nth-child(3){
                background: url('../images/course03.jpg') no-repeat center center;
            }
            &:nth-child(4){
                background: url('../images/course04.jpg') no-repeat center center;
            }
            &:nth-child(5){
                background: url('../images/course05.jpg') no-repeat center center;
            }
            .course-label{
                position: absolute;
                left: 0px;
                bottom: 0px;
                font-size: 20px;
                line-height: 28px;
                text-align: left;
                color: #fff;
                p:nth-child(2){
                    opacity: 0.4;
                    font-family: Arial-Black;
                }
            }
            .course-label-s{
                background: linear-gradient(180deg, rgba(47, 0, 20, 0) 0%, #000000 100%);
                opacity: 0.71;
                padding: 39px 15px 15px 15px;
                width: 100%;
            }
            .course-box{
                position: absolute;
                left: 0;
                top: 339px;
                width: 380px;
                height: 339px;
                padding: 15px;
                // margin-left: 4px;
                box-sizing: border-box;
                background: rgba(34, 74, 244, 0.8);
                transition: 0.3s;
                .course-label{
                   position: static;
                }
                ul{
                    margin-top: 8px;
                    li{
                        font-size: 14px;
                        color: #fff;
                        display: flex;
                        justify-content: space-between;
                        padding: 5px 0;
                        p{
                            line-height: 20px;
                            text-align: left;
                            &:nth-child(1){
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                width: 250px;
                            }
                            &:nth-child(2){
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                width: 100px;
                                text-align: right;
                            }
                        }
                    }
                }
                .more-course{
                    position: absolute;
                    left: 15px;
                    bottom: 36px;
                    display: block;
                    width: 72px;
                    height: 36px;
                    text-align: center;
                    line-height: 36px;
                    background: #DE3899;    
                    border-radius: 20px;
                }
            }
        }
        li:hover{
            flex: 0 0 380px;
            .course-label-s{
                display: none;
            }
            .course-box{
                top: 0
            }
        }
    }
}

//choose us
.choose_us{
    padding: 58px 0 100px 0;
    background: #F9FAFF;
    .img-left{
        max-width: 742px;
    }
    .choose-box{
        display: flex;
        margin-top: 62px;
        ul{
            flex: 1;
            margin-left: 75px;
            li{
                display: flex;
                align-items: center;
                padding: 15px 20px;
                margin-top: 35px;
                border-radius: 8px;
                transition: 0.3s;
                &:first-child{
                    margin: 0;
                }
                &:hover{
                    background: #FFFFFF;
                    box-shadow: 0px 8px 32px 0px rgba(34, 74, 244, 0.05);
                    
                }
                img{
                    width: 50px;
                    height: 50px;
                }
                .choose-text{
                    text-align: left;
                    margin-left: 20px;
                    p:nth-child(1){
                        font-size: 16px;
                        line-height: 22px;
                        color: #111111;
                        font-weight: bold;
                    }
                    p:nth-child(2){
                        font-size: 14px;
                        line-height: 22px;
                        color: #666;
                        margin-top: 4px;
                    }
                }
            }
        }
    }
}

// full service
.service{
    padding: 70px 0 56px 0;
    background: url('../images/service.jpg') no-repeat center center;
    background-size: cover;
    .title{
        p{
            color: #fff
        }
        .title-en{
            opacity: 0.3;
        }
    }
    ul{
        margin-top: 40px;
        display: flex;
        li{
            margin-right: 30px;
            flex: 1;
            border-radius: 8px;
            position: relative;
            &:last-child{
                margin:0;
            }
            .service-code{
                display: none;
                position: absolute;
                top: -230px;
                right: -90px;
            }
            &:hover{
                .service-code{
                    display: block;
                }
            }
            .service-box{
                position: relative;
                display: flex;
                padding: 15px 29px;
                background: #FFF;
                flex: 1;
                align-items: center;
                border-radius: 8px;
                overflow: hidden;
                .service-icon{
                    width: 39px;
                }
                .service-text{
                    margin-left: 9px;
                    position: relative;
                    z-index: 2;
                }
                .bj-quan{
                    width: 56px;
                    height: 56px;
                    border-radius: 50%;
                    border: solid 13px transparent;
                    background-image: linear-gradient(#fff, #fff),
                        linear-gradient(180deg, rgba(230, 235, 255, 1), rgba(244, 247, 255, 1));
                    background-origin: border-box;
                    background-clip: content-box, border-box;
                    position: absolute;
                    top: 18px;
                    right: -20px;
                }

            }
        }
    }
    .service-btn{
        display: inline-block;
        width: 156px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        background: #DC1B8D;
        font-size: 14px;
        border-radius: 20px;
        margin-top: 37px
    }
}