body.pro {
  background: #fff;
}

.main{padding-top:50px;padding-bottom:80px;}
.main-right{margin:0 0 0 370px;}
.main-left{float:left;width:300px;}

/*----------------------------------------*/

.main-left h3{height:50px;line-height:50px;padding:0 0 0 20px;background:var(--btn-bg);font-size:20px;color:#fff;font-weight:600;text-transform:uppercase;}
.main-left h3::after{display:none;font-family:"qico";content: "\e727";float:right;font-size:20px;font-weight:normal;margin-top:0px;margin-right:15px;-webkit-transition: -webkit-transform .3s ease;transition: -webkit-transform .3s ease;transition: transform .3s ease;transition: transform .3s ease, -webkit-transform .3s ease;}
.main-left h3.active::after{-webkit-transform: rotate(45deg) scale(1.08);-ms-transform: rotate(45deg) scale(1.08);transform: rotate(45deg) scale(1.08);}
.sidemenu {
margin: 0 0 15px
}
.sidemenu ul {
border: 1px solid #ededed;
border-top: none
}
.sidemenu ul li {
margin: 3px 0 0;
border-bottom: 1px solid #ededed
}
.sidemenu ul li h5 {
line-height: 24px;
display: block;
font-size: 16px;
color: #333;
cursor: pointer;
position: relative
}
.sidemenu ul li h5 a {
color: #333;
display: block;
padding: 10px 50px 10px 20px;
text-transform: capitalize
}
.sidemenu ul li h5 a:hover {
color: var(--active-color);
text-decoration: none
}
.sidemenu ul li h5 span {
position: absolute;
top: 0;
right: 0;
background: url(../images/i4.png) no-repeat center;
width: 40px;
height: 45px;
display: block
}
.sidemenu dl {
display: none
}
.sidemenu dl dd {
line-height: 40px;
border-bottom: 1px dashed #dcdcdc;
background: #fff;
padding: 0 20px
}
.sidemenu dl dd:last-child {
border-bottom: none
}
.sidemenu dl dd a {
font-size: 15px;
display: block;
color: #666;
padding-left: 15px;
text-transform: capitalize;
background: url(../images/i10-1.png) no-repeat left center
}
.sidemenu dl dd.active a,.sidemenu dl dd a:hover {
color: var(--active-color);
background: url(../images/i10.png) no-repeat left center
}
.sidemenu ul li.active h5 {
border-bottom: 1px solid #ededed
}
.sidemenu ul li.active h5 a {
color: var(--active-color)
}
.sidemenu ul li.active span {
background: url(../images/i4-1.png) no-repeat center
}

.pro-nav{margin-bottom:48px;padding:20px 20px;background:#fff;}
.pro-nav ul{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.pro-nav ul li{width:20%;margin:7px 0;}
.pro-nav ul li a{font-size:17px;color:#333;display:block;background:#fff;line-height:22px;background:url(../images/i4.png) no-repeat left 3px;padding:0 0 0 20px;}
.pro-nav ul li.active a,.pro-nav ul li:hover a{background-image:url(	https://shopcdnpro.grainajz.com/tpl-common/common/images/checked.png);}

.pro-list ul{margin:-20px -30px 0;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.pro-list ul li{width:33.33333333%;text-align:center;padding:20px 30px;}
.pro-list ul li .box{}
.pro-list ul li .pic{background:#fff;display:block;position:relative;overflow:hidden;}
.pro-list ul li .pic > img{border: 1px solid #ccc;width:100%;display:block;transition:transform .5s;-webkit-transition:transform .5s;}
.pro-list ul li .txt{background: #EEEEEE;padding: 0px 20px;text-align:center;}
.pro-list ul li .txt h6{font-size:16px;color:#000;height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;}
.pro-list ul li .txt h6 a{font-weight: 600;color: var(--active-color);display:block;}
.pro-list ul li .txt h6 a:hover{color:var(--active-color);}

.pro-list ul li:hover .box{}
.pro-list ul li:hover .pic > img{transform:scale(1.03);-webkit-transform: scale(1.03);}
.pro-list ul li:hover .txt h6 a{color:var(--active-color);}
.pro-list ul li:hover .pic .big{opacity:1;}

.rtit{text-align:center;margin-bottom:40px;}
.rtit h1{font-size:50px;color:var(--active-color);line-height:1;font-family:var(--font-family);}
.rtit h1::after{content:"";width:40px;height:4px;background:var(--active-color);margin:15px auto 0;display:block;}

@media screen and (max-width:1441px) {
.main-right {margin: 0 0 0 300px;}
.rtit h1{font-size:48px;}
}

@media screen and (max-width:1367px) {
.rtit h1{font-size:44px;}

.pro-nav ul li a{font-size:16px;}

.pro-list ul{margin:-20px -20px 0;}
.pro-list ul li{padding:20px 20px;}
}

@media screen and (max-width:1281px){
.rtit h1{font-size:40px;}
.main-right {margin: 0 0 0 270px;}
}

@media screen and (max-width:1171px){
.rtit h1{font-size:36px;}
}

@media screen and (max-width:992px){
.main-right{margin:0;}

.rtit h1{font-size:32px;}

.pro-list ul{margin:-15px -15px 0;}
.pro-list ul li{padding:15px;}
}

@media screen and (max-width:768px) {
.main{padding-top:25px;padding-bottom:30px;}

.rtit{margin-bottom:25px;}
.rtit h1{font-size:28px;}

.pro-nav{margin-bottom:25px;padding:15px;}
.pro-nav ul li{width:33.33333%;margin:6px 0;}
.pro-nav ul li a{font-size:16px;background-size:12px;background-position:left 5px;padding:0 0 0 17px;}

.pro-list ul{margin:-10px -10px 0;}
.pro-list ul li{width:50%;padding:10px 10px;}
.pro-list ul li .txt{padding:10px 0 ;}
.pro-list ul li .txt h6{font-size:17px;}
.pro-list ul li .txt h6 {height:30px;display: flex;
  justify-content: center;
  align-items: center;}
}

@media screen and (max-width:600px) {
.rtit h1{font-size:26px;}

.pro-nav ul li{width:50%;}
}

@media screen and (max-width:480px) {
.rtit h1{font-size:24px;}
}



@media screen and (max-width:1280px){
.main{
  display: flex;
  flex-direction: column;
}
.main-left{
width:100%;
}
.main-right{
margin:0 !important;
}
}

@media screen and (max-width:1500px){
.pro-list ul li .txt h6{
font-size:12px !important;
}
}