@media (max-width:1400px){
    .wrp { width: calc(100% - 40px)}
    header .navbar .wrp{ display: flex; position: relative; }
    .menu{ border:none; outline:none; margin-left:auto; transition: top 0.3s ease-in-out, right 0.3s ease-in-out;}
    #rwd-nav{ display: block; position: fixed; top: 0; right:-100%; background: #ff0033; width: calc(50% + 20px); height: 100vh; padding-top: 40px; transition: right 0.3s ease-in-out; overflow: auto;}
    #rwd-nav>li>a{ text-transform: uppercase; }
    #rwd-nav li a{ color:white; position: relative; }
    #rwd-nav li a::after{ content: " ";display: block; width: 0; height: 2px; background: white; border-radius: 2px; transition: width 0.3s ease-in-out; }
    #rwd-nav>li>a::after{ position: absolute; bottom: 0; left: 0; }
    #rwd-nav>li:hover>a{ background: #c50128;}
    #rwd-nav>li:hover>a::after{ width: 100%; }
    #rwd-nav li:hover ul{ display: block; opacity: 1; position: static;}
    #rwd-nav ul li:hover a::after{ width: 100%; }
    #rwd-nav ul li:hover a{ background: #ff0b3c; border-radius: 10px; }
    #rwd-nav ul li a{ padding: 10px 20px; transition: all 0.3s ease-in-out; }

    #rwd-nav::-webkit-scrollbar{ display: none; }
    #rwd-nav ul{ display: none; opacity: 0; width:100%; padding-left:20px; transition: opacity 0.5s ease-in-out; background: #df002d; }
    #rwd-nav ul li a::first-letter{ text-transform: uppercase;}
    #rwd-nav.active{ right: -20px; }
    .overlay{ content: " "; position: fixed; width: 50%; height: 100vh; top:0; left:-100%; background-color: rgba(0, 0, 0, 0.5); transition: left 0.3s ease-in-out;}
    .overlay.active{ left:0 }
    .pageSection .colLeft { width: 300px; }
    .pageSection .category .product { width: calc(100%/4 - 20px); margin-right: 26.25px; }
    footer .navbar li{ white-space: normal; flex: unset;}
}
@media (max-width:1170px){
    #customer-op{overflow: auto; padding: 0 8px 2px 8px; margin-bottom: 18px;}
    #customer-op::-webkit-scrollbar { width: 4px; height: 4px; }
    #customer-op::-webkit-scrollbar-thumb { background: #f14466 ; }
    #customer-op .item .content a{ white-space: nowrap; }
    .pageSection .colLeft{ margin-right:10px }
    .pageSection .category .product { width: calc(100%/3 - 20px); margin-right: 26.25px; }
    .pageSection .category .product:nth-child(4n){ margin-right: 26.25px; }
    .pageSection .category .product:nth-child(3n){ margin-right: 0; }
    footer .contact .ctn { width: 90%; padding: 15px 20px; }
    footer .contact .scl-media { margin-right: 0; }
    footer #locate { padding: 20px 15px 60px 15px;}
    footer #locate .location .ggmap {width: 315px; }
    .head .search .frmSearchProduct{padding-left: 12px;}
    .head .search{margin-left: 10px;}
    .navbar a{padding: 10px 13px;}
}
@media (max-width:991px){
    .wrp { width: calc(100% - 20px)}
    #h-cnt .head { margin-bottom: 10px; }
    #h-cnt .logo { margin-left: 61px;}
    .navbar a {padding: 15px 20px; }
    #alDCall { right: -160px;}
    #alDCall.active { right: 0px;  }
    #alDCall .icon { padding: 10px; }
    #alDCall .icon img { width: 50px; }
    #alDCall .content p { font-size: 22px; line-height: 21px; }
    #alDCall .content { padding: 9px 15px 10px 50px;}
    .pageSection .colLeft {  width: 235px; }
    .pageSection .category .product { width: calc(100%/2 - 20px); margin-right: 40px; }
    .pageSection .category .product:nth-child(3n){ margin-right: 40px; }
    .pageSection .category .product:nth-child(even){ margin-right: 0;}
    #body .colLeft{ /*order:2; width: 100%;  margin-bottom: 20px;*/ display:none;}
    #body .colRight{ margin-left:0; padding-left:0; order:1; width: 100%; }
    footer .contact .ctn{ flex-wrap: wrap; }
    footer .contact .hotline { padding-right: 15px; margin:auto}
    footer .contact .subscription { padding-right: 15px; margin: auto;}
    footer .contact .scl-media {  margin: auto; margin-top: 20px; }
    footer #locate{ flex-wrap: wrap; }
    footer #locate .location:first-of-type { margin: auto; }
    footer #locate .location { margin: auto;}
    footer #locate #rule-policy{ margin:0 auto; margin-top: 40px; display: flex;}
    .bottomPage{ padding-left: 10px; padding-right: 10px;} 
    .navbar{ z-index: 9999; }
    .menu{ display: block; margin-left: 5px;}
    .menu hr{ background: #fff; }
    .menu.active hr{ background: #fff; }
    #h-cnt #main-nav{ display: none; }
    .navbar li { white-space: normal; }
    .search-bar .search{ margin-left: 15px;}
    .search-bar .hotln{ margin-left: 15px; }
    footer #locate #rule-policy .confirm{margin-right: 30px;}
}
@media (max-width:767px){
    #h-title .wrp { overflow: auto; white-space: nowrap; scrollbar-width: none; -ms-overflow-style: none;}
    #h-title .wrp::-webkit-scrollbar { display: none; }
    #h-title .scl-media{ margin-left:15px }
    #body .pageSection{ flex-wrap: wrap; }
    .pageSection #support .ctn { text-align: center; }
    .pageSection #support .hotLine .item { margin: 0 auto 20px auto; }
    .pageSection .category .product { width: calc(100%/2 - 5px); margin-right: 10px; }
    .pageSection .category .product:nth-child(3n){ margin-right: 10px; }
    .pageSection .category .product:nth-child(even){ margin-right: 0;}
    footer #locate .location, footer #locate .location .ggmap{width: 100%;}
}
@media (max-width:595px){
    #h-cnt .logo { width: 100px; margin-left: 40px}
    .navbar { margin-bottom: 0;}
    .search-bar{ flex-wrap: wrap; }
    .search-bar .search{ order:1; width: 100%; flex: unset; margin:0; margin-bottom: 10px; }
    .search-bar .listDM,.search-bar .hotln{ order:2 }
    .search-bar .listDM .title { padding:10px;}
    .search-bar .hotln{ margin-left: auto; }
    footer .contact .hotline { margin-bottom: 10px; }
    footer #locate .location { text-align: center; padding: 0; }
    footer #locate .location .ggmap{ margin: auto }
    footer #locate #rule-policy {flex-wrap: wrap;}
    footer #locate #rule-policy .des{ margin:auto }
    footer #locate #rule-policy .confirm{ width: 100%; text-align: center; }
}
@media (max-width:479px){
    .search-bar .hotln{ display: none; }
    .search-bar .listDM{ width: 100%;text-align: center; }
    .search-bar .list ul { position: static;}
    /*.pageSection .category .product{ width: 100%; margin-right: 0; }
    .pageSection .category .product:nth-child(3n){ margin-right: 0; }*/
    footer #locate .location .ggmap { max-width: 285px; }
}
@media (max-width:320px){

}
