@charset "utf-8";
/* index page css default for all devices  */

.bannerbg {
	background-color: #97C1E4;
	/*ppt #97C1E4, figma #97C1E4*/
	padding-top: 9rem;
	padding-bottom: 1rem;
	text-align: center;
	color: #ffffff;
}

.onepiece {
	font-family: Khand, Inter;
	text-transform: uppercase;
	font-size: 6.4rem;
	margin-top: 1.2rem;
}

.banbot {
	margin-top: 5rem;
}

.banbot h2 {
	font-size: 12.8rem;
}

.banbot .authentic {
	max-width: 52rem;
	margin: 0rem auto;
	font-size: 2.4rem;
	line-height: 3.6rem;
	text-transform: uppercase;
}

.twobtn {
	padding-top: 3.5rem;
}

a.btn1 {
	margin-right: 2rem;
}

/* 4 cards  */
.partb {
	position: relative;
	padding: 30px 5%;
	padding-bottom: 170px;
	overflow: visible;
	box-sizing: border-box;
}

/* 上半部分（蓝色） */
.partb .tophalf {
	background-color: #97C1E4;
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 40vh;
	min-height: 220px;
	z-index: 0;
}

/* 卡片容器：在普通文档流中（这样父容器会被撑开） */
.cards {
	position: relative;
	z-index: 2;
	top: 60px;
	/* 在 top half 之上显示 */
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0%;
	align-items: flex-start;
	/* 卡片以顶部对齐，便于旋转叠放 */
}

/* 卡片基础样式 */
.cards .card {
	width: 26%;
	position: relative;
	overflow: visible;
	background: transparent;
	transition: transform 0.9s cubic-bezier(.2, .9, .2, 1), box-shadow 0.25s;
	transform-origin: center center;
	border: none;
}

.cards .card img {
	width: 100%;
	display: block;
}

/* ---------- 默认旋转（使用类，避免被其他规则误覆盖） ---------- */
.cards .c1 {
	transform: rotate(-15deg);
	z-index: 4;
}

.cards .c2 {
	transform: rotate(15deg) translateX(-3%) translateY(3%);
	margin-left: -3%;
	z-index: 2;
}

.cards .c3 {
	transform: rotate(-15deg) translateX(-3%) translateY(-3%);
	margin-left: -3%;
	z-index: 3;
}

.cards .c4 {
	transform: rotate(15deg);
	margin-left: -5%;
	z-index: 1;
}


/* 移动端/触屏：按下某个卡片时该卡片摆正（:active 不会影响默认状态） */
@media (hover: none) and (pointer: coarse) {
	.cards .card:active {
		transform: rotate(0deg) translate(0, 0);
		z-index: 12;
		box-shadow: 12px 12px 32px rgba(0, 0, 0, 0.18);
	}
}

/* 轻微放大 柔和发光 */
.cards .card img {
	transition: transform 0.6s ease, filter 0.6s ease;
}

.cards .card:hover img {
	transform: scale(1.05);
	filter: brightness(1.15) contrast(1.05);
}



/* ---------- 响应式（平板 / 手机） ---------- */
@media (max-width: 992px) {
	.bannerbg {
		padding-top: 8rem;
		padding-bottom: 1rem;
		margin-top: -1px;
	}



	.twobtn {
		max-width: 96%;
		margin-left: auto;
		margin-right: auto;
	}

	.twobtn a.abtn {
		font-size: 1.2rem;
	}

	.banbot {
		margin-top: 3rem;
	}

	.banbot h2 {
		font-size: 6rem;
	}

	.banbot .authentic {
		max-width: 90%;
		font-size: 1.4rem;
		line-height: 2.6rem;
	}

	.partb {
		padding: 10px 3%;
		min-height: 150px;
		padding-bottom: 10px;
		padding-top: 150px;
	}

	.partb .tophalf {
		min-height: 180px;
		height: 35vh;
	}

	.cards {
		top: -60px;
		justify-content: center;
		gap: 5%;
		padding-left: 10px;
		padding-right: 10px;
		/* 手机端左右留  空白 */
	}

	.cards .card {
		width: 46%;
		margin-bottom: 0rem;
	}

	/* 第二行往上压 50px，符合你的要求 */
	.cards .c3,
	.cards .c4 {
		margin-top: -15px;
	}

	/* 叠放关系 */
	.cards .c3 {
		z-index: 5;
		transform: rotate(10deg);
	}

	.cards .c4 {
		z-index: 4;
		transform: rotate(-10deg);
	}

	/* 触屏按下摆正 */
	.cards .card:active {
		transform: rotate(0deg) translate(0, 0);
		z-index: 12;
		box-shadow: 12px 12px 32px rgba(0, 0, 0, 0.18);
	}
}

@media (max-width: 992px) {
	.bannerbg {
		padding-top: 6rem;
	}
}

@media (max-width: 480px) {
	.bannerbg {
		padding-top: 2rem;
	}
}

/* 进一步优化：超小屏（比如 iPhone SE）时 */
@media (max-width: 480px) {
	.cards {
		padding-left: 30px;
		padding-right: 30px;
		top: -90px;
	}

	/*  change from 2 columns to 1 column on mobile */
	.cards .card {
		width: 80%;
		margin-bottom: 0rem;
	}

	.cards .c1 {
		z-index: 1;
	}

	.cards .c2 {
		margin-top: -50px;
		z-index: 2;
	}


	.cards .c3 {
		margin-top: -50px;
		z-index: 3;
		transform: rotate(-10deg);
	}

	.cards .c4 {
		z-index: 4;
		margin-top: -50px;
		transform: rotate(10deg);
	}

	/*  change from 2 columns to 1 column on mobile */

	.partb {
		padding: 0px 3%;
		padding-bottom: 0px;
		padding-top: 130px;
	}

	.partb .tophalf {
		min-height: 140px;
		height: 18vh;
	}

}


/* part 1 Italy morning */
.part1 {
	background: url(../images/imgbg.png) no-repeat;
	background-position: right bottom;
	background-color: #fbf0da;
	min-height: 75rem;
	color: #24609B;
}

.part1bg {
	background-color: #fbf0da;
	height: 100px;
}

.part1 h2 {
	line-height: 7rem;
}

.part1 p {
	padding-top: 3rem;
}

.part1 .left {
	max-width: 55rem;
	padding-top: 25rem;
	padding-right: 10rem;
}

.part1 .right {
	padding-top: 16rem;
	overflow: hidden;
}

.part1 .right img {
	transition: all .9s;
}

.part1 .right img:hover {
	transform: scale(1.08, 1.08);
}

@media (min-width: 1491px) and (max-width: 1500px) {
	.part1 h2 {
		line-height: 6rem;
		font-size: 5rem;
	}

	.part1 .left {
		padding-top: 2rem;
		padding-right: 5rem;
		width: 80%;
		margin: 0 auto;
	}
}

@media (min-width: 993px) and (max-width: 1490px) {
	.part1 {

		background: none;
		background-color: #fbf0da;
		padding-bottom: 7rem;
	}

	.part1 .left {
		padding-top: 10rem;
	}

	.part1 h2 {
		line-height: 5rem;
		font-size: 5rem;
	}

	.part1 .right {
		padding-top: 6rem;
		text-align: center;
	}
}



/* 4 promises end */
.part2 {
	padding: 4rem 1rem;
	background: url("../images/promise_bg.webp") no-repeat center center;
	background-size: cover;
	min-height: 100vh;
	/* 让整个分区满屏 */
}

/* 居中容器，最大宽高按比例响应式缩放 */
.promise-box {
	width: 90%;
	max-width: 1078px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* 三段背景 */
.promise-top {
	background: url("../images/promise_bg_01.png") no-repeat center top;
	background-size: 100% auto;
	width: 100%;
	aspect-ratio: 1078 / 43;
	/* 根据你的上图高度比例调整 */
	flex-shrink: 0;
}

.promise-middle {
	margin-top: -1px;
	background: url("../images/promise_bg_02.png") repeat-y center top;
	background-size: 100% auto;
	width: 100%;
	flex: 1;
	min-height: 400px;
	/* 内容较少时保持基本高度 */
	padding: 2rem;
}

.promise-bottom {
	background: url("../images/promise_bg_03.png") no-repeat center bottom;
	background-size: 100% auto;
	width: 100%;
	aspect-ratio: 1078 / 57;
	/* 根据下图比例调整 */
	flex-shrink: 0;
	margin-top: -1px;
}

/* 内容文字样式，可自行调整 */
.promise-content {
	max-width: 90%;
	margin: 0 auto;
	padding-top: 4rem;
	padding-bottom: 5rem;
}

.promise-content h2 {
	margin-bottom: 3.8rem;
}

.promise-content p {
	padding-top: 2rem;
}

.promise-content i img {
	max-width: 6rem;
	height: auto;
	transition: all 0.4s ease;
	/* 平滑过渡 */
	filter: brightness(0.9) contrast(1.1);
	transform: scale(1);
}

/* 鼠标悬停效果 */
.promise-content i img:hover {
	transform: scale(1.08);
	/* 轻微放大 */
	filter: brightness(1.1) drop-shadow(0 0 8px rgba(152, 195, 230, 0.5));
	/* 柔和蓝光 */
}


.promise-content .mt4 {
	margin-top: 4rem;
}

/* 响应式微调 */
@media (max-width: 991.98px) {
	.part2 {
		padding: 9rem 1rem;
		background: url("../images/promise_bg_mc.jpg") repeat-x;
		background-size: contain;
		min-height: 100vh;
		/* 让整个分区满屏 */
	}

	.promise-middle {
		padding: 1.5rem;
	}

	.promise-content h2.luxtitle {
		font-size: 5rem;
	}

	.promise-content p {
		font-size: 1.4rem;
		max-width: 90%;
		margin: auto;
	}
}

@media (max-width: 575.98px) {
	.promise-middle {
		padding: 1rem;
		margin-top: -2px;
	}

	.promise-content h2 {
		font-size: 1.5rem;
	}
}

/* 4 promises end */

/* part 3 start */
.part3 {
	padding-top: 16rem;
	padding-bottom: 10rem;
	color: #04498e;
}

.part3 .toptext {
	max-width: 80rem;
	margin: 0 auto;
}

.part3 .toptext h2 {
	font-size: 12.8rem;
}

.part3 .toptext p {
	margin: 2rem auto;
	line-height: 4rem;
	font-size: 3.2rem;
	max-width: 58rem;
	margin: 4.6rem auto;
}

.part3 .toptext h3 {
	font-family: Khand, Inter;
	font-size: 4.3rem;
	line-height: 4rem;
	text-transform: uppercase;
}

.part3 .bottext {
	max-width: 90rem;
	margin: 4rem auto;
	line-height: 4rem;
	font-size: 3.2rem;
	text-transform: uppercase;
}

.partc {
	max-width: 100rem;
	position: relative;
	padding: 30px 8%;
	padding-bottom: 100px;
	overflow: visible;
	box-sizing: border-box;
}

.partc .cards .c1 {
	transform: rotate(15deg) translateX(2%);
	z-index: 1;
}

.partc .cards .c2 {
	transform: rotate(-10deg) translateX(1%) translateY(-2%);
	margin-left: -3%;
	z-index: 3;
}

.partc .cards .c3 {
	transform: rotate(15deg) translateX(-5%) translateY(10%);
	margin-left: -3%;
	z-index: 1;
}

.partc .cards {
	position: relative;
	z-index: 2;
	top: 60px;
	/* 在 top half 之上显示 */
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0%;
	align-items: flex-start;
	/* 卡片以顶部对齐，便于旋转叠放 */
}

/* 卡片基础样式 */
.partc .cards .card {
	width: 35%;
	position: relative;
	overflow: visible;
	background: transparent;
	transition: transform 0.9s cubic-bezier(.2, .9, .2, 1), box-shadow 0.25s;
	transform-origin: center center;
	border: none;
}

/* part3 for ipad */
@media (max-width: 992px) {
	.part3 {
		padding-top: 10rem;
		padding-bottom: 6rem;
	}

	.part3 .toptext {
		max-width: 96%;
	}

	.part3 .toptext h2 {
		font-size: 7rem;
	}

	.part3 .toptext p {
		line-height: 3rem;
		font-size: 2rem;
		max-width: 90%;
		margin: 3rem auto;
	}

	.part3 .toptext h3 {
		font-size: 2.4rem;
	}

	.part3 .bottext {
		max-width: 90%;
		line-height: 3rem;
		margin: 0 auto;
		/* margin-top: -160px; */
		font-size: 2rem;
	}
}

@media (max-width: 576px) {
	.part3 .partc .cards .card {
		width: 90%;
		max-width: 32rem;
		margin: 3rem auto;
	}
}


/* part 3 end  */

/* part 4 start  */
.part4 {
	padding-top: 10rem;
	padding-bottom: 10rem;
}

.part4 .toptext h2 {
	font-size: 12.8rem;
}

.part4 .toptext p {
	max-width: 60rem;
	margin: 3.5rem auto;
	font-size: 3.2rem;
	line-height: 4rem;
	text-transform: uppercase;
}

.part4 .bottext {
	max-width: 100rem;
	margin: 0 auto;
	text-transform: uppercase;
	font-size: 4.8rem;
	line-height: 5rem;
	text-align: center;
	font-weight: 600;
}

.part4 .btn3 {
	border: #231F20 2px solid;
	color: #231F20;
	margin-top: 5rem;
	min-width: 12rem;
}

.part4 .btn3:hover {
	border: #5b91bf 2px solid;
}

.stories {
	max-width: 130rem;
	background-color: #fff;
	padding-top: 8rem;
	padding-bottom: 8rem;
}

/* 图片旋转 */
.stories .rotate-left {
	transform: rotate(-4.16deg);
}

.stories .rotate-right {
	transform: rotate(4.16deg);
}

/* 图片最大宽度与间距 */
.story-img img {
	max-width: 90%;
	height: auto;
	box-shadow: 0 8px 35px rgba(0, 0, 0, 0.15);
	transition: transform 0.5s ease;
}

.story-img img:hover {
	transform: scale(1.03);
	box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25);
}

/* 文本样式 */
.story-text h3 {
	font-family: 'Khand', sans-serif;
	font-size: 4.8rem;
	line-height: 4rem;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 2rem;
}

.story-text p {
	font-family: 'Inter', sans-serif;
	font-size: 3.2rem;
	line-height: 4rem;
	width: 80%;
	color: #333;
	margin-bottom: 0;
}

/* 让图片和文字之间保持一定距离 */
.story {
	margin-bottom: 8rem;
}

/* ========== 响应式调整 ========== */

/* 中小屏 (平板与以下) 图片上文字下 */
@media (max-width: 991.98px) {
	.part4 .bottext {
		margin-top: 0;
		line-height: 3rem;
		font-size: 2.4rem;
	}

	.stories {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.story {
		text-align: center;
	}

	.story-text {
		margin-top: 3rem;
	}

	.story-text h3 {
		font-size: 3rem;
		line-height: 3.6rem;
	}

	.story-text p {
		font-size: 2rem;
		line-height: 3rem;
		padding-bottom: 3rem;
		margin: auto;
	}

	.story-img img {
		max-width: 90%;
		/* transform: none !important; */
		/* 手机端取消旋转，防止裁切 */
	}
}



/* part 4 end  */
/* part 5 start - 3 guarantees  */
.part5 {
	padding: 15rem 0 20rem 0;
	background: url(../images/part5bg.png) repeat-x;
	background-color: #97C1E4;
	background-position: 7rem calc(100% - 8rem);
}

.part5 .toptext h2 {
	font-size: 12.8rem;
}

.part5 .toptext p {
	line-height: 4rem;
	font-size: 3.2rem;
	text-transform: uppercase;
	max-width: 87rem;
	margin: 4rem auto 10rem auto;
}

.part5 ul {
	max-width: 136rem;
	margin: 0 auto;
}

.part5 ul li img {
	max-width: 100%;
}

@media (max-width: 992px) {
	.part5 {
		padding: 8rem 0 15rem 0;
		background: url(../images/part5bg_mc.png) repeat-x;
		background-color: #97C1E4;
		background-position: 5rem calc(100% - 6rem);
	}

	.part5 .toptext h2 {
		font-size: 6rem;
	}

	.part5 .toptext p {
		line-height: 3.4rem;
		font-size: 2.6rem;
		margin: 4rem auto 6rem auto;
	}

}

/* part 5 end  */

/* part 6 start - wechat & alipay  */
.part6 {
	padding: 4rem 1rem;
	background: url("../images/paybg.webp") no-repeat center center;
	background-size: cover;
	min-height: 100vh;
	/* 让整个分区满屏 */
}

.part6 h2 {
	font-size: 12.8rem;
	margin-top: 3rem;
}

.part6 .promise-content p {
	text-transform: uppercase;
	font-size: 2.4rem;
	max-width: 66rem;
}

.part6 .promise-content p span {
	text-transform: none;
}

.part6 ul {
	margin: 9rem auto;
	margin-bottom: 9.8rem;
	max-width: 66rem;
}

.part6 ul li img {
	max-width: 100%;
}

@media (max-width: 992px) {
	.part6 .promise-content h2.luxtitle {
		font-size: 6rem;
	}

	.part6 ul {
		margin: 6rem auto;
		margin-bottom: 1rem;
	}

	.part6 ul li img {
		max-width: 70%;
	}

	.part6 .alipay {
		margin-bottom: 5rem;
	}

	.part6 .promise-content p {
		text-transform: uppercase;
		max-width: 94%;
		padding-left: 2rem;
		padding-right: 2rem;
		font-size: 1.4rem;
	}
}

/* part 6 end  */

/*for ipad  and mobile*/
@media (max-width: 992px) {
	.onepiece {
		font-size: 3rem;
	}

	.part1 {
		min-height: 55rem;
		background: none;
		background-color: #fbf0da;
		padding-bottom: 7rem;
	}

	.row>* {
		padding-left: 0px !important;
	}


	.part1 h2 {
		line-height: 6rem;
		font-size: 5rem;
	}

	.part1 p {
		font-size: 1.8rem;
		padding-top: 1rem;
	}

	.part1 .left {
		max-width: 50rem;
		padding-top: 0rem;
		padding-left: 0;
		padding-right: 0rem;
		width: 80%;
		margin: 0 auto;
	}

	.part1 .right {
		padding-top: 4rem;
		text-align: center;
	}

}


@media (max-width: 480px) {
	.part1 {
		min-height: 45rem;
	}

	.part1 .left {
		width: 90%;
	}

	.part1 p {
		padding-left: 1rem;
	}
}

/* only for mobile phone */
@media (max-width: 768px) {
	.banbot h2 {
		font-size: 5rem;
	}

	.part1 h2 {
		line-height: 5rem;
	}

	.part1 p {
		padding-top: 2rem;
	}

	.part3 .toptext h2 {
		font-size: 6rem;
	}

	.part4 .toptext h2 {
		font-size: 6rem;
	}



	.part4 .toptext p {
		font-size: 2rem;
		line-height: 3rem;
	}

	.part4 .bottext {
		max-width: 90%;
		font-size: 2rem;
	}

	.part5 .toptext h2 {
		font-size: 6rem;
		line-height: 6rem;
		max-width: 94%;
		margin-left: auto;
		margin-right: auto;
	}

	.part3 .bottext {
		max-width: 90%;
		line-height: 3rem;
		margin: 0 auto;
		margin-top: -100px;
		font-size: 1.4rem;
	}

	/* 卡片基础样式 */
	.part3 .cards {
		display: block;
		text-align: center;
		top: 0px;
	}

	.part3 .cards .card {
		width: 80%;
		max-width: 40rem;
		margin: auto;
		/* margin: 0rem auto; */
		/* transform: none; */

	}

	.part3 .partc {
		padding-bottom: 0;
	}

	.part3 .partc .cards .c1 {
		transform: rotate(10deg);
	}

	.part3 .partc .cards .c2 {
		transform: rotate(-10deg) translateX(1%) translateY(-15%);
		margin-top: -30px;
		position: relative;
		z-index: 3;
	}

	.part3 .partc .cards .c3 {
		transform: rotate(10deg) translateX(-1%) translateY(-30%);
		margin-top: -50px;
		position: relative;
		z-index: 5;
	}

	ul.cards {
		/* height: calc(100%-10px); */
		height: auto;
	}

	.part5 .toptext p {
		line-height: 3rem;
		font-size: 2rem;
	}

	.part5 ul {
		display: flex;
		flex-direction: column;
		/* 改为竖排 */
		align-items: center;
		gap: 0;
		padding: 0;
		list-style: none;
		max-width: 100%;
	}

	.part5 ul li {
		width: 80%;
		max-width: 40rem;
		margin: 0 auto;
	}

	.part5 ul li img {
		width: 100%;
		display: block;
		margin: 0 auto;
		transition: transform 0.6s ease;
	}

	/* 三张图轻微旋转 + 上下叠放 */
	.part5 ul li:nth-child(1) img {
		transform: rotate(8deg);
		margin-top: 0;
	}

	.part5 ul li:nth-child(2) img {
		transform: rotate(-8deg);
		margin-top: -4rem;
		/* 负 margin 产生堆叠视觉 */
	}

	.part5 ul li:nth-child(3) img {
		transform: rotate(6deg);
		margin-top: -4rem;
	}

	.part6 .promise-content h2.luxtitle {
		font-size: 5rem;
	}

	.part6 ul li img {
		width: 50%;
	}
}

@media (max-width: 480px) {
	.partc {

		padding: 8px 8%;
	}

	.part2 {
		padding: 6rem 1rem;
	}

	.part3 {
		padding-top: 8rem;
	}

	.part4 {
		padding-top: 8rem;
		padding-bottom: 8rem;
	}
}



/*small mobile phone */
@media (max-width:370px) {}