.main-boxs{}


.titles{ text-align:center; padding:20px 0px;position: relative; display:flex; flex-direction: column;align-items: center; margin-bottom: 2rem;}
.titles h3{font-size: 2.5rem;color: #000;line-height: 2;margin-bottom: 0px;font-weight: bold; margin-top:10px;}
.titles h5{font-size:1.5rem; line-height:2;margin-bottom:25px;color:#000;font-weight: 300;}
.titles:after {content: "";width: 125px;height: 5px;display: block;background: var(--color1);}

.prod-list{ width:100%; overflow: hidden; margin-top:2rem;}
.prod-list ul{width:100%; display:flex; justify-content: space-between;flex-wrap: wrap;}
.prod-list ul li{width: calc(((100% / 3) - 5px));flex-shrink: 0; margin:5px 0px;}
.prod-list ul li .image{width:100%;height: 100%;overflow: hidden;}
.prod-list ul li .image img{max-width:100%;    height: 100%;}
.prod-list ul li:last-child:nth-child(3n - 1){margin-right: calc(((100% / 3) + 2.5px));}
.prod-list li .inner-box {
    position: relative;
    margin-bottom: 0px;width: 100%;
    height: 100%;
}

.prod-list li .inner-box:before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: -moz-linear-gradient( -90deg, rgba(0,0,0,0) 60%, rgb(0,0,0,0.6) 100%);
    background-image: -webkit-linear-gradient( -90deg, rgba(0,0,0,0) 60%, rgb(0,0,0,0.6) 100%);
    background-image: -ms-linear-gradient( -90deg, rgba(0,0,0,0) 60%, rgb(0,0,0,0.6) 100%);
    opacity: .8;
}
.prod-list li .inner-box:hover:before {
        position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: -moz-linear-gradient( -90deg, var(--color1) 0%, var(--color1) 100%);
    background-image: -webkit-linear-gradient( -90deg, var(--color1) 0%, var(--color1) 100%);
    background-image: -ms-linear-gradient( -90deg, var(--color1) 0%, var(--color1) 100%);
	 background-image: linear-gradient( -90deg, var(--color1) 0%, var(--color1) 100%);
    opacity: .8;
    z-index: 1;
}
.prod-list li .content {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 30px 30px;
    text-align: center;
	z-index: 20;
}
.prod-list li a{text-decoration:none;}
.prod-list li .top-content {
    position: relative;
    transition: .5s;
	text-align: left;
}

.prod-list li .inner-box:hover .top-content {
    transform: translateY(-90px);
}

.prod-list li h5 {
    position: relative;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase; margin-bottom:5px;
}

.prod-list li h3 {
    position: relative;
    font-size: 24px;
    font-weight: bold;
    color: #fff;line-height: 1.6em;
}

.prod-list li h3:before {
    position: absolute;
    content: '';
    left: 50%;
    bottom: 0;
    width: 2px;
    height: 80px;
    transform: translate(-50%, 97px);
    transition: .5s;
}

.prod-list li .inner-box:hover h3:before {
    height: 40px;
    transform: translate(-50%, 65px);
}

.prod-list li .text {
    color: #fff;
    position: relative;
    transition: .5s;
    opacity: 0;
	display: flex;
	text-align: left;
    transform: translateY(10px);align-items: baseline;
}
.prod-list li .text:after{content: "\e659";
	font-family: "iconfont" !important;
    color: #ffffff;
	background: var(--color4);
    font-size: 15px;
    padding: 1px 5px 0px 5px;
	margin-left:20px;
    z-index: 10;
    text-align: left;
}

.prod-list li .inner-box:hover .text {
    opacity: 1;
    transform: translateY(0);
}

.prod-list li img{max-width:100%;}

.prod2-section{padding-top: 15px;}
.prod-list.prod2-section ul li{width: calc(((100% / 2) - 15px) * 1) !important;}
.prod-list.prod2-section ul li:nth-child(3){width: 100% !important;}

.col-box{width:100%; margin-top:3rem; padding:0px 7%;}
.col-box ul{width:100%; display:flex; margin: 0;}
.col-box ul li{margin: 0;
    margin-right: 5px;
    height: auto;}
.col-box ul li a{padding:20px 40px; display:flex;background: #f5f5f5; color:#000;}
.col-box ul li a:hover,.col-box ul li.cur a{background:var(--color1); color:#FFFFFF;}


.prod-list-col{ width:100%;padding:0px 7%;}
.prod-list-col ul{}
.prod-list-col ul li{}
.prod-list-col ul li .inner-box{}

.prod-infos{width:100%; margin-top: 2rem;padding:0px 7%; margin-bottom: 5rem;}
.prod-show{width:100%; display:flex;background:#FFFFFF; box-shadow: 0px 0px 20px rgba(0,0,0,0.4);}
.prod-show .prod_pic{max-width:700px; flex-shrink: 0;}
.prod_desc{flex:1;  padding:50px 80px;color:#FFFFFF;background: var(--color1);margin-left: 2px;}
.prod_desc h3{border-bottom:1px solid rgba(255,255,255,0.6); padding-bottom: 1rem;}
.prod_desc h6{margin-top:20px; font-size: 16px;line-height: 2;}

.prod-lx{margin-top: 2rem;}
/*.prod-lx a{color: #FFFFFF; padding:10px 20px; border:1px solid #FFFFFF; font-size:16px;}*/
.prod-lx a:nth-child(1){border: 0px;
    padding: 0px;
    font-weight: 500;
    font-size: 31px;
    display: flex;
    align-items: center;
    color: #ffff00;}
.prod-lx a:nth-child(1) em{    background: #ffff00;
    /* padding: 10px; */
    display: flex;
    color: var(--color1);
    margin-right: 5px;
    border-radius: 50px;
    line-height: 0;
    align-items: center;
    justify-content: center;
    /* font-style: normal; */
    width: 40px;
    height: 40px;
    font-size: 28px;}

@media screen and (width: 1024px)
{
	aside{display:none;}
	main{padding:2rem 0rem;}
	.prod-box{padding:15px;max-width:100%;}
}
@media screen and (max-width: 1023px)
{
	aside{display:none;}
	main{padding:2rem 0rem;}
	.prod-box{padding:15px;max-width:100%;}
	.col-box{width:100%; padding:0px 20px;}
	.col-box ul{flex-wrap: wrap;max-width: unset;}
	.col-box ul li{margin-bottom:5px;width: calc((100% / 3) - 5px);height: 40px; background: #f5f5f5; display: flex;justify-content: center;align-items: center;}
	.col-box ul li:hover,.col-box ul li.cur{background:var(--color1);}
	.col-box ul li a{padding:0px;width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;}
	.loca-col li.cur:after{display: none !important;}
	
	.prod-infos{padding:0px 20px;}
	.prod-show{flex-direction: column;}
	.prod-show .prod_pic{width: 100%;}
	.prod-show .prod_pic img{max-width:100%;}
	.prod_desc{margin: 0px; padding:30px;}
}


@media screen and (max-width: 767px){
	.prod-list ul li{width:100%;}
}
@media screen and (max-width: 425px)
{
	
}
@media screen and (max-width: 414px)
{

}
@media screen and (max-width: 375px)
{
	
}
@media screen and (max-width: 320px)
{
	
}