/* 공통 */

.container{max-width: 1260px; width: 100%; margin: 0 auto;}

.brMo{display: none;}

.C333{color: #333;}

.C666{color: #666;}

h3{font-size: 40px; letter-spacing: -1px; font-weight: 300; text-align: center;}

h3 span{font-weight: 700;}

.subText{font-size: 18px; letter-spacing: -.45px; text-align: center;}

.subText span{font-weight: 700;}


/* //공통 */

/* section1 */

.section1{background-image:  url(../img/hamMath/sec1-bg@2x.png); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 0; margin-top: 110px;}

.section1 .container{padding: 167px /* 277px */ 24px 159px; position: relative;}

.section1 .container .logo{width: 201px;}

.section1 .container .logo img{width: 100%;}

.mark{width: 122.5px; position: absolute; top: 120px /* 230px */; left: 387px;}

.mark img{width: 100%; display: none;}

.section1 .container p.subtitle{color: #f2f2f2; font-size: 26px; font-weight: 500; letter-spacing: -.65px; margin-top: 14px;}

.section1 .container h2{color: #f2f2f2; font-size: 46px; font-weight: 700; letter-spacing: -1.15px; text-shadow: 0 3px 3px rgba(0, 0, 0, 0.24);}

.section1 .container h2 span{color: #f17700;}

.section1 .container .subText{color: #e5e5e5; margin-top: 20px; text-align: left;}

/* .section1 .container .subText span{font-weight: 700;} */

/* //section1 */

/* .section2 */

.section2 .container{padding: 90px 0 138px /* 99px */;}

/* .section2 .container h3{font-size: 40px; letter-spacing: -1px; font-weight: 300; text-align: center;} */

/* .section2 .container h3 span{font-weight: 700;} */

.section2 .container .subText{font-size: 18px; margin-top: 6px;}

.section2 .container .subText span{font-weight: 700;}

.section2 .container ul{display: flex; justify-content: center; gap: 40px; margin-top: 30px;}

.section2 .container ul li{width: 160px; height: 160px; border-radius: 50%; color: #fff; font-weight: 500; text-align: center; letter-spacing: -.5px; position: relative; display: flex; justify-content: center; flex-direction: column;}

.section2 .container ul li:nth-child(1){background-color: #d96d11;}
.section2 .container ul li:nth-child(2){background-color: #eabd00;}
.section2 .container ul li:nth-child(3){background-color: #16a791; margin-right: 0; line-height: 1.4;}
.section2 .container ul li:nth-child(4) p{margin-bottom: 4px;}

.section2 .container ul li::after{display: block; position: absolute; color: #666; letter-spacing: -.35px; font-size: 12px; bottom: -31px; left: 50%; transform: translateX(-50%);}

.section2 .container ul li:nth-child(1)::after{content: '*2022년 기준';}
.section2 .container ul li:nth-child(2)::after{content: '*강남엄마/5점 만점'; width: inherit;}
/* .section2 .container ul li:nth-child(4)::after{content: "*학원똑똑 앱 \A 22년 11월 조회수 기준"; white-space: pre; bottom: -48px;} */

.section2 .container ul li p{font-size: 24px; letter-spacing: -2.6px; color: #fff;}

.section2 .container ul li span{font-size: 36px; font-weight: 700; letter-spacing: -.9px;}

/* // .section2 */

/* .section3 */

.section3{background: url(../img/hamMath/sec2-bg@2x.png) no-repeat center; background-size: cover; height: 440px;}

.section3 .container{padding: 83px 0 88px; position: relative;}

.section3 h3{color: #fff; text-shadow: 0 3px 3px rgba(0, 0, 0, 0.24); margin-bottom: 12px;}

.section3 .subText{margin-bottom: 45px; color: #e5e5e5;}

    /* swiper */

    
    .section3 .swiper {
        max-width: 1020px;
        width: 100%;
        height: 100%;
      }

      .sec3Swiper .swiper-slide {
        width: 100%;
        max-width: 240px !important;
        height: 132px !important;
        border-radius: 30px 30px 30px 0;
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: block;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }



      /* 스와이퍼 내용 */
      .swiper-slide p{font-size: 14px; letter-spacing: -.38px; font-weight: 700; margin: 18px 0 12px;}

      .swiper-slide span{font-size: 14px; letter-spacing: -.35px;}

      /* 버튼 */

      .section3 .container .swiper-button-next,.section3 .container .swiper-button-prev{top: 65%; width: 30px; display: none;}

      .section3 .container .swiper-button-next::after,.section3 .container .swiper-button-prev::after{content: '';}

      .section3 .container .swiper-button-next img,.section3 .container .swiper-button-prev img{width: 100%;}

      .section3 .container .swiper-button-next img{transform: rotate(180deg);}


      /* 페이지네이션 */
      .section3 .container .swiper-pagination{bottom:30px; display: none;}

      .section3 .container .swiper-pagination .swiper-pagination-bullet{width: 10px; height: 10px; background-color: #666;}

      .section3 .container .swiper-pagination .swiper-pagination-bullet-active{width: 20px; border-radius: 5px; background-color: #fff;}

    /* swiper */

/* // .section3 */

/* .section4 */

.section4 .container{padding: 90px 0 301px;}

.section4 .container h3{margin-bottom: 12px;}

.section4 .container p.subText{color: #333;}

.section4 .container .levelBox{width: 636px; margin: 27px auto 86px;}

.section4 .container .levelBox img{width: 100%;}

.section4 .container ul{margin: 36px 0 90px; display: flex; justify-content: center;}

.section4 .container ul li{margin-right: 38px;}
.section4 .container ul li:last-child{margin-right: 0;}

/* section4 swiper */

.section4 .container .swiperBox{position: relative;}

.section4 .swiper {
    margin-top: 36px;
    max-width: 810px;
    width: 100%;
    height: 100%;
  }

  .sec4Swiper .swiper-slide {
    width: 100%;
    text-align: center;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: block;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .sec4Swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 버튼 */

  .section4 .container .swiper-button-next,.section4 .container .swiper-button-prev{width: 30px;}

  .section4 .container .swiper-button-next::after,.section4 .container .swiper-button-prev::after{content: '';}

  .section4 .container .swiper-button-next img,.section4 .container .swiper-button-prev img{width: 100%;}

  .section4 .container .swiper-button-next img{transform: rotate(180deg);}


  /* 페이지네이션 */
  .section4 .container .swiper-pagination{bottom: -30px;}

  .section4 .container .swiper-pagination .swiper-pagination-bullet{width: 10px; height: 10px; background-color: #666;}

  .section4 .container .swiper-pagination .swiper-pagination-bullet-active{width: 20px; border-radius: 5px; background-color: #808080;}

  .section4 .container .bookBox{display: none;}

/* //section4 swiper */

/* // .section4 */

/* =========================================================================================================== */
/* =========================================================================================================== */
/* =========================================================================================================== */
/* =========================================================================================================== */

/* 반응형 */

@media screen and (max-width : 897px) {
    /* 공통 */

    .brMo{display: block;}
    .brPc{display: none;}

    .container{padding: 0 24px;}

    h3{font-size: 6vw; letter-spacing: -0.5vw;}

    .subText{font-size: 3.3vw;}


    /* //공통  */

    /* .section1 */

    .section1{margin-top: 0;}  

    .section1{background: url(../img/hamMath/sec1-bg-M@3x.png) no-repeat; background-size: cover;}
    
    .section1 .container{padding: 58.9333vw 7.4667vw 8.0000vw;}
    
    .mark{width: 29.3333vw; left: 66.9333vw; top: 29.2000vw;}
    
    .section1 .container .logo{width: 46.4000vw;}

    .section1 .container p.subtitle{margin: 2.6667vw 0 4.2667vw; font-size: 4.2667vw; letter-spacing: -0.1867vw;}

    .section1 .container h2{font-size: 7.4667vw; letter-spacing: -0.1867vw;}

    .section1 .container .subText{margin-top: 3.4667vw; font-size: 3.2000vw; letter-spacing: -0.0800vw;}

    /* //.section1 */
 
    /* .section2 */

    .section2 .container{padding: 10.6667vw 7.4667vw 21.3333vw;}

    .section2 h3{text-align: left; line-height: 1.5;}

    .section2 .container .subText{margin-top: 1.6000vw; margin-bottom: 5.3333vw; text-align: left; font-size: 3.5vw;}

    .section2 .container ul{flex-wrap: wrap; justify-content: space-around; gap: 0;}
    
    .section2 .container ul li{width: 37.3333vw; height: 37.3333vw; font-size: 4.0000vw; margin: 0;}

    .section2 .container ul li:nth-child(3),.section2 .container ul li:nth-child(4){margin-top: 11.2000vw;}

    .section2 .container ul li:nth-child(1) p{font-size: 6vw;}

    .section2 .container ul li::after{bottom: -24px;}

    .section2 .container ul li span{font-size: 9.3333vw;}

    .section2 .container ul li p{font-size: 6.2vw; font-weight: 700;}
    
    /* //.section2 */

    /* .section3 */

    .section3{height: 97.3333vw;}

    .section3 .container{padding: 14.6667vw 6.4000vw 18.6667vw;}

    .section3 h3{margin-bottom: 1.6vw;}

    .section3 .subText{margin-bottom: 8vw;}

    /* 스와이퍼 */

      .sec3Swiper .swiper-slide {
        width: 100%;
        max-width: 42.9333vw !important;
        height: 24.5333vw !important;
        justify-content: space-evenly;
        display: flex;
        flex-direction: column;
      }

      /* 스와이퍼 내용 */
      .swiper-slide p{font-size: 2.6vw; letter-spacing: -.38px; font-weight: 700; margin:0;}

      .swiper-slide span{font-size: 2.4vw; letter-spacing: -.35px;}

      /* 버튼 */

      .section3 .container .swiper-button-next,.section3 .container .swiper-button-prev{top: 65%; width: 8.0000vw; display: flex;}

      .section3 .container .swiper-button-next img{transform: rotate(0deg);}
      .section3 .container .swiper-button-prev img{transform: rotate(180deg);}


      /* 페이지네이션 */
      .section3 .container .swiper-pagination{bottom:10.6667vw; display: block;}

      .section3 .container .swiper-pagination .swiper-pagination-bullet{width: 2.6667vw; height: 2.6667vw; background-color: #666;}

      .section3 .container .swiper-pagination .swiper-pagination-bullet-active{width: 5.3333vw; border-radius: 5vw; background-color: #fff;}


    /* //스와이퍼 */


    /* //.section3 */

    /* //.section4 */
      .section4 .container{padding: 10.6667vw 6.4000vw;}

    .section4 .container h3{margin-bottom: 1.6000vw;}

    .section4 .container .levelBox{width: 87.2000vw; margin-bottom: 10.6667vw;}

    .section4 .container ul.teacherBox{display: none;}

    /* 스와이퍼 */
    .section4 .container .swiperBoxMo{position: relative; margin-bottom: 18.6667vw;}

    .section4 .swiperBoxMo .swiper {
        margin-top: 36px;
        max-width: 74.6667vw;
        width: 100%;
        height: 100%;
      }
    
      .section4 .swiperBoxMo .swiper-slide {
        width: 100%;
        text-align: center;
        background: #fff;
    
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: block;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
    
      .section4 .swiperBoxMo .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    
      /* 버튼 */
    
      .section4 .container .swiper-button-next,.section4 .container .swiper-button-prev{width: 8.0000vw;}

      .section4 .container .swiper-button-next img{transform: rotate(0deg);}
      .section4 .container .swiper-button-prev img{transform: rotate(180deg);}
    
    
      /* 페이지네이션 */
      .section4 .container .swiper-pagination{bottom: -30px;}
    
      .section4 .container .swiper-pagination .swiper-pagination-bullet{width: 10px; height: 10px; background-color: #666;}
    
      .section4 .container .swiper-pagination .swiper-pagination-bullet-active{width: 20px; border-radius: 5px; background-color: #808080;}
    

    /* 스와이퍼 */

    .section4 .container .bookBox{display: flex; flex-wrap: wrap; text-align: center; justify-content: space-between; gap: 10px; margin-bottom: 0;}

    .section4 .container .bookBox li{margin: 0; width: calc(50% - 5px);}

    .section4 .container .bookBox li img{width: 100%;}

    /* //.section4 */
}