.product_pic {
    background-size: contain;
}

@media screen AND (min-width: 1581px) {     
    .w1480 {
      width:1480px;
      margin:0 auto;
    }

    .product_pic {
      /*height:280px;*/
      height:340px;
    }

    .add_product_pic {
      /*height:280px;*/
      height:240px;
    }
}

@media (min-width: 1381px) and (max-width: 1580px) {    
    .w1480 {
      width:1280px;
      }

    .product_pic {
      /*height:240px;*/
      height:300px;
    }

    .add_product_pic {
      /*height:280px;*/
      height:220px;
    }

    .logo_pic {
        width:160px;
    }
}

@media (min-width: 1180px) and (max-width: 1380px) {            
    .w1480 {
      width:1080px;
      }

    .product_pic {
      /*height:200px;*/
      height:260px;
    }

    .add_product_pic {
      /*height:280px;*/
      height:220px;
    }

    .logo_pic {
        width:140px;
    }


}

@media (min-width: 980px) and (max-width: 1179px) {    
    .w1480 {
      width:880px;
      }

    .product_pic {
      /*height:180px;*/
      height:240px;
    }

    .add_product_pic {
      /*height:280px;*/
      height:220px;
    }

    .logo_pic {
        width:120px;
    }  
}

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

.footer_box {
    padding:0px 20px!important;
}

.footer_line {
order:4;
padding:0px 20px;
}

.footer_service {
order:2;
padding:0px 20px;
}

.footer_about {
order:3;
padding:0px 20px;
}

.footer_contact {
order:1;
padding:0px 20px;
}

.cart_type {
  font-size:20px;
}

.list_desc {
    position: fixed;
    top: unset;
    bottom: 0px;
    z-index: 9999;
    width: 100%;
    background-color: rgb(222, 226, 230);
    margin-bottom: 0px !important;
}

.l_d_height {
    height:50px!important;
}

.label_flag {
top: 25px;
right: 5px;
padding: 10px;
letter-spacing: 1px;
font-size: 12px;
}

.unstock_info {
    padding-top:43%;
    font-size:16px;
}

          
    .recommen {
  border-radius: 0px;
  text-align:center;
} 

  .recommen_h2 {
          padding:15px 40px;
          font-size: 22px;
          width: 100%;
        }

          .recommen_span {
          font-size: 18px;
          text-align:center;
          font-style: normal;
          margin-bottom:10px;
        }

        .recommen_blank {
          padding-bottom: 10px;
        }


    .w1480 {
      width:100%;
      }
    .product_pic {
      height:160px;
    }

    .add_product_pic {
      /*height:280px;*/
      height:200px;
    }

    .logo_pic {
        width:110px;
    }

    .mobile_none {
    display: none;
    }

    .pd_box {
      padding:0px;
    }

    .breadcrumb_box {
        padding:0px 22px;
    }

    .search_box {
        padding:0px 1px!important;
    }

    .product_tag {
    height:40px;    
    }

    .product_name {

    }

    .d-flex {
        display:block!important;
    }

    footer {
        position: unset!important;
    }

}

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

.cart_number {
    width:66px!important;
}

    td {
        padding:0.5rem!important;
    }

.list_pd_td_a {
    display: block
}

    .cart_img {
    height: 66px;
}

    .cart_title_left {
    margin-right:0px;
}

.cart_title_right {
    
}

    .check_box_num {
        margin: 4px 0px 0px 70px;
    }

    .cbp {
        margin-bottom: 5px;
        column-count:unset !important;
        max-height: 270px;
        overflow-y: auto;
    }

    .dropdown-item{
    white-space: normal !important;
    word-break: break-all;
}

    .dropdown-menu.cbp {
        width:200px ;
        margin-bottom: 5px;
        column-count:unset !important;
        max-height: 270px;
        overflow-y: auto;
    }

    .login_box {
    margin:20px auto; 
  }

  .product_detail_pic {
            padding: 0px 30px;
    }
    
    .mg015 {
    margin:0px;
    display: flow;
    }

    .nt {
        font-size:14px;
    }

    .nt_product {
    font-size:18px;
    }

    .follow_pd {
        margin: 0px 6px;
    }

    .cart_icon {
         color:gray;
        margin:0px 5px 0px 10px;
    }



            .marquee_title {
      font-size: 12px;
      margin:3px 0px;
      padding:6.5px 0px;
      height:100%;
      }


.marquee-container {
    font-size: 12px;
    margin: 2px 0px;
    padding: 5px 10px;
}

.navbar-nav.navbar-right {
  float:left!important;
  padding:10px;
}

.translate-middle {
    width:100%;
    text-align: center;
    padding-bottom: 35px;
}    

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

.side-collapse-container-right{
right:0;
width:100%;
position: absolute;
transition:right 0.2s ease-in;
}
.side-collapse-container-right.out{
right:260px;
top:0px;
bottom: 0;
position: fixed;
width: 100%;
transition:right 0.2s 0.1s ease;
}
.side-collapse-right {
background-color: rgb(254,215,75);
top:0px;
bottom:0;
right:0;
width:260px;
position:fixed;
overflow:hidden;
transition:width 0.2s ease-in;
z-index: 101;
}
.side-collapse-right.in {
width:0;
transition:width 0.2s 0.1s ease;
}

.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;
    }     

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

    .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:30%;
        height: 48px;
        line-height: 48px!important;
        font-size:0px;
    }

    .header_hr {
    margin:0rem;
    }

    #sub_header_menu {
    
    }

    #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 { 
        background-color: white; 
        position:fixed; 
        z-index:999; 
        left: 5%; 
        width: 90%;
        margin-left: 0px; 
        top:60px; 
        border-radius: 5px; 
        box-sizing:border-box; 
        padding: 20px;
    }
    .popup_info p { 
        font-size: 1.6em; 
        text-align: center; 
        color: #EF4322; 
        line-height: 1.3em;
    }

    .navbar {
        padding:0.5rem 0rem;
    }

    #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_left {
        height:unset;
        border-radius: 0px;
    }

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

    #brand_num4,
#carton_num4,
#product_num4 {
  column-count: 1;
};

#brand_num3,
#carton_num3,
#product_num3 {
  column-count: 1;
};

#brand_num2,
#carton_num2,
#product_num2 {
  column-count: 1;
};

#brand_num1,
#carton_num1,
#product_num1 {
  column-count: 1;
};

}

@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;
    }
  
 .account_data {
    font-size:20px;
 }

}

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

    .navbar {
      padding:0.5rem!important;
    }

    .navbar-brand {
      display: contents!important;
    }
 
    .pc_menu {
      display: none!important;
    }

    .uil-user {
      display: none!important;
    }

    .m_menu {
      display: block!important;
    }

    .container-fluid {
      padding:0px!important;
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    .header_area {
        padding: 0;
    }
    .menu_area .navbar-brand {
        font-size: 48px;
    }
    .header_area.sticky {
        height: 90px;
    }
    .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: #f7f7f7;
        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: 59px;
    }
    .menu_area .navbar-brand {
        font-size: 48px;
    }
    .header_area.sticky {
        height: 90px;
    }
    .header_area .menu_area #nav .nav-link,
    .header_area.sticky .menu_area #nav .nav-link {
        padding: 5px 15px;
    }
    #ca-navbar {
        padding: 20px;
        border-radius: 3px;
        background-color: #f7f7f7;
        text-align: left;
        margin-top: 8px;
    }
    .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;
    }

 .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;
    }
}