#content { min-height: 351px; background: no-repeat 50% / cover; background-attachment: fixed; }

#content section.mBox { width: 1200px; background: #eee; }

#mentalBox { margin: 60px 65px; padding: 30px 100px 20px; background: #f8f8f8; border: 1px #ae9b63 solid; }

/* infoBox */
#mentalBox #infoBox { margin: 0 auto 50px; text-align: center; }
#mentalBox #infoBox .result { margin-bottom: 15px; text-align: center;font-size: 2.5em; color: #aa8a3a;}
#mentalBox #infoBox .row { margin-bottom: 20px; text-align: center; }
#mentalBox #infoBox h4 { text-align: center; line-height: 150%; font-size: 1.8em; color: #373737; }
#mentalBox #infoBox .row.img img { width: 600px; height: 350px; object-fit: contain; }
#mentalBox #infoBox .btns a { margin: 5px 10px; padding: 8px 30px; border: 1px #aa8a3a solid; border-radius: 5px; display: inline-block; color: #aa8a3a; }
#mentalBox #infoBox .btns a:nth-child(2n) { background: #aa8a3a; color: #fff; }

/* optionsList */
#mentalBox #optionsList { text-align: center; font-size: 0; }
#mentalBox #optionsList .row { position: relative; margin: 10px 0; padding: 10px 15px; width: calc(25% - 30px); display: inline-block; vertical-align: top; }
#mentalBox #optionsList .row.isimg { width: calc(50% - 30px); }
#mentalBox #optionsList .row a { position: absolute; width: 100%; height: 100%; display: block; z-index: 2; }
#mentalBox #optionsList .row p { position: relative; text-align: center; font-size: 20px; z-index: 1; }
#mentalBox #optionsList .row .notxt { margin: 0 auto 10px; width: 50px; height: 50px; background: #f6e8a9; border-radius: 50%; text-align: center; line-height: 50px; font-size: 20px; }
#mentalBox #optionsList .row .imgBox img { width: 500px; height: 267px; object-fit: contain; }

/* products */
#products >ul >li { width: calc(50% - 10px); }

/* quizBox */
#quizBox { position: relative; margin-top: 0px; min-height: 351px; background: no-repeat 50% / cover; background-attachment: fixed; }
#quizBox .bg { background: #fff; }
#quizBox .bg img { width: 100vw; height: calc(49vw - 110px); object-fit: cover; }
#quizBox .quiztxt { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#quizBox .quiztxt p.btn { position: absolute; width: 100%; text-align: center; bottom: 5%; left: 0; }
#quizBox .quiztxt p.btn a { width: 134px; display: inline-block; }

@media screen and (max-width:1440px) {
	#content section.mBox { width: 90%; }
	#mentalBox { padding: 60px 60px 20px; }
	#quizBox .bg img { height: 50vw; opacity: .75; }
}
@media screen and (min-width:1281px) {
	#products li:hover .pbox .phover.B2 { top: calc(100% - 53px); }
}
@media screen and (max-width:1280px) {
	#mentalBox { margin: 30px; padding: 40px 40px 20px; }
	#mentalBox #optionsList .row .imgBox img { width: 400px; height: 216px; }
}
@media screen and (max-width:980px) {
	#quizBox { margin-top: 30px; }
	#quizBox .bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
	#quizBox .bg img { width: 100%; height: 100%; opacity: .5; }
	#quizBox .quiztxt { position: relative; padding: 0 0 150px; top: 0; }
}
@media screen and (max-width:768px) {
	#mentalBox { padding: 30px 30px 15px; }
	#mentalBox #optionsList .row { width: calc(50% - 30px); }
	#mentalBox #optionsList .row.isimg { margin: 10px auto; float: none; width: calc(100% - 30px); }
}
@media screen and (max-width:640px) {
	#mentalBox #optionsList .row { margin: 10px auto; float: none; width: calc(100% - 30px); }
}