.prod-box{margin: auto;}
.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 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);
}

.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;}
@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%;}
}


@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)
{
	
}

.photo .titles{margin-top:1rem;}
.photo-list{margin-bottom: 50px;padding: 0px 5%;}
.prod-list.photo-list li .inner-box:before{display: none;}


.main-navigation {
    position: relative;
    background: none;
}

@media screen and (max-width: 1023px)
{
	.photo .titles{margin-top:0px;}
}

@media screen and (max-width: 767px)
{
	
}
@media screen and (max-width: 425px)
{
	
}
@media screen and (max-width: 414px)
{
		
}


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

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

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