*{ font-family: 'UTM Avo'; font-size:14px }
a:hover, a:focus{ text-decoration: none; }
.flex{ display:flex }
.flex-wrp{ flex-wrap: wrap; }
.row.mg-0{ margin:0 }
.wrp{ margin:auto!important; width:1140px; max-width:100%; }
.wImage { position: relative; overflow: hidden }
.wImage::before { content: ""; display: block; padding-bottom: 66.66% }
.wImage .image { height: 100%; left: 0; position: absolute; top: 0; width: 100% }
.wImage .image.cover img { height: 100%; object-fit: cover; width: 100%; }
.wImage .image img { display: block; margin: auto; max-height: 100%; max-width: 100%; vertical-align: middle; position: relative; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c8093f ;  border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background: rgb(42, 49, 90); }
header{ margin-bottom: 10px; }
header .fullwidth .image img{width: 100%; max-height: 200px;}
header #h-title{ background:#c8093f }
#h-title .wrp{ padding:10px 0 }
#h-title .contact p{ color:white; margin:0;}
#h-title .contact #email{ /*border-right:0.8px solid white;*/ margin-right: 15px; padding-right:15px }
#h-title .contact #email img{margin-right:5px; width: 23px; vertical-align: text-bottom;}
#h-title .scl-media{ margin-left: auto;}
#h-title .scl-media .fa{ font-size:16px }
#h-title .scl-media a{ color:white; display:inline-block; border-right:0.8px solid white; margin-right:7.5px; padding-right:7.5px }
#h-title .scl-media a:last-child{ border-right:0; margin:0; padding: 0;}

#h-cnt { /*padding-top:20px*/ padding:0 13px; margin-top: 10px; }
#h-cnt .head{ align-items: center; /*margin-bottom: 20px;*/ margin:0; background: #c8093f; }
#h-cnt .logo{ width: 140px; margin-left:60px; }
#h-cnt .logo .wImage::before{ padding-bottom: 77.31% ; }

.navbar{ background: white; border-radius: 0; border:none; z-index: 999; min-height:0; }
.navbar a{ width: 100%; color: #fff; font-family: 'UTM Alexander'; font-size:14px; display: inline-block; padding:10px 30px }
.navbar ul{ margin:0; list-style: none; padding:0 }
.navbar li{ padding: 0; position: relative; flex:1; white-space: nowrap; }
#h-cnt .navbar{ margin-left:auto; margin-bottom:0; background: none; }
#h-cnt .navbar #main-nav ul{ display:none; width: 100%; min-width: 200px; position: absolute; background: #c60e05; top:99%; z-index: 1; }
#h-cnt .navbar #main-nav ul li a{ color:white }
#h-cnt .navbar #main-nav ul li:hover{ background:#ff665e; }
#h-cnt .navbar #main-nav li:hover ul{ display: block; }
.navbar #main-nav{ display: flex; }
.navbar #main-nav>li::after{ content: ""; position:absolute; right:0; top:50%; transform: translateY(-50%) ; width:1px; height:16px; background: #fff;}
.navbar #main-nav>li>a{ text-transform: uppercase; }
.navbar #main-nav li:last-child::after{ content:none}
.navbar #main-nav li a.active, #h-cnt .navbar #main-nav li:hover a{color: #ffcc00}
.menu{ display: none; }
.menu hr{ border:none; width:40px ; height: 4px; background:#fff; display: block; margin:9px 0; border-radius:2px; transition: transform 0.3s ease-in-out;}
.menu.active{ position: fixed; top:0; right:0; z-index: 999;}
.menu.active hr:nth-child(1){ transform: rotate(135deg) translate(14px, -6.5px); }
.menu.active hr:nth-child(2){ visibility: hidden;}
.menu.active hr:nth-child(3){ transform: rotate(-135deg) translate(12.5px, 5.5px); }
#rwd-nav{ display: none; }
.search-bar .listDM{ position: relative; }
.search-bar .listDM .title{ background:#c8093f; border-radius:5px 5px 0 0; padding:10px 25px; padding-right:50px; height: 100%; padding-bottom: 8px ;color:white; text-transform: uppercase; cursor: pointer;}
.search-bar .listDM .title .fa{ margin-right:5px; font-size:18px; vertical-align: bottom; }
.search-bar .listDM .title span{ vertical-align: sub; user-select: none; }
.search-bar ul{ list-style-type: none; position: absolute; padding:0; margin:0; }
.search-bar .list{ background:rgb(167, 149, 149); width: 100%; top:100%; display: none; z-index: 1000; }
.search-bar .list.active{ display: block; }
.search-bar .list li{ position: relative; width: 100%;}
.search-bar .list ul{ display:none ;right:-100%; top:0; background: rgb(194, 191, 191)  }
.search-bar .list ul{ width: 100%; }
.search-bar .list a{ color:white; display: block; padding:10px 25px; padding-right:0 }
.search-bar .list li:hover{ background: rgb(133, 116, 116);  }
.search-bar .list li li:hover{ background: rgb(223, 218, 218); }
.search-bar .list>li:hover ul{ display: block; }
.search-bar .list a::first-letter{ text-transform: uppercase; }

/*.search-bar*/ .head .search{  margin-left:30px; flex: 1; margin-right: 5px; }
/*.search-bar*/ .head .search .frmSearchProduct{ border:1px solid #e0e0e0; display: flex; background:white; border-radius: 100px; padding-left:25px; padding-right:10px; }
/*.search-bar*/ .head .search input{ border:none; resize: none; outline: none; width: 100%; background: transparent; font-size:13px; height: 100%; padding: 5px 0;}
/*.search-bar*/ .head .search button{ border:none; outline:none; background: transparent; font-size:17px }
.search-bar .hotln{ margin-left: 30px }
.search-bar .hotln .image img{ margin-top:5px }
.search-bar .hotln .phone{ margin-left:5px }
.search-bar .hotln .phone p{ margin:0; padding:0; font-size:16px; text-align: center; line-height: 19px;}
.search-bar .hotln .phone b{ font-size:16px }
#h-slide{ width: 100%; position: relative; margin-bottom: 20px; }
#h-slide .item .wImage::before{ padding-bottom: 33.48%; }
#h-slide .owl-prev, #h-slide .owl-next{position: absolute; top: 50%; left: 0;}
#h-slide .owl-next{left: auto; right: 0;}
/*#h-slide .owl-carousel .owl-item{max-height: 220px;}*/
#alDCall.active{ right:5px }
#alDCall{ position: fixed; bottom:10px; right:-220px; z-index: 5000; display: flex; align-items: center; user-select: none; transition: right .5s ease-in-out;}
#alDCall .icon{ background: #ffcc00; border-radius: 50%; border:7px solid white; box-sizing: content-box; padding:20px; text-align: center; z-index: 9999; animation: shake 1.5s infinite ease-in-out;}
#alDCall .icon img{ width: 75px; margin:3px; }
#alDCall .content{ background: #ffcc00; border:7px solid white; margin-left:-50px; padding: 10px 15px 12px 50px; z-index: 1000; height: 90%; border-radius: 0 12px 12px 0;}
#alDCall .content p{ font-family: "UTM Avo"; font-size: 32px; margin:0; text-align: center; color:#ff0000; line-height: 37px; }
#alDCall .content .phone{ font-weight: bold; }
#customer-op{ padding:18px; padding-top:0; margin-bottom: 18px;}
#customer-op .item{ display: flex; flex: 1; border:1px dashed #d4d4d4; border-right-width: 0; padding: 25px 0; justify-content: center; align-items: center;}
#customer-op .item:last-child{ border-right-width:1px }
#customer-op .item .image{ margin-right:5px }
#customer-op .item .content{ margin-right:15px; padding-top:5px }
#customer-op .item .content a{ display: block; margin:0; padding:0; font:14px "Arial"; color:#666666; line-height: 22px; cursor: pointer; user-select: none; }
#customer-op .item .content a span{ display: block; }
.pageSection{ padding:0 13px }
.pageSection .colLeft{ /*width: 342px; min-width: 342px;*/width: 270px; min-width: 270px; }
.pageSection .colRight{ /*margin-left:30px; flex: 1;*/ width: calc(100% - 270px); padding-left: 10px; }
.pageSection .headLine{ margin-bottom: 10px; user-select: none; }
.pageSection .headLine a{ display: inline-block; }
/*.pageSection .headLine .title a{ background:#c8093f; border-radius:5px 5px 0 0; padding: 15px 0; height: 100%; width: 100%; text-align: center; color:white; font-weight: 700; font-size:15px }*/
.pageSection .headLine ul{ list-style-type: none; margin:0; padding:0 }
.pageSection .headLine .ctn{ border: 1px solid #cccccc; border-radius: 0 0 5px 5px; background:#f1f1f1}
.pageSection .headLine .list li{ position: relative;}
.pageSection .headLine .list ul{ display: none; position: absolute; right:-100%; width: 100%; top:0; background: rgb(226, 226, 226); z-index: 9999;}
.pageSection .headLine .list>li{border-bottom: 1px dashed #cccccc; }
.pageSection .headLine .list>li:last-child{ border-bottom: none }
.pageSection .headLine .list li a{ padding: 10px 25px; padding-bottom: 15px; font-size:14px; width: 100%; color:#333333}
.pageSection .headLine .list li:hover>ul{ display: block; border-left:1px solid rgb(180, 180, 180) }
.pageSection .headLine .list>li:hover>a{ color:#c8093f}
.pageSection .headLine .list ul li:hover>a{ background:rgb(194, 194, 194); color:white }
.pageSection .headLine .list>li>a.active{color: #c8093f}
.pageSection #support .ctn{ padding:20px 8px}
.pageSection #support .hotLine .item{ max-width: 240px; border: 1px solid #c8093f; border-radius: 13px; margin-left:17px; margin: auto auto 20px;}
.pageSection #support .hotLine .item .title{  margin-left:10px; margin-top:-11px;}
.pageSection #support .hotLine .item .title .wrapper{ background: white; padding:0 5px }
.pageSection #support .hotLine .item .title .text{ font-family: 'Lato'; user-select: none; font-size: 14px; color: #c8093f; font-style: italic;}
.pageSection #support .hotLine .item .content .time{  font-family: 'Lato'; font-size: 13px; text-align: right; color:#4046d8; margin-right: 13px; }
.pageSection #support .hotLine .item .content .phone{ background: #c8093f; margin-bottom: 10px; margin-left:5px; margin-right:5px; border-radius: 40px; padding:5px }
.pageSection #support .hotLine .item span{ display: inline-block; }
.pageSection #support .hotLine .item .content .phone .icon{ background:white; display: inline-block; border-radius: 50%; width: 30px; height: 30px; text-align: center; padding:2px; box-sizing: content-box; }
.pageSection #support .hotLine .item .content .phone .numb{ font-family: 'UTM Penumbra'; color:white; font-size:23px; vertical-align: middle; margin-left: 3px; }


.pageSection .category .title{ margin-bottom: 20px; }
.pageSection .category .title a{ display: flex; align-items: center; font-family: /*'UTM Alexander'*/ 'UTM Avo'; font-size:24px; text-transform: uppercase; color:#c8093f; font-weight: bold;}
.pageSection .category .title a::after{ display: inline-block; content: ""; flex:1 ; height: 1px; background: #cccccc; margin-top:10px; margin-left:10px }
.pageSection .category .product:nth-child(4n){ margin-right:0 }
.pageSection .category .product{ width:calc(100%/4 - 20px); margin-right: 26.25px; margin-bottom: 15px; }
.pageSection .category .product .wImage{ border-radius:2px ; }
.pageSection .category .product .des{ text-align: center ; padding: 15px;}
.pageSection .category .product .des h4 a b{ font-size: 16px ; color:#c8093f}
.pageSection .category .product .des .price{ margin-top: 15px; user-select: none; }
.pageSection .category .product .des .price .border{ display: inline-block; border:1px solid ; border-color: #c0c0c0 #cccccc ;  padding: 6px 22px; color: #ff9900 }
.pageSection .category .product .des .price .border span:first-child{color: #aaa;}
.pageSection .category .product:hover .des .price .border span{color: #fff;}
.pageSection .category .product:hover{ background: #c8093ffa; border-radius:10px;}
.pageSection .category .product:hover .des .price .border{ border-width: 0 1px 2px 1px ; color: white; }
.pageSection .category .product:hover .des h4 a b{ color:#ffcc00}
.select label{ cursor: pointer; margin: 0; font-weight: normal}
.select input{ display: none; }
.select span{ vertical-align: middle;}
.select .check{ position: relative; background:white; display:inline-block; width:15pt; height: 15pt; border:1pt solid #cccccc}
.select .check::after{ content:"\f00c";font: normal normal normal 14px/1 FontAwesome; position:absolute; opacity: 0; transform: translateX(-50%) translateY(-50%); top:50%; left:50%;}
.select input:checked ~.check::after{ opacity:1 } 

footer{ background: #52504c ; }
footer .contact .ctn{ background: white; width: 80%;max-width: 1530px; margin:0 auto; padding:25px 75px }
footer .contact .hotline{ margin-right: auto; user-select: none; }
footer .contact p{ color:#666666;}
footer .contact .hotline p:first-of-type{ font: 15px "Arial"; }
footer .contact .hotline .phone{ margin-bottom: 10px; }
footer .contact .hotline .phone .icon{ background: #e52c25; width: 25px; height: 25px; border-radius: 50%; text-align: center; margin-right: 12px;}
footer .contact .hotline .phone .icon .fa{ font-size: 19px; color:white; transform: translateY(-30%); }
footer .contact .hotline .phone span{ display: inline-block; vertical-align: bottom; font-size:25px;line-height: 29px; margin-right: 5px; }
footer .contact .hotline .note{ font-size:10px }
footer .contact .subscription{ margin-right: auto; max-width: 330px; }
footer .contact .subscription p:first-of-type{ font: 15px "Arial"; user-select: none; }
footer .contact .subscription input{ flex: 1; border:1px solid #d0d0d0; border-right:0; border-radius: 0; padding: 5px 15px ; margin-left: 2px;outline:none }
footer .contact .subscription input::placeholder{ font-size:12px }
footer .contact .subscription button{ white-space: nowrap; background:#52504c; border:none; outline:none; border-radius:0; color:white; padding:0 10px; font-size:12px }
footer .contact .subscription .select { margin-top: 10px; position: relative; }
footer .contact .subscription .select .validate{ font-size:10px; display: none; position: absolute; color:red }
footer .contact .subscription .select .check{ width: 10px; height: 10px; }
footer .contact .subscription .select .check::after{ font-size: 8px }
footer .contact .subscription .select .val{ font-size: 10px; margin-bottom: 5px;}
footer .contact .scl-media{ margin-right: auto; }
footer .contact .scl-media p:first-of-type{ font: 15px "Arial"; user-select: none;}
footer .contact .scl-media .fa{ font-size:32px; color:black; margin-right: 20px; } 
footer #locate{ max-width: 1295px; width: 100%; display: flex; margin:0 auto; padding:30px 0 50px 0; color: #ccc; }
footer #locate p *:not(.fa){ color:#cccccc; font: 15px "Arial"; }
footer #locate .fa{ color:white; font-size: 20px ; vertical-align: bottom; width: 20px; }
footer #locate a{ display: block; }
footer #locate a *{ color:#cccccc; font: 15px "Arial"; }
footer #locate h6{ color: #cccccc; font: 15px "Arial"; padding-left:8px; user-select: none; text-transform: uppercase; }
footer #locate .location{ margin-left: auto; padding-left:15px;display: flex; flex-direction: column; }
footer #locate .location:first-of-type{ margin:0; }
footer #locate .location .address{ text-indent:3px; }
footer #locate .location .address .fa{ width: 17px; }
footer #locate .location .phone .number::after{ content: '-'; display: inline-block; margin:0 3px; vertical-align: top; }
footer #locate .location .phone .number:last-child::after{content:"."; vertical-align: bottom; margin:0 }
footer #locate .location .ggmap{ padding:5px; border: 1px dashed #858482; width: 342px; margin-top: auto; }
footer #locate .location .ggmap iframe{ width: 100%; height: 100%; }
footer #locate .location .ggmap .wImage::before{ padding-bottom: 64.91%; }
footer #locate #rule-policy{ margin-left:auto; padding-left: 10px }
footer #locate #rule-policy h6{ margin-bottom: 20px; }
footer #locate #rule-policy .ctn{ margin-bottom: 13px; }
footer #locate #rule-policy .ctn a{ margin-bottom: 7px; }
footer #locate #rule-policy .ctn a:hover *{ color:#fff }
@keyframes shake{
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
    }
    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg);
    }

    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg);
    }
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg);
    }
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg);
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
    }
}