#body {
    background-color: #ffffff;
}

#native_class_body,
#writing_feedback_body,
#native_intro_body {
    opacity: 0;
}

#intermediate_detail,
#upperintermediate_detail,
#advanced_detail,
#expert_detai{
    opacity: 0;
}

img[onClick] {
    cursor: pointer;
}

/* 모달 */
.class-container {
    width: 90%;
    display: flex;
    justify-content: center;
}

/* card 섹션 */
.card {
    border: none;
}

#native_class_body video::-webkit-media-controls-fullscreen-button
{
    display: none !important;
}

@media all and (min-width: 1800px) {
    .card-container {
        width: 70vw;
        margin: 0;
        padding: 0;
    }

    #native_class_body .nf {
        position: relative;
    }
    
    #native_class_body .nf img {
        width: 100%;
        height: auto;
    }
    
    #native_class_body .nf .native_class_video1 {
        position : absolute;
        width: 43.6%;
        height: 7.65%;
        top: 9.5%;
        left: 8.2%;
    }

    #native_class_body .nf .native_class_video2 {
        position : absolute;
        width: 43.6%;
        height: 7.65%;
        top: 40%;
        left: 8.2%;
    }

    #native_class_body .nf .native_class_video3 {
        position : absolute;
        width: 43.6%;
        height: 7.65%;
        bottom: 32%;
        left: 8.2%;
    }

    #native_class_body .nf .native_class_video4 {
        position : absolute;
        width: 43.6%;
        height: 7.65%;
        bottom: 11%;
        left: 8.2%;
    }
}

@media all and (min-width: 1200px) and (max-width: 1799px) {
    .card-container {
        width: 80vw;
        margin: 0;
        padding: 0;
    }

    #native_class_body .nf {
        position: relative;
    }
    
    #native_class_body .nf img {
        width: 100%;
        height: auto;
    }
    
    #native_class_body .nf .native_class_video1 {
        position : absolute;
        width: 43.6%;
        height: 7.65%;
        top: 9.6%;
        left: 8.2%;
    }

    #native_class_body .nf .native_class_video2 {
        position : absolute;
        width: 43.6%;
        height: 7.65%;
        top: 40%;
        left: 8.2%;
    }

    #native_class_body .nf .native_class_video3 {
        position : absolute;
        width: 43.6%;
        height: 7.65%;
        bottom: 32%;
        left: 8.2%;
    }

    #native_class_body .nf .native_class_video4 {
        position : absolute;
        width: 43.6%;
        height: 7.65%;
        bottom: 11%;
        left: 8.2%;
    }
}

@media all and (min-width: 550px) and (max-width: 1199px) {
    .card-container {
        width: 90vw;
        margin: 0;
        padding: 0;
    }

    #native_class_body .nf {
        position: relative;
    }
    
    #native_class_body .nf img{
        width: 100%;
        height: auto;
        content: url("https://purpleacademy.net/admission_asset/images/curriculum/native_class_mobile.png");
    }
    
    #native_class_body .nf .native_class_video1 {
        position : absolute;
        width: 85.5%;
        height: 4.9%;
        top: 6.6%;
        left: 8%;
    }

    #native_class_body .nf .native_class_video2 {
        position : absolute;
        width: 85.5%;
        height: 4.9%;
        top: 36.4%;
        left: 8%;
    }

    #native_class_body .nf .native_class_video3 {
        position : absolute;
        width: 85.5%;
        height: 4.9%;
        bottom: 36.9%;
        left: 8%;
    }

    #native_class_body .nf .native_class_video4 {
        position : absolute;
        width: 85.5%;
        height: 4.9%;
        top: 80.5%;
        left: 8%;
    }

    #writing_feedback_body img{
        width: 100%;
        height: auto;
        content: url("https://purpleacademy.net/admission_asset/images/curriculum/writing_feedback_mobile.jpg");
    }
}


@media all and (max-width: 550px) {
    .card-container {
        width: 90vw;
        margin: 0;
        padding: 0;
    }

    #native_class_body .nf {
        position: relative;
    }
    
    #native_class_body .nf img{
        width: 100%;
        height: auto;
        content: url("https://purpleacademy.net/admission_asset/images/curriculum/native_class_mobile.png");
    }
    
    #native_class_body .nf .native_class_video1 {
        position : absolute;
        width: 85.9%;
        height: 4.8%;
        top: 7.2%;
        left: 7.5%;
    }

    #native_class_body .nf .native_class_video2 {
        position : absolute;
        width: 85.9%;
        height: 4.8%;
        top: 36.7%;
        left: 7.5%;
    }

    #native_class_body .nf .native_class_video3 {
        position : absolute;
        width: 85.9%;
        height: 4.8%;
        top: 58.2%;
        left: 7.5%;
    }

    #native_class_body .nf .native_class_video4 {
        position : absolute;
        width: 85.9%;
        height: 4.8%;
        top: 80.2%;
        left: 7.5%;
    }

    #writing_feedback_body img{
        width: 100%;
        height: auto;
        content: url("https://purpleacademy.net/admission_asset/images/curriculum/writing_feedback_mobile.jpg");
    }
}

.card-header .nav-item:hover {
    cursor: pointer;
    transform: translate(1px, 1px);
}

.card-header .nav-item .nav-link:hover {
    color: #222222;
}

.card-header * {
    color: #222222;
}

/* nav css */
#curriculum-renewal .card-header {
    background-color: inherit;
    padding: 20px 16px 20px 16px;
    box-shadow: none;
    position: -webkit-sticky;
}

.card-header .card-header-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.card-header .nav-item .nav-link {
    border: none;
    padding: 0;
    margin: 0 0 0 0;
}

.card-header .nav-item:hover,
.card-header .nav-item .nav-link:hover {
    border: none;
    box-shadow: none;
    background-color: inherit;
}

.card-header .nav .active {
    color: #b02b74;
    border: none;
    background-color: inherit;
}

.card-header .nav .active:hover {
    color: #b02b74;
}

/* 정규 과정 */
#regular_course_body .new_levels {
    width: 100%;
    max-width: 100%;
    height: auto;
}

@media all and (min-width: 781px) {
    .level-img > img {
        max-width: 100%;
        height: auto;
    }
}

@media all and (max-width: 780px) {
    /* .level-img {
        overflow: auto;
    }
    
    .level-img > img {
        object-fit: none;
        object-position: top left;
    } */

    .level-img > img {
        max-width: 100%;
        height: auto;
    }
}

#regular_course_body .levels-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.view-modal {
    width: 30%;
}

.view-modal img {
    max-width: 100%;
    height: auto;
}

.view-modal img:hover {
    cursor: pointer;
}

#regular_course_body .levels-container .levels {
    width: 22%;
    margin: 1%;
}

#regular_course_body .levels-container .levels img {
    max-width: 100%;
    height: auto;
}

#regular_course_body .levels-container .levels:hover{
    cursor: pointer;
}


#regular_course_body .levels-container .beginner img {
    scale: 1.07;
}

#regular_course_body .beginner #beginner_btn:hover {
    content: url("./images/beginner_btn_on.png");
}

#regular_course_body .intermediate img:hover {
    content: url("./images/intermediate_btn_on.png");
}

#regular_course_body .upperintermediate img:hover {
    content: url("./images/upperintermediate_btn_on.png");
}

#regular_course_body .advanced img:hover {
    content: url("./images/advanced_btn_on.png");
}

#regular_course_body .expert img:hover {
    content: url("./images/expert_btn_on.png");
}

/* 원어민 수업, 라이팅 피드백 공용 */
.class-detail-right .class-detail-title {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e4e4e4;
    border-radius: 15px;
    padding: 10px 0;
}

@media all and (max-width: 991px) {
    .class-detail-left{
        padding: 0 !important;
    }
    
    .class-detail-right{
        border-left: none !important;
    }
}

.class-detail-right .class-detail-contents {
    display: flex;
    align-items: center;
}

/* 원어민 수업 */
#native_class_body div {
    font-size: 21px;
}

/* #native_class_body img {
    width: 90%;
    max-height: 420px;
} */

#native_class_body img {
    width: 100%;
    height: auto;
}

#native_class_body .fa-solid {
    color: #b02b74;
}

#native_class_body .fa-solid:hover {
    cursor: pointer;
}

/* 원어민 수업 모달 */
#NF-class div{
    font-size: 18px;
}

/* 라이팅 피드백 */
#writing_feedback_body div {
    font-size: 21px;
}

/* #writing_feedback_body img {
    width: 90%;
    max-height: 420px;
} */

#writing_feedback_body img {
    width: 100%;
    height: auto;
}

#writing_feedback_body .fa-solid {
    color: #b02b74;
}

#writing_feedback_body .fa-solid:hover {
    cursor: pointer;
}

/* 원어민 소개 */
.foreigner-intro {
    text-align: center;
    font-size: 20px;
    padding: 20px;
    margin: 40px 0;
    background-color: #333333;
    border-radius: 50px;
}

.foreigner-intro p {
    color: #ffffff;
    margin: 0;
}

.foreigner-title {
    font-size: 25px;
    margin-bottom: 20px;
}

.foreigner-img {
    max-width:100%;
    height:auto;
    max-height: 400px;
    object-fit: cover;
    object-position: center 30%;
}

.foreigner-content p {
    font-size: 20px;
}

.teacher-intro {
    max-height: 200px;
    overflow: auto;
}

.teacher-intro::-webkit-scrollbar{
    width: 8px;
}

.teacher-intro::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 10px;
    background-clip: padding-box;
    border: 2px solid transparent;
}

.teacher-intro::-webkit-scrollbar-track {
    background-color: #999;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
}

#teacher_intro_wrapper .foreign-class {
    width: 120px;
    background-color: #6C4AB6;
    color: #ffffff;
    border-radius: 20px;
    margin: 0;
    padding: 5px 0;
    text-align: center;
}

#teacher_intro_wrapper .writingfeedback-class {
    width: 120px;
    background-color: #E97777;
    color: #ffffff;
    border-radius: 20px;
    margin: 0;
    padding: 5px 0;
    text-align: center;
}

/* 모달 css */
.modal .modal-dialog h5 {
    color: #333333;
}

.modal .modal-dialog .modal-content .modal-body {
    text-align: center;
    color: #333333;
    font-weight: 400;
    padding: 5% 0;
}

.modal .modal-dialog .modal-content .btn {
    outline: none;
    border: none;
}

.modal .btn:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.modal label{
    color: #999;
    font-weight: 300;
}

.modal-body img {
    max-width: 100%;
    height: auto;
}

.img-container {
    height: 600px;
    width: 1120px;
    background: url('./images/counselling_modal.PNG');
    background-size: cover;
}

/* PC */
@media all and (min-width : 1024px){
    .card-header .nav {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-header .nav .nav-item {
        width: 20%;
        font-size: 22px;
    }

    #regular_course_body .levels-container {
        margin-top: -30px !important;
    }

}

/* Tablet */
@media all and (min-width: 768px) and (max-width : 1023px){
    .card-header .nav {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-header .nav .nav-item {
        width: 20%;
        font-size: 18px;
    }

    #regular_course_body .levels-container {
        margin-top: -10px !important;
    }
}

/* Mobile */
@media all and (max-width : 767px) {
    .card-header .nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .card-header .nav .nav-item {
        width: initial;
        font-size: 14px;
    }

    .card-header .nav .nav-item:hover {
        transform: translate(0px, 0px);
    }

    #regular_course_body .levels-container {
        margin-top: 0px !important;
    }

    #native_intro_body .foreigner-intro p {
        font-size: 15px;        
    }

    #native_intro_body .foreigner-img {
        max-width: 70%;
        height: auto;
    }

    @media all and (max-width:576px) {
        #native_intro_body .foreigner-img {
            margin-bottom: 16px;
        }
    }

    #native_intro_body .teacher-intro {
        font-size: 15px;
        font-weight: 600;
    }
}

@media all and (min-width: 1600px) {

    #regular_course_body .level-img-wrapper {
      position: relative;
    }
  
    #regular_course_body .level-img-wrapper #level-bg{
      width: 100%;
      height: auto;
    }
  
    #regular_course_body .level-img-wrapper .level {
      position: absolute;
      scale: 0.7;
      transition: 500ms;
    }
    
    #regular_course_body .level-img-wrapper .level:hover{
      scale: 0.74;
      cursor: pointer;
    }

    #regular_course_body .level-img-wrapper .beginner {
        scale: 0.74;
    }
  
    #regular_course_body .level-img-wrapper .beginner {
      bottom: 2%;
      left: 3%;
    }
  
    #regular_course_body .level-img-wrapper .intermediate {
      bottom: 7%;
      left: 21.1%;
    }
  
    #regular_course_body .level-img-wrapper .upperintermediate {
      bottom: 12%;
      left: 39.1%;
    }
  
    #regular_course_body .level-img-wrapper .advanced {
      bottom: 17%;
      left: 57.1%;
    }
  
    #regular_course_body .level-img-wrapper .expert {
      bottom: 25%;
      left: 75.4%;
    }
  
    #regular_course_body .modal-body img {
      max-width: 100%;
      height: auto;
    }
  }
  
  @media all and (min-width: 1200px) and (max-width: 1599px) {
  
    #regular_course_body .level-img-wrapper {
      position: relative;
    }
  
    #regular_course_body .level-img-wrapper .level-bg{
      width: 100%;
      height: auto;
    }
  
    #regular_course_body .level-img-wrapper .level {
      position: absolute;
      scale: 0.7;
      transition: 500ms;
    }
    
    #regular_course_body .level-img-wrapper .level:hover{
      scale: 0.74;
      cursor: pointer;
    }

    #regular_course_body .level-img-wrapper .beginner {
      scale: 0.74;
    }
  
    #regular_course_body .level-img-wrapper .beginner {
      bottom: -4%;
      left: -1%;
    }
  
    #regular_course_body .level-img-wrapper .intermediate {
      bottom: 0;
      left: 17.8%;
    }
  
    #regular_course_body .level-img-wrapper .upperintermediate {
      bottom: 7%;
      left: 36.9%;
    }
  
    #regular_course_body .level-img-wrapper .advanced {
      bottom: 14%;
      left: 56%;
    }
  
    #regular_course_body .level-img-wrapper .expert {
      bottom: 25%;
      left: 75.3%;
    }
  
    #regular_course_body .modal-body img {
      max-width: 100%;
      min-width: 100%;
      height: auto;
    }
  
    #tech-section .slilder-img-wrapper {
      width: 100px;
    }
  
    #tech-section .slilder-img-wrapper img {
      object-fit: contain;
    }
  
  }
  
  @media all and (max-width: 1200px) {
  
    /* #regular_course_body .modal-body > img {
      max-width: 100%;
      min-width: 100%;
      height: auto;
    } */
  
    #regular_course_body .level-img-wrapper {
      position: relative;
      width: 100%;
      height: auto;
      overflow: auto; 
    }
  
    #regular_course_body .level-img-wrapper::-webkit-scrollbar{
      display: none;
    }
  
    #regular_course_body .level-img-wrapper #level-bg{
        max-width: 1000px;
      width: 1000px !important;
      height: auto;
    }
  
    #regular_course_body .level-img-wrapper .level {
      position: absolute;
      /* scale: 0.6; */
      transform:scale(0.6);
      -webkit-transform:scale(0.6);
      -moz-transform:scale(0.6);  
      -o-transform:scale(0.6);
      transition: 500ms;
    }
    
    #regular_course_body .level-img-wrapper .level:hover{
      transform:scale(0.64);
      -webkit-transform:scale(0.64);
      -moz-transform:scale(0.64);  
      -o-transform:scale(0.64);
      cursor: pointer;
    }
  
    #regular_course_body .level-img-wrapper .beginner {
      bottom: -30px;
      left: -20px;
    }
  
    #regular_course_body .level-img-wrapper .intermediate {
      bottom: -10px;
      left: 167px;
    }
  
    #regular_course_body .level-img-wrapper .upperintermediate {
      bottom: 10px;
      left: 354px;
    }
  
    #regular_course_body .level-img-wrapper .advanced {
      bottom: 30px;
      left: 541px;
    }
  
    #regular_course_body .level-img-wrapper .expert {
      bottom: 70px;
      left: 728px;
    }
  
    #regular_course_body .beginner_detail {
      content: url("https://purpleacademy.net/admission_asset/images/curriculum/beginner_detail_mobile.png");
    }
  
    #regular_course_body .speaking_detail {
      content: url("https://purpleacademy.net/admission_asset/images/curriculum/purple_speaking_detail.jpg");
    }
  
    #regular_course_body .intermediate_detail {
      content: url("https://purpleacademy.net/admisson_asset/images/curriculum/intermediate_detail_mobile.png");
    }
  
    #regular_course_body .upperintermediate_detail {
      content: url("https://purpleacademy.net/admisson_asset/images/curriculum/upperintermediate_detail_mobile.png");
    }
  
    #regular_course_body .advanced_detail {
      content: url("https://purpleacademy.net/admisson_asset/images/curriculum/advanced_detail_mobile.png");
    }

    #regular_course_body .expert_detail {
      content: url("https://purpleacademy.net/admisson_asset/images/curriculum/expert_detail_mobile.png");
    }
  
  }

@media all and (min-width: 1200px) {
    .container {
        width: 1200px !important;
        padding: 0 0;
    }
}



.native_class_video1{
  display: none;
}
.native_class_video2{
  display: none;
}
.native_class_video3{
  display: none;
}
.native_class_video4{
  display: none;
}