﻿

.main-left{float:left;width:300px;}
.main-right{margin-left:360px;}
/*----------------------------------------*/

.main-left h2{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 h2::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 h2.active::after{-webkit-transform: rotate(45deg) scale(1.08);-ms-transform: rotate(45deg) scale(1.08);transform: rotate(45deg) scale(1.08);}

.sidepro 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;}
.sidepro 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;}
.sidepro 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 h3 {line-height:24px;display:block;font-size:16px;color:#333;cursor:pointer;position:relative}
.sidemenu ul li h3 a {color:#333;display:block;padding:10px 50px 10px 20px;text-transform:capitalize}
.sidemenu ul li h3 a:hover {color:var(--active-color);text-decoration:underline}
.sidemenu ul li h3 span {position:absolute;top:0;right:0;background:url(../image/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:10px 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(../image/i10-1.png) no-repeat left 5px;display: inline;}
.sidemenu dl dd.active a,.sidemenu dl dd a:hover {color:var(--active-color);background-image:url(../image/i10.png);}
.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(../image/i4-1.png) no-repeat center}




.sidemenu ul > li ul{display:none}
.sidemenu ul > li ul li {line-height:40px;border-bottom:1px dashed #dcdcdc;background:#fff;padding:10px 20px}
.sidemenu ul > li ul li:last-child {border-bottom:none}
.sidemenu ul > li ul li a {font-size:15px;display:block;color:#666;padding-left:15px;text-transform:capitalize;background: url(../image/i10-1.png) no-repeat left 5px;display: inline;}
.sidemenu ul > li ul li.active a,.sidemenu ul > li ul li a:hover {color:var(--active-color);background-image:url(../image/i10.png);}
.sidemenu ul li.active h3 {border-bottom:1px solid #ededed}
.sidemenu ul li.active h3 a {color:var(--active-color)}
.sidemenu ul li.active span {background:url(../image/i4-1.png) no-repeat center}




.sidepro{}
.sidepro ul{margin-top:10px;}
.sidepro ul li{display:flex;align-items:center;}
.sidepro ul li+li{margin-top:15px;}
.sidepro ul li .pic{display:block;box-shadow: 0 0 10px rgba(63,62,62,0.1);border: 1px solid #e1e1e1;padding:5px;width:90px;}
.sidepro ul li h5{flex:1;margin:0 0 0 15px;font-size:16px;color:#000;}
.sidepro ul li a.hotreadmore{font-size:13px; text-align: left; color: var(--font-color2);}
.sidepro ul li .hotreadmore:hover{color: var(--font-color2-hover);}
.sidepro ul li a.hotreadmore p{margin-top: 10px;}


.prolist ul {margin:-15px -15px 0;display:flex;flex-wrap:wrap;}
.prolist ul li {width:33.333333333%;text-align:center;background:#fff;padding:15px;cursor:pointer;}
.prolist ul li .pic {display:block;width:100%;overflow:hidden;border:1px solid #c9c9c9;padding:5px;}
.prolist ul li .pic img {width:100%;display:block;transition:all .3s ease 0s;}
.prolist ul li .t {background:#455164;text-align:center;padding:15px 10px}
.prolist ul li .t h6 {font-size:16px;font-weight:300;color:#fff;height:60px;display:flex;align-items:center;justify-content:center;text-align:center}
.prolist ul li .t h6 a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.prolist ul li:hover .pic {border:1px solid #dedede;box-shadow:5px 5px 40px rgba(0,0,0,.2)}
.prolist ul li:hover .pic img {transform:scale(1.06);-webkit-transform:scale(1.06);}
.prolist ul li:hover .t {background:var(--bg-color);}
.prolist li a:hover {color:white;}




@media screen and (max-width:1600px) {


}

@media screen and (max-width:1500px) {


}

@media screen and (max-width:1441px) {


}

@media screen and (max-width:1367px) {

.main-left{width:280px;}
.main-right{margin-left:320px;}

}

@media screen and (max-width:1281px){


}


@media screen and (max-width:1171px){

.prolist ul li {width:50%;}


}

@media screen and (max-width:992px){

.main-left{float:none;width:100%;}
.main-right{margin-left:0;}

.main-left h3{font-size:18px;padding:0 0 0 15px;}
.main-left h3::after{display:block;}
.sidemenu > ul{display:none;}
.sidemenu > ul > li h5 span{top:calc(50% - 18px);width:36px;height:36px;}
.sidemenu ul li h5 a{padding:10px 40px 10px 15px;}

.sidepro{display:none;}

}


@media screen and (max-width:768px) {

.main{padding-top:25px;padding-bottom:30px;}




}


@media screen and (max-width:576px) {

.prolist ul{margin:-10px -10px 0;}
.prolist ul li{padding:10px;}


}


@media screen and (max-width:480px) {

.prolist ul{margin:-10px 0 0;}
.prolist ul li{width:100%;padding:10px 0;}
.prolist ul li .t h6{height:auto;}

}

@media screen and (max-width:420px) {


}




