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

.main_1200_box {
        width:100%;
        margin: 40px auto 2% auto!important;
        }

}

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

.main_1400_box {
        width:100%;
        margin: 40px auto 2% auto!important;
        }

}

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

.header_area.sticky {
padding: 4px 4%;
}


    h4 {
        font-size:1.3rem
        line-height:1.5rem;
    }

.card-header {
    padding:20px!important;
    margin:0 auto!important;
}    

.account_settint_box {
    width:unset;
    padding: 0px 20px;
    margin: 0px auto 20px auto;
    } 

.account_settint_box_b {
        width: 100%!important;
    margin: 20px!important;
    }     

    #sub_header_menu_mobile {
          display:block;
        }

        #sub_header_menu{
          display:none;
        }

    .logo_img {
    max-width:80%;
    max-height: 100%;
    margin:6px;
    }

    .logo_pic {
    width:50%;
    }

    .article_box_index {
    margin:0px;
    }

    .index_article_box {
    margin:30px;
    }

    .logo_text {
    margin-left:10px;
    font-family:Yusei Magic, sans-serif;
    font-size:20px;
    letter-spacing:1.5px;
    opacity:0.7;
    }

    .class_lock_info {
    line-height:200px;
    }

    .class_cate_lv1 {
    height:100px;
    background-color :rgba(0,0,0,0.45);
    background-blend-mode: multiply;
    background-size: cover;
    }

    .class_cate_lv1:hover {
    height:100px;
    -moz-background-size:110%;
    -webkit-background-size:110%;
    -o-background-size:110%;
    background-size:105%;
    transition-timing-function: linear;
    transition: width 2s;

    }

    .class_cate_subcontent {
    letter-spacing: 2px;
    line-height:1.6rem;
    margin:15px 0px;
    }

    .class_cate_title {
    line-height: 80px;
    font-size:20px;
    color:white;
    font-weight: 1000;
    letter-spacing: 1.5px;
    }

    .label_tag {
    width:80px;
    }

    .class_name {
    font-size:1.2rem;
    line-height: 1.5rem;
    }

    .class_time_fonts {
    font-size:12px;
    }

    .class_content {
    font-size:14px;
    }

    #class_content_detail_info {
    padding:0px 0px 0px 0px;
    }

    #class_content_detail_info_two {
    padding:0px 10px;
    }

    .class_detail_info_one {
    font-size:0.7rem;
    }

    .class_detail_info_price {
    font-size:1.5rem;
    }

    .class_int {
    padding:20px 5px 20px 20px;;
    }

    .teacher_pic {
    padding:30px 50px 30px 50px;
    }

    .h2_box {
        padding: 10px 0px 10px 0px;
    }

    .h2_author {
        padding: 10px 0px 10px 0px;
    }

    .h2_article_content {
    font-size:12px;
    -webkit-line-clamp: 3;
    padding:5px 10px 0px 0px;
    }

    .h2_article_content_detail {
    font-size:12px;
    padding:5px 0px 0px 0px;
    }    

    .h2_article_date_info {
    padding-left:10px;
    }

    .h2_article_date_info_detail {
    font-size: 13px;
    font-weight: 100;
    padding:5px;
    }

    .h2_author_name {
    font-size:14px;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 0.5px;
    color:#065c31;
    text-align: left;
    margin-bottom:0.3rem;
    padding:10px 0px 0px 0px;
    }

    .h2_author_title {
    font-size:14px;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 0.5px;
    color:#065c31;
    text-align: left;
    margin-bottom:0.3rem;
    padding:10px 10px 0px 10px;
    }

    .h2_author_info {
    padding-left:0px;
    }

    #article_pic_pc {
    display:none;
    }

    #article_pic_m {
    display:block;
    }



    .h2_article_title {
    font-size:14px;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 0.5px;
    color:#065c31;
    text-align: left;
    margin-bottom:0.3rem;
    padding:10px 10px 0px 0px;
    }

    .h2_article_title_detail {
    font-size:20px;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 0.5px;
    color:#065c31;
    text-align: left;
    margin-bottom:0rem;
    padding:5px 10px 5px 0px;
    }

    .sta_title {
    letter-spacing: 1.5px;
    font-size:24px;  
    padding-bottom:1.5rem;
    }

    .sta_subtitle {
    letter-spacing: 1.5px;
    font-size:18px;  
    padding-bottom:1.5rem;
    }

    .h2_class_box {
    background-color:rgba(144,199,73,0.7);
    border-radius:5px;
    padding:10px 15px 10px 30px;
    margin-bottom: 20px;
    }

    .h3_content {
    font-size:16px;
    padding-left:0px;
    }

    .h3_sub_content {
    font-size:12px;
    }

    .class_date_info {
    font-size:14px;
    padding-left:0px;
    }

    #footer {
    padding:10px;
    background-color: lightgray;
    color:black;
    text-align: center;
    height:44px;
    }

    .footer_info {
    font-size:12px;
    }

    .navbar-brand {
        width:70%;
    }

    .header_hr {
    margin:0rem;
    }

    #sub_header_menu {
    padding:0px;
    height:190px;
    }

    #sub_header_keyword {
    margin:0.1rem 0rem!important;
    padding-right:0rem;
    }

    #sub_header_keyword_input {
    color:black;
    border-left: solid 1px lightgray;
    border-top: solid 1px lightgray;
    border-right: 0px;
    border-radius: 0px;
    }

    #main_body {
    padding:0px;
    width: 100%;
    }

    .h2_sub_title {
    margin:1rem 1rem;
    }

    .sub_title_hr {
    margin:1rem;
    }

    .article_pic {
        width:100%;
        padding:10px;
    }

    .sc_box {
        padding:0px;
    }

    .popup_overlay {position: fixed; top:0; right:0; bottom:0; left:0; background-color:#000; opacity:0.5; z-index:999;}
    .popup { position:fixed; z-index:999; left: 50%; width: 750px; height: 550px;margin-left: -375px; top:100px; border-radius: 5px; box-sizing:border-box;}
    .popup p { position: absolute; top: 130px; left: 150px; color: white; font-size: 1.6em; max-width: 300px; line-height: 1.25em;}
    .popup_info { 
width: 70%;
left: 15%;
margin: 0px;
padding: 20px 20px 10px 20px;
}
    .popup_info p { font-size: 1.6em; text-align: center; color: #EF4322; line-height: 1.3em;}

    .navbar {
        padding:0.5rem 0rem;
    }

    /*#class_cate {
        display:none;
    }*/

    #contact_us {
        display:none;
    }

    #index_icon_last {
        display:none;        
    }

    #index_icon_first {
        display:none;
    }

    #class_button_bottom {
    margin:15px 0px 0px 0px;
    }

    .class_right_head {
    border-radius: 0px;
    }

    .article_box {
    width:25%;
}

    .sub_article_header_menu {
        height:160px;
    }
/*
    #class_body {
    margin:unset;
    position: unset;
    height: unset;
    display: unset;
    width: unset;
    padding: unset;
    }
*/
    #class_left {
        height:unset;
        border-radius: 0px;
    }

    .class_content_page_title {
    letter-spacing: 1.4px;
    margin-bottom:15px;
    font-size:40px;
    }

    .dd {
          display: block;
          margin: 0px auto;
          padding: 5px 0px;
        }

        .oo {
          display: none;
        }

        .text{
        color: rgba(90,76,134,0.8);
        }

        .index_kol_slider_box {
        padding: 0px!important;
        order:2;
        }

        .hot_section {
            margin:0px;
            border-radius: 0px;
            padding: 20px 10px 20px 10px;
        }

        .good_section {
            border-radius: 0px;
            padding: 20px 10px 20px 10px;
        }

        .kol-content {
            margin: 0px;
        }

        .main_1000_box {
        width:100%;
        margin: 40px auto 1% auto!important;
        }

        .bk_pic {
            margin:7.5px;
        }

        .class_name_a {
            margin: 10px 0px;
            padding: 0px 10px!important;
        }

        .main-right-side {
        /*background-color:rgba(240,81,112,1);*/
        padding:0px 20px 40px 20px;
        order:1;
        }

        .card-text {
              position: relative;
              top: 140px;
              width: 100%;
              font-size:18px;
              letter-spacing: 4px;
          }

         .card-article {
              position: relative;
              width: 100%;
              font-size:18px;
              letter-spacing: 4px;
          }  

        .kol_pic {
              height:200px;
          } 

        .card-body {
              background-color:rgba(169,215,238,0.8);
              /*top: 144px;*/
              padding: 3px 10px!important;
          }

          #ca-navbar {
              background-color:rgba(169,215,238,1)!important;
              margin-top:7px;
          }

        .card-title {
            letter-spacing: 1px; 
            font-size: 18px;
        }

        .case_info_text {
            font-size:13px;
            margin:2px 0px 0px 5px;
            letter-spacing: 0.5px;
        }

        .case_button {
            padding:0.3rem 0.6rem!important;
            font-size: 0.8rem!important;
        }

        .info_box {
            border-radius: 0px;
        }

        .tab-content {
            padding:10px 30px;
        }

        .info_pic {
            border-radius: 0px;
        }

        .page_title {
            font-size:24px;
            word-break: break-word;
            margin:20px auto 10px auto;
        }

        .padding4-15 {
            padding:12% 0px 0px 0px;
        }

        .article_sub_info {
            font-size:18px;
        }

        .article_body {
            padding:20px;
        }

        .serach_box {
            width:80%;
            margin:20px auto;
        }

        .kol_profile_workrecord_box {
          padding: 10px 10px;
        }


}

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

.logo_pic {
    width:70%;
    }

}

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

.class_price {
    font-size:28px;
}

.class_sub_info {
    font-size: 16px;
}

.class_icon {
    width:26px!important;
    margin-right:8px;
}

#class_right {
    height: 470px;
    }

.invite_box_content {
        margin:20px 5px 10px 5px;
        padding:10px;
        height:160px;
      }  

 .account_data {
    font-size:20px;
 }       

}

@media (min-width: 1500px) and (max-width: 1599px) {

.class_price {
    font-size:24px;
    margin:0.4rem 0;
}

.class_sub_info {
    font-size: 15px;
}

.class_icon {
    width:24px!important;
    margin-right:6px;
}

#class_right {
    height: 470px;
    }


.invite_box_content {
        margin:20px 5px 10px 5px;
        padding:10px;
        height:140px;
      }
 .account_data {
    font-size:20px;
 }       

}

@media (min-width: 1400px) and (max-width: 1499px) {

.class_price {
    font-size:20px;
    margin:0.3rem 0;
}

.class_sub_info {
    font-size: 15px;
}

.class_icon {
    width:20px!important;
    margin-right:4px;
}

#class_right {
    height: 420px;
    }

.invite_box_content {
        margin:20px 5px 10px 5px;
        padding:10px;
        height:160px;
      }  
 .account_data {
    font-size:20px;
 }            

}

@media (min-width: 1300px) and (max-width: 1399px) {

.class_price {
    font-size:18px;
    margin:0.24rem 0;
}

.class_sub_info {
    font-size: 14px;
}

.class_icon {
    width:16px!important;
    margin-right:2.5px;
    margin-top: 2px;
}

#class_right {
    height: 400px;
    }

.invite_box_content {
        margin:20px 5px 10px 5px;
        padding:10px;
        height:175px;
      }   
 .account_data {
    font-size:20px;
 }           

}

@media (min-width: 1200px) and (max-width: 1299px) {

.class_price {
    font-size:16px;
    margin:0.2rem 0;
}

.class_sub_info {
    font-size: 14px;
}

.class_icon {
    width:14px!important;
    margin-right:2px;
    margin-top: 1.5px;
}

#class_right {
    height: 355px;
    }

.invite_box_content {
        margin:20px 0px 10px 0px;
        padding:10px 8px;
        height:190px;
      }  
 .account_data {
    font-size:20px;
 }            

}

@media (min-width: 992px) and (max-width: 1199px) {
    .menu_area .navbar-brand {
        font-size: 42px;
    }
    .menu_area #nav .nav-link {
        padding: 35px 7.5px;
    }
    .sing-up-button > a {
        color: #fff;
        height: 40px;
        min-width: 152px;
        line-height: 36px;
        font-size: 14px;
    }
    .welcome-thumb {
        width: 50%;
        bottom: -100px;
        right: 50px;
    }
    .video-area {
        height: 550px;
    }
    .app_screenshots_slides {
        padding: 0 4%;
    }
    .header_area.sticky .menu_area #nav .nav-link {
        padding: 23px 7.5px;
    }

    .class_price {
    font-size:14px;
    margin:0.1.5rem 0;
}

.class_sub_info {
    font-size: 14px;
}

.class_icon {
    width:12px!important;
    margin-right:1.5px;
    margin-top: 1px;
}

#class_right {
    height: 340px;
}

.invite_title {
    font-size:16px;
}

.invite_box_content {
        margin:12px 0px 10px 0px;
        padding:8px 6px;
        height:210px;
      }   
 .account_data {
    font-size:20px;
 }       



}

@media (min-width: 768px) and (max-width: 991px) {
    .header_area {
        padding: 0;
        height:64px;
        top:0;
        bottom:unset;
    }
    .menu_area .navbar-brand {
        font-size: 48px;
    }
    .header_area.sticky {
        height: 60px;
    }
    .header_area .menu_area #nav .nav-link,
    .header_area.sticky .menu_area #nav .nav-link {
        padding: 7.5px 15px;
    }
    #ca-navbar {
        padding: 30px;
        border-radius: 3px;
        background-color:rgba(169,215,238,1)!important;
        text-align: left;
    }
    .sing-up-button {
        margin-top: 30px;
        text-align: left;
    }
    .welcome-thumb {
        width: 50%;
        bottom: -100px;
        right: 0;
    }
    .wellcome-heading {
        margin-bottom: 70px;
    }
    .single-special {
        padding: 30px 10px;
    }
    .special_description_area.mt-150 {
        margin-top: 50px;
    }
    .special_description_content > h2 {
        font-size: 30px;
    }
    .video-area {
        height: 350px;
    }
    .section-heading > h2 {
        font-size: 38px;
    }
    .address-text > p,
    .phone-text > p,
    .email-text > p {
        font-size: 16px;
    }
    .footer-text > p {
        margin-bottom: 30px;
    }
    .section-heading {
        margin-bottom: 50px;
    }
    .sing-up-button > a {
        margin-top: 4px;
        display: inline-block;
        border: 2px solid #a883e9;
        height: 40px;
        min-width: 160px;
        line-height: 36px;
        font-size: 14px;
    }
    .counter-area {
        min-width: 50px;
    }
    .counter-area > h3 {
        font-size: 30px;
    }
    .app_screenshots_slides {
        padding: 0;
    }
    .clients-feedback-area .slick-slide.slick-current img {
        width: 90px !important;
        height: 90px !important;
    }

    .class_price {
    font-size:15px;
    margin:0.16rem 0;
}

.class_sub_info {
    font-size: 13px;
}

.class_icon {
    width:12px!important;
    margin-right:1.5px;
    margin-top: 1.2px;
}

#class_right {
    height: 480px;
    }

    .invite_box_content {
        margin:20px 40px 10px 40px;
        padding:10px;
        height:80px;
      }   
 .account_data {
    font-size:20px;
 }       



}

@media (min-width: 320px) and (max-width: 767px) {
    .header_area {
        padding: 0;
        height: 60px;
    }
    .menu_area .navbar-brand {
        font-size: 48px;
    }
    .header_area.sticky {
        height: 63px;
    }
    .header_area .menu_area #nav .nav-link,
    .header_area.sticky .menu_area #nav .nav-link {
        padding: 5px 15px;
    }
    #ca-navbar {
        padding: 20px;
        border-radius: 0px 0px 15px 15px;
        background-color:rgba(169,215,238,1)!important;
        text-align: left;
        margin-top: 11px;
    }
    .sing-up-button {
        margin-top: 30px;
        text-align: left;
    }
    .welcome_text .cd-intro > p {
        font-size: 14px;
    }
    .wellcome-heading > h2 {
        font-size: 48px;
    }
    .get-start-area .email {
        margin-bottom: 20px;
        max-width: 100%;
    }
    .welcome-thumb {
        width: 90%;
        bottom: -74px;
        right: 0;
    }
    .logo_area > a > h2 {
        font-size: 40px;
        margin-top: 10px;
    }
    .section-heading > h2 {
        font-size: 32px;
    }
    .single-special {
        margin-bottom: 30px;
    }
    .special_description_area.mt-150 {
        margin-top: 50px;
    }
    .special_description_content > h2 {
        font-size: 30px;
    }
    .app-download-btn:first-child {
        margin-right: 0;
    }
    .app-download-area {
        display: block;
    }
    .app-download-btn {
        margin-bottom: 20px;
    }
    .video-area {
        border: 10px solid #fff;
        border-radius: 20px;
        height: 250px;
    }
    .video-area::after {
        top: -10px;
        left: -10px;
        width: calc(100% + 20px);
        height: calc(100% + 20px);
        border: 1px solid #f1f4f8;
        z-index: 2;
        border-radius: 20px;
    }
    .clients-feedback-area .client-description > p {
        font-size: 20px;
    }
    .clients-feedback-area .slick-slide img {
        width: 60px !important;
        height: 60px !important;
    }
    .clients-feedback-area .slick-slide.slick-current img {
        width: 70px !important;
        height: 70px !important;
    }
    .membership-description > h2 {
        font-size: 32px;
    }
    .get-started-button {
        text-align: left;
        margin-top: 20px;
    }
    .contact_from {
        margin-top: 30px;
    }
    .wellcome-heading > h3 {
        font-size: 252px;
        top: -105px;
        left: -1px;
    }
    .wellcome-heading,
    .single-cool-fact {
        margin-bottom: 50px;
    }
    .cool_facts_area .col-12:last-of-type .single-cool-fact {
        margin-bottom: 0;
    }

        .class_price {
    font-size:28px;
    margin:0.4rem 0;
}

.class_sub_info {
    font-size: 13px;
}

.class_icon {
    width:28px!important;
    margin-right:6px;
    margin-top: 2px;
}

#class_right {
    height: 480px;
    padding:30px 10px;
    }

    .invite_box_content {
        margin:20px 40px 10px 40px;
        padding:10px;
        height:80px;
      } 
 .account_data {
    font-size:16px;
 }         


}

@media (min-width: 480px) and (max-width: 767px) {
    .wellcome-heading > h3 {
        font-size: 284px;
    }
    .wellcome-heading > h2 {
        font-size: 70px;
    }
    .welcome-thumb {
        bottom: -109px;
        width: 75%;
    }
    .wellcome-heading {
        margin-bottom: 50px;
    }
    .wellcome-heading > h3 {
        top: -139px;
    }
    .get-start-area .email {
        max-width: 370px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .wellcome-heading > h3 {
        font-size: 286px;
    }
    .get-start-area .email {
        margin-bottom: 0;
    }
}