/*
 * product page
 * */
.product{
	padding: 5rem 0 6.25rem;
}
.product-left{
	float: left;
	width: 20.833%;
	height: 43.75rem;
	background: #fff;
}
.product-left>div.text-center{
	padding: 3rem 0;
	border-bottom: 1px solid #dbdbdb;
}
.product-left>div>h2{
	display: inline-block;
	padding-left: 2.5rem;
	font-size: 1.125rem;
	line-height: 30px;
	background: url(../images/product-icon.png) no-repeat;
}

.categories>li{margin: 2.25rem 0 1rem;}
.categories>li *{font-size: 1.125rem;}
.categories>li a{
	width: 100%;
	height: 3rem;
	padding-left: 7.5%;
    line-height: 3rem;
    background: transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.categories>li>a{padding-left: 45%;}
.categories .active>a,.categories>li>a{padding-right: 4rem;}
.categories .active>i::before, .categories .active>i::after{
	background: #fff;
}
.categories>li{position: relative;}
.categories>li ul{
	display: none;
	position: relative;
	padding-left: 40%;
}
.categories>li ul a{
	font-size: .875rem;
	color: #096c38;
}
.categories>li::after{
	content: "";
	position: absolute;
	right: 0;
	bottom: -1rem;
	width: 60%;
	border-bottom: solid 1px #dedede;
}
.categories>li.active>a,.categories ul>li.active>a{
	color: #fff;
	background: url(../images/categoryBg.png) no-repeat;
	background-size: 100% 100%;
}


.categories>li .plus{right: 1rem;z-index: 20;}
.categories>li.active .plus::after{height: 0;}

.product-right{
	padding-left: 16.8%;
}
.product-form>form{
	position: relative;
	width: 18.75rem;
	height: 2.375rem;
}
.product-form>form>input{
	width: 100%;
	height: 100%;
	border-radius: 30px;
	padding: 0 3.125rem 0 1.25rem ;
	color: #096c38;
	font-size: .875rem;
}
.product-form>form>button{
	left: inherit;
	right: .875rem;
	width: 1.75rem;
	height: 1.75rem;
}
.product-form>form>button>img{max-width: 100%;}
.product-list{margin: 3.75rem 0;}
.product-list>div{
	position: relative;
	width: 23.433%;
	height: 18.75rem;
	margin-right: 2.08%;
	margin-bottom: 2.08%;
	text-align: center;
	background-color: #ffffff;
	border: solid 1px #e2e2e2;
}
.product-list>div .text-hidden {padding: 0 3.125%;}
.product-list>div:nth-child(4n){margin-right: 0;}
.product-list>div .img{width: 100%;}
.product-list>div .img>p{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 15rem;
}
.product-list>div .img img{
	max-width: 100%;
	max-height: 100%;
}
.product-list>div .text-hidden{
	margin-top: 1.5rem;
	font-size: 1rem;
}
.product-list .set-ctn>*{height: 30px;}
.linkTo-detail::after{
	content: "";
	display: block;
	clear: both;
}
.linkTo-detail{
	display: none;
	zoom: 1;
}
.linkTo-detail>a{
	float: left;
	width: 50%;
	height: 9.375rem;
	padding: 2.6rem 1rem;
	background: rgba(165,238,237,.5);
}
.linkTo-detail .set-ctn{
	max-width: 30px;
	max-height: 30px;
}
.linkTo-detail>a>h4{
	margin-top: 1rem;
	color: #096c38;
}
.linkTo-detail>a:nth-child(1){
	background: url(../images/productIcon-bg1.png);
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
.linkTo-detail>a:nth-child(2){
	background: url(../images/productIcon-bg2.png);
	border-bottom: 1px solid #fff;
}
.linkTo-detail>a:nth-child(3){
	background: url(../images/productIcon-bg3.png);
	border-right: 1px solid #fff;
}
.linkTo-detail>a:nth-child(4){
	background: url(../images/productIcon-bg4.png);
}

@media only screen and (min-width: 767px) {
	.categories li:hover>a{
		color: #fff;
		background: url(../images/categoryBg.png) no-repeat;
		background-size: 100% 100%;
	}
	.categories>li:hover i.plus::before, .categories>li:hover i.plus::after{
		background: #fff;
	}
	.product-list>div:hover .linkTo-detail{display: block;}
	.linkTo-detail>a:hover{
		background: url(../images/productIcon-active.png);
	}
	.linkTo-detail>a:hover .set-ctn>*{top: -30px;}
	.linkTo-detail>a:hover>h4{color: #fff;}
}
@media only screen and (max-width: 1800px) {
	.product-right{
		padding-left: 20%;
	}
}
@media only screen and (max-width: 1660px) {
	.product-right{
		padding-left: 23%;
	}
	.categories>li .plus{right: 0;}
	.categories .active>a, .categories>li>a {
	    padding-right: 2rem;
	}
}@media only screen and (max-width: 1400px) {	
	.product-left{width: 17.833%}	
	.product-right{		padding-left: 20%;	}
}

@media only screen and (max-width: 767px) {
	.product-left{width: 26%;}
	/*.product-left.fixed{
		position: fixed;
		top: 4.2rem;
		left: 0; 
		height: calc(100% - 4.2rem);
	}*/
	.categories>li a{padding-left: 0;}
	.categories>li>a,.categories>li ul{padding-left: .5rem;}
	.categories>li .plus{right: 0;}
	i.plus, i.minus{width: 2rem;}
	.categories .active>a,.categories>li>a{padding-right: 2rem;}
	.categories>li::after{width: 100%;}
	.product-right{padding-left: 28%;}
	.product-list>div{
		padding: 0;
		height: 12rem;
	}
	.product-list>div .img>p{
		height: 9rem;
	}
	.product-list>div .img>h3 {
	    margin-top: 1rem;
	}
}