a{color: var(--color);transition: all ease .3s}
a:hover,a:focus{text-decoration:none;color:#c60b1e}
body{color: #000;background-color: #fff;line-height:1.5;font-family: "Roboto", sans-serif;font-size:16px}
header{background-color: #c60b1e;padding: 10px 0;text-align: center;color: #fff;}header img{max-height: 90px;max-width: 100%;filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1);}
footer{background-color: #f5f5f5;padding: 30px 0;text-align: center;color: #000;}footer img{max-width: 100%;max-height: 170px;}
.pn-banner{padding: 110px 0;text-align: center;background: #F0F8FC;background: linear-gradient(0deg,rgba(240, 248, 252, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 70%, rgba(240, 248, 252, 1) 100%);position: relative;font-size: 140%;}.pn-banner .container{z-index: 2;position: relative;}
.pn-banner::before{content: "";position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-image: url(../images/bg-banner.png);background-repeat: repeat-x;background-position: center;background-size: auto 100%;}
.pn-banner h1{margin-top: 0;margin-bottom: 10px;font-size: 250%;font-weight: 700;line-height: 1.3;}.pn-banner h1 span{display: block;color: #1d7aee;}
.pn-body{padding-top: 70px;padding-bottom: 30px;}
.pn-body>.container>.row{display: flex;justify-content: center;flex-wrap: wrap;}.pn-category{margin-bottom: 30px;}
.pn-category-ctn{height: 100%;padding: 30px;border-radius: 10px;background-color: #fff;border: 1px solid #e4e4e4;box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);min-width: 100%;}
.pn-category-ctn h2{margin-top: 0;margin-bottom: 50px;position: relative;padding-right: 30px;display: flex;align-items: center;font-size: 22px;line-height: 30px;}
.pn-category-icon{width: 40px;border-radius: 5px;overflow: hidden;background-color: #c60b1e;margin-right: 10px;}
.pn-category-quantity{position: absolute;right: 0;top: 8px;width: 24px;height: 24px;text-align: center;line-height: 24px;font-size: 12px;background-color: #ebeaea;border-radius: 50%;}
.pn-list{padding: 0;margin: 0;margin-right: -7px;padding-right: 7px;list-style: none;max-height: 480px;overflow-y: auto;}.pn-list li{margin-bottom: 20px;}
.pn-list li a{display: block;line-height: 24px;display: flex;align-items: center;}.pn-list li a span{width: 34px;min-width: 34px;height: 34px;line-height: 34px;text-align: center;background-color: #d8e7fa;border-radius: 50%;color: #5c6a7a;margin-right: 10px;}

@media only screen and (min-width: 1500px){
    .container{width:1440px}
}
@media only screen and (max-width: 1499px){
    
}
@media only screen and (max-width: 1199px){
    
}
@media only screen and (min-width: 992px){
   
}
@media only screen and (max-width: 991px){
   .container{width: 100% !important;}.pn-body{padding-top: 30px;padding-bottom: 0;}
   .pn-banner{font-size: 120%;padding: 80px 0;}.pn-banner h1{font-size: 200%;}
}
@media only screen and (max-width: 767px){
    
}
@media only screen and (max-width: 570px){
    .pn-body>.container>.row{display: block;}.pn-category{width: 100%;}
    .pn-banner{font-size: 110%;}.pn-banner h1{font-size: 180%;}
}
@media only screen and (max-width: 480px){
   .pn-category-ctn{padding: 20px;}.pn-category-ctn h2{margin-bottom: 30px;font-size: 20px;}
}
@media only screen and (max-width: 370px){
    
}