#goodsContainer{
	width: calc(90% - 100px);
}

#goodsContainer > section > section > h4{
	font-size: calc(5pt + 1vw);
}

#goodsTitle{
	font-size: calc(5pt + 1vw);
	margin-bottom: 2vw;
	color: #00B7FF;
}

#goodsDescription, #productionProcess > p{
	font-size: calc(4.5pt + 0.9vw);
	color: #333;
	white-space: pre-wrap;
}

#goodsOtherInfos{
	list-style: none;
	display: block;
}

#goodsOtherInfos, #goodsOtherInfos *{
	font-size: calc(4.5pt + 0.9vw);
}

#goodsOtherInfos > li{
	margin: 10px 0;	
}

#goodsOtherInfos > li,
#goodsOtherInfos > li div{
	color: #333;
}

#goodsOtherInfos > li:not(.price){
	white-space: pre-wrap;	
}

#goodsOtherInfos > li > h4,
#goodsOtherInfos > li > h5{
	font-size: calc(4.5pt + 0.9vw);
	font-weight: bold;
	display: block;
	position: relative;
	margin-left: calc(4.5pt + 0.9vw + 5px);
}

#goodsOtherInfos > li > h5{
	margin-top: calc(5px + 0.05vw)
}

#goodsOtherInfos > li > h4:before,
#goodsOtherInfos > li > h5:before{
	content: "";
	width: calc(3.5pt + 0.7vw);
	height: calc(3.5pt + 0.7vw);
	display: block;
	position: absolute;
	top: 0.1vw;
	left: calc(-4.5pt - 0.9vw - 5px);
	border: 1px solid #383838;
}

#goodsOtherInfos > li > h4:before{
	background-color: #383838;
}

#for_goodsPictures{
	margin-bottom: 1.5vw;
	margin-top: 4.5vw;
}

#goodsPictures{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	list-style: none;
	margin-bottom: 5vw;
}

#goodsPictures > li{
	width: 15%;
	height: 10vw;
	margin: 0 2vw 4vw 0;
	cursor: pointer;
}

#goodsPictures > li > img{
	height: 100%;
	width: 100%;
	object-fit: contain;
}

#goodsPictures > li > img:not(.shown){
	display: none;
}

#goodsDetails{
	width: 100%;
	list-style: none;
	position: relative;
	padding-bottom: 10vw;
	margin-bottom: 10vw;
}

#goodsDetails:after{
	position: absolute;
	content: "";
	bottom:0;
	left: 25%;
	width: 50%;
	height: 1px;
	background-color: #aaa;
}

#goodsDetails > li{
	margin-bottom: 5vw;	
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}

#goodsDetails > li > h4{
	margin-bottom: 0.7vw;
	width: 100%;
	font-size: min(calc(5pt + 1vw), 14pt);
}

#goodsDetails > li > .containerA{
	width: 50%;
	text-align: center;
}

#goodsDetails > li > .containerA:not(.shown){
	display: none;
}

#goodsDetails > li > .containerA > img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#goodsDetails > li > .containerB{
	width: 45%;
}

#goodsDetails > li > .containerB > ul{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
}

#goodsDetails > li > .containerB > ul > li{
	width: 22%;
	margin-right: 2%;
	margin-bottom: 2vw;
}

#goodsDetails > li > .containerB > ul > li > img{
	width: 100%;
	height: 100%;
	object-fit: contain;	
}

#goodsDetails > li > .containerB > ul > li:not(.showing) > img{
	filter: brightness(0.7);
}

#goodsDetails > li > .containerB > p{
	font-size: calc(4.5pt + 0.9vw);
	margin: 0.5vw 0;
}

#goodsDetails > li > .containerB > p > div{
	/* price */
	font-size: calc(5pt + 1vw);
}

#goodsDetails > li > .containerB > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	margin-top: 2vw;
}

#goodsDetails > li > .containerB > div > p{
	width: 100%;
}

#goodsDetails > li > .containerB > div > p > span,
#goodsDetails > li > .containerB > div > p > div{
	font-size: min(calc(5.5pt + 1.1vw), 16pt);
	line-height: 1;
}

#goodsDetails > li > .containerB > div > p > div > span{
	font-size: min(calc(5pt + 1vw), 14pt);	
}

#goodsDetails > li > .containerB > div > select{
	margin-left: 0;
	margin-top: 4vw;
	padding: 1em 4em 1em 2em;
	border-radius: 5px;
}

#goodsDetails > li > .containerB > div > button{
	margin-right: 0;
	margin-top: 3.5vw;
	margin-left: 2vw;
}

#goodsDetails > li > .containerB > div > ul{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
}

#goodsDetails > li > .containerB > div > ul > li{
	border: 1px solid #aaa;
	text-align: center;
	padding: 3px 10px;
	width: calc(50% - 22px);
}

#goodsDetails > li > .containerB > div > ul > li.selected{
	border-color: red;
}

#goodsDetails > li > .containerB > div.outOfStock > select,
#goodsDetails > li > .containerB > div.outOfStock > button{
	background-color: #aaa;
	pointer-events: none;
}

@media screen and (max-width: 768px){
	#goodsContainer{
		width: 100%;
	}

	#goodsTitle{
		font-size: calc(9pt + 1.8vw);
	}
			
	#goodsDescription, #productionProcess > p{
		font-size: calc(7pt + 1.4vw);
	}
	
	#goodsOtherInfos, #goodsOtherInfos *{
		font-size: calc(7pt + 1.4vw);
	}

	#goodsOtherInfos > li > h4, #goodsOtherInfos > li > h5{
		font-size: calc(7pt + 1.4vw);
	}
	
	#goodsContainer > section > section > h4{
		font-size: calc(8pt + 1.6vw);
	}

	#goodsPictures > li{
		width: 20.5vw;
		height: auto;
		margin: 0 1vw;
	}
	
	#goodsPictures > li > img{
    width: 20.5vw;
		height: 20.5vw;
	}
	
	#goodsPictures > li > div{
		font-size: calc(6pt + 1.2vw);
	}
	
	#for_goodsPictures{
		margin-bottom: 3vw;
    margin-top: 7vw;
	}
	
	#goodsDetails{
		margin-top: 12vw;
	}
	
	#goodsDetails > li{
		display: block;
	}
	
	#goodsDetails > li:not(:last-child){
		margin-bottom: 20vw;		
	}
	
	#goodsDetails > li > .containerA,
	#goodsDetails > li > .containerB{
		width: 100%;
	}
	
	#goodsDetails > li > .containerB > ul{
		margin-top: 5%;
	}
	
	#goodsDetails > li > h4,
	#goodsDetails > li > .containerB > div > p,
	#goodsDetails > li > .containerB > div > p > span{
		font-size: calc(7pt + 1.4vw);		
	}
	
	#goodsDetails > li > .containerB > div > button {
    font-size: calc(7pt + 1.4vw);
		margin-top: 0.5em;
    margin-left: 8vw;
    padding: 0.9em 2em;
	}
	
}