@media screen and (min-width:768px) {
    .visible-w767 {
        display: none !important;
    }
    .ct-br-bf-767 {
        display: block;
    }
}

@media screen and (min-width:992px) {
    .visible-w991 {
        display: none !important;
    }
    .ct-br-bf-991 {
        display: block;
    }
}

@media screen and (min-width:1025px) {
   .visible-w1024 {
        display: none !important;
    }
}

@media screen and (max-width:1260px) {
    .thumbnails .slick-prev { left: 0; z-index: 1; }
    .thumbnails .slick-next { right: 0; }
}

@media screen and (max-width:1199px) {
    .header .logo { left: 20px; }
    .header .logo .mainweb img { width: 40px; }
    .header .logo .web img { width: 165px; }
    .header .logo .line { margin: 0 10px; }
    .main-menu .menu-list li { margin: 0 4px; }
    .header .register-wrapper { right: 20px; }
    .header .register-wrapper .btn { margin-right: 5px; }
    .thumbnails-center-detail { padding-top: 0; }
    .sc-bg-fixed .content-box { padding-left: 0; padding-right: 30px; }
    .sc-ct-right .content-box {
        padding-left: 30px;
        padding-right: 0;
    }
    .footer .navfooter { padding-left: 20px; }
    .footer .contact {
        left: 15px;
    }
    .footer .social { right: 15px; }
}

@media screen and (max-width:1024px) {
    .hidden-w1024 {
        display: none !important;
    }
    .header {
        height: 60px;
        line-height: 60px;
    }
    .header .logo { position: static; margin-left: 60px; line-height: 55px; }
    .header .logo .mainweb img { width: 30px; }
    .header .logo .web img { width: 122px; }
    .header .logo .line { height: 22px; margin: 0 2px; }
    .header .register-wrapper { right: 15px; }
    .header .register-wrapper .btn { margin-right: 0; }
    .btn, button.btn { font-size: 22px; }
}

@media screen and (max-width:991px) {
    .hidden-w991 {
        display: none !important;
    }
    .ct-center-991 { text-align: center; }
    #section-hl .hl-form { margin-top: 10px; }
    #section-hl .icw-fields .icw-field { width: 100%; line-height: 0.7; }
    #section-hl .icw-form .icw-input { padding: 8px 0; }
    #section-hl .icw-form .icw-input.during { width: 100%; display: inline-block; }
    #section-hl .icw-input .dash { left: 49%; top: 20%; }
    .icw-form .icw-input .search-icon {
        top: 20px;
    }
    .section .sc-inner {
        padding: 40px 0;
    }
    .thumbnail-popular .popular { display: inline-block; }
    .popular .image { width: 100%; display: inline-block; }
    .popular .caption { width: 100%; display: inline-block;  padding: 20px; }
    .thumbnails-center-detail { width: 100%; padding-right: 0; margin-bottom: 50px; }
    .thumbnails-center-slider { width: 100%; }
    .thumbnails-center-slider .slick-prev, 
    .thumbnails-center-slider .slick-next,
    .thumbnails-center-slider .slick-dots { display: none !important; }
    .thumbnails-center-slider .slick-list {
        overflow: inherit !important;
        padding-left: 0 !important;
        margin-left: -8px !important;
    }
    .thumbnails-center { 
        padding: 0 8px;
    }
    .thumbnails-center:before {
        width: 95%;
        left: 8px;
    }
    .sc-bg-fixed.sc-ct-vmiddle .content-area {
        vertical-align: top;
        text-align: center;
        padding: 0;
    }
    .sc-bg-fixed .sc-inner {
        padding: 30px 0;
    }
    .sc-bg-fixed .content-box {
        max-width: 100%;
        padding-right: 0;
    }
    .sc-ct-right .content-box {
        padding-left: 0;
    }
    .announcement { 
        width: 50%;
    }
    .article .art-banner {
        margin-top: 0;
    }
}

@media screen and (max-width:767px) {
    .hidden-w767 {
        display: none !important;
    }
    .ct-br-mobile {
        display: block;
    }
    .footer { text-align: center; }
    .footer .navfooter { padding-left: 0; }
    .footer .contact { position: static; }
    .footer .social,
    .footer .slogan {
        display: none;
    }
    .action-form { margin-top: 10px; }
    h1, .heading-h1 { font-size: 50px; } 
    h2, .heading-h2 { font-size: 40px; } 
    h3, .heading-h3 { font-size: 30px; }
    h4, .heading-h4 { font-size: 25px; }
    #section-hl { padding-top: 100px; }
    #section-hl .btn { margin-bottom: 25px; font-size: 25px; width: 160px; }
    .section .sc-headline { margin-bottom: 10px; }
    .popular .caption .title,
    .popular .caption .price,
    .popular .caption .price span, 
    .thumbnail .caption-inner .price { font-size: 35px; }
    .thumbnail .caption-inner .price span { font-size: 20px; }
    .tag {
        font-size: 10px;
        top: 15px;
        left: 20px;
    }
    .favorite {
        top: 15px;
        right: 20px;
    }
    .icon-lists .icon-list {
        width: 50%;
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .icon-lists .icon-list:nth-child(3) {
        padding-top: 0;
    }
    .icon-lists .icon-list .num {
        font-size: 60px;
    }
    .icon-lists .icon-list .desc {
        min-height: 80px;
    }
    .icw-fields .icw-field {
        width: 100%;
    }
    .calculator .cal-col {
        width: 100%;
        display: block;
        border-right: 0;
    }
    .calculator .cal-col .cal-inner {
        padding: 30px 20px;
    }
    .calculator .cal-col.cal-result {
        border-bottom: 1px solid #ddddde;
    }
    .calculator .note {
        position: static;
        padding: 0;
    }
    .calculator-2columns .left {
        display: none;
    }
    .section .calculator-2columns .sc-headline {
        padding-left: 0;
    }
    .calculator-2columns .right .calculator {
        border: 1px solid #ddddde;
    }
    .calculator-2columns .right .calculator .cal-col.cal-result {
        border-bottom: 0;
    }
    .promotion {
        width: 50%;
    }
    .promotion .caption .title {
        height: 60px;
        line-height: 1;
    }
}

@media screen and (max-width:600px) {
    .promotion,
    .announcement {
        width: 100%;
        margin-bottom: 40px;
    }
}

@media screen and (max-width:375px) {
    .thumbnails-center:before {
        width: 94.5%;
    }
}

@media screen and (max-width:360px) {
    .header .logo { margin-left: 50px; }
    h1, .heading-h1 { font-size: 40px; } 
    h2, .heading-h2 { font-size: 35px; } 
    h3, .heading-h3 { font-size: 25px; }
    #section-hl .icw-form .icw-input {
        padding: 5px 0;
    }
    .thumbnails-center:before {
        width: 94%;
    }
}

@media screen and (max-width:320px) {
    .header .logo .mainweb img { width: 20px; }
    .header .logo .web img { width: 90px; }
    .btn, button.btn { font-size: 20px; padding: 3px 15px; }
}