.productWrap,
.recommendWrap {
	position: relative;
	width: 100%;
	overflow: hidden
}

.productInner,
.recommendInner {
	position: relative;
	width: 90%;
	margin: 0 auto;
	max-width: 1100px;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center
}

.main .underTopWrap>img {
	object-position: 71%;
	-o-object-position: 71%
}

@media (min-width: 768px) {
	.main .underTopWrap>img {
		object-position: 60%;
		-o-object-position: 60%
	}
}

@media (min-width: 1280px) {
	.main .underTopWrap>img {
		object-position: 0;
		-o-object-position: 0
	}
}

.main .underTopWrap .h1X .enTit {
	font-size: 50px;
	line-height: 45px
}

@media (min-width: 768px) {
	.main .underTopWrap .h1X .enTit {
		font-size: 60px;
		line-height: 60px
	}
}

.productWrap {
	padding-top: 100px
}

@media (min-width: 768px) {
	.productWrap {
		padding-top: 120px
	}
}

@media (min-width: 1024px) {
	.productWrap {
		padding-top: 150px
	}
}

.productInner {
	max-width: initial
}

@media (min-width: 1024px) {
	.productInner {
		width: 100%
	}
}

.productWrap .rowContentsX {
	width: 100%;
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	row-gap: 40px
}

@media (min-width: 1024px) {
	.productWrap .rowContentsX {
		flex-direction: row;
		align-items: start;
		column-gap: 4.7244094488%
	}
}

@media (min-width: 1024px) {
	.productWrap .rowContentsX {
		width: 95%;
		margin-left: auto
	}
}

@media (min-width: 1280px) {
	.productWrap .rowContentsX {
		width: 88.1944444444%
	}
}

.productWrap .rowContentsX .imgX {
	position: relative;
	width: 100%;
	border-radius: 4px
}

@media (min-width: 1024px) {
	.productWrap .rowContentsX .imgX {
		aspect-ratio: 784 / 596;
		width: 61.7322834646%
	}
}

.productWrap .rowContentsX .imgX .commonImg {
	max-width: none;
	width: 100%;
	height: 100%
}

.productWrap .rowContentsX .imgX img {
	border-radius: 20px
}

@media (min-width: 1024px) {
	.productWrap .rowContentsX .imgX img {
		border-radius: 20px 0 0 20px
	}
}

.productWrap .rowContentsX .textContentsX {
	flex: 1
}

.productWrap .rowContentsX .textContentsX .desc {
	margin-top: 60px;
	font: normal 700 14px/32px "Open Sans", sans-serif;
	color: #A48263
}

@media (min-width: 1024px) {
	.productWrap .rowContentsX .textContentsX .desc {
		margin-top: 30px;
		font-size: 14px;
		line-height: 32px
	}
}

@media (min-width: 1280px) {
	.productWrap .rowContentsX .textContentsX .desc {
		margin-top: 60px;
		font-size: 14px;
		line-height: 32px
	}
}

.recommendWrap {
	padding-top: 100px
}

@media (min-width: 768px) {
	.recommendWrap {
		padding-top: 120px
	}
}

@media (min-width: 1024px) {
	.recommendWrap {
		padding-top: 150px
	}
}

.recommendInner {
	max-width: initial;
	width: 100%
}

.recommendWrap .h2X {
	width: 90%;
	align-items: center
}

/* .recommendWrap .h2X .enTit {
	font-size: 42px;
	line-height: 50px
}

@media (min-width: 768px) {
	.recommendWrap .h2X .enTit {
		font-size: 54px;
		line-height: 60px
	}
} */

.recommendWrap .info {
	width: 90%;
	margin-top: 60px;
	text-align: center;
	font: normal 500 14px / 32px "Open Sans", sans-serif;
	color: #A48263
}

.recommendWrap .linkContentsX {
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 40px auto 80px
}

.recommendWrap .linkContentsX .linkX {
	position: relative;
	min-width: 210px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	background: linear-gradient(180deg, #A48263 0%, #A48263 100%);
	border: 1px solid #A48263;
	transition: all .4s ease-in-out;
	overflow: hidden
}

.recommendWrap .linkContentsX .linkX:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
	transform-origin: right top;
	border-radius: 6px;
	background: linear-gradient(180deg, #FFF 0%, #FFF 100%)
}

.recommendWrap .linkContentsX .linkX:hover:after {
	transform-origin: left top;
	transform: scale(1, 1)
}

.recommendWrap .linkContentsX .linkX:hover .linkTxt {
	color: #A48263
}

.recommendWrap .linkContentsX .linkX .linkTxt {
	position: relative;
	z-index: 10;
	padding: 7px 27px 7px 28px;
	font: normal 700 14px/20px "Open Sans", sans-serif;
	color: #FFF
}

.recommendWrap .collectionX {
	width: 100%
}

.recommendWrap .collectionX .commonImg {
	height: 100%
}

.recommendWrap .collectionX .h3X {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background: #A48263;
	padding: 15px 0
}

@media (min-width: 1024px) {
	.recommendWrap .collectionX .h3X {
		padding: 25px 0
	}
}

.recommendWrap .collectionX .h3X h3.tit {
	font: normal 700 18px/38px "Open Sans", sans-serif;
	color: #FFF
}

.recommendWrap .collectionX .fullImgX {
	width: 100%;
	aspect-ratio: 1440 / 500;
	min-height: 400px
}

.recommendWrap .collectionX .topFlexImgX,
.recommendWrap .collectionX .centerFlexImgX,
.recommendWrap .collectionX .bottomFlexImgX {
	width: 100%;
	display: flex;
	flex-direction: column
}

@media (min-width: 768px) {

	.recommendWrap .collectionX .topFlexImgX,
	.recommendWrap .collectionX .centerFlexImgX,
	.recommendWrap .collectionX .bottomFlexImgX {
		flex-direction: row
	}
}

.recommendWrap .collectionX .topFlexImgX .leftX,
.recommendWrap .collectionX .topFlexImgX .rightX,
.recommendWrap .collectionX .centerFlexImgX .leftX,
.recommendWrap .collectionX .centerFlexImgX .rightX,
.recommendWrap .collectionX .bottomFlexImgX .leftX,
.recommendWrap .collectionX .bottomFlexImgX .rightX {
	flex: 2
}

.recommendWrap .collectionX .topFlexImgX .rightX {
	display: flex;
	flex-direction: column
}

.recommendWrap .collectionX .topFlexImgX .rightX .imgsX {
	flex: 2;
	display: flex
}

.recommendWrap .collectionX .topFlexImgX .rightX .imgsX .imgX {
	flex: 2
}

.recommendWrap .collectionX .centerFlexImgX .leftX,
.recommendWrap .collectionX .centerFlexImgX .rightX {
	flex: 2
}

.recommendWrap .collectionX .centerFlexImgX .leftX {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start
}

.recommendWrap .collectionX .centerFlexImgX .leftX .topX {
	width: 100%;
	flex: 2;
	display: flex
}

.recommendWrap .collectionX .centerFlexImgX .leftX .topX .imgX {
	flex: 2
}

.recommendWrap .collectionX .centerFlexImgX .leftX .bottomImgX {
	width: 100%;
	flex: 2
}

.recommendWrap .collectionX .bottomFlexImgX .rightX {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start
}

.recommendWrap .collectionX .bottomFlexImgX .rightX .topX {
	flex: 2;
	display: flex
}

.recommendWrap .collectionX .bottomFlexImgX .rightX .topX .imgX {
	flex: 2
}

.recommendWrap .collectionX .bottomFlexImgX .rightX .bottomImgX {
	width: 100%;
	flex: 2
}

.recommendWrap .ss23 .fullImgX>img {
	object-position: 57%;
	-o-object-position: 57%
}

@media (min-width: 1024px) {
	.recommendWrap .ss23 .fullImgX>img {
		object-position: 0;
		-o-object-position: 0
	}
}

/*# sourceMappingURL=recommendItem.css.map */